レシピを投稿する
レイアウト料理帳の例を提供したい場合、このページでは、例を公開するための手順について説明します。
何が良いレシピになるのか
あらゆる便利なウェブデザインのパターンの最も単純なバージョンです。 含まれている CSS の各行は、パターンを示すのを助けるためにそこにあるべきですので、例をきれいに見せるためだけのものは省略してください。アイデアは、誰かがパターンを手に取り、自分のスタイルでサイトでそれを使用できるということです。
レシピは以下で構成されています。
- ライブサンプルは、CSS Examples GitHub リポジトリーに保存します。
- その例のダウンロード可能なバージョンも、CSS Examples リポジトリーに保存します。
- CSS レイアウト料理帳内のページの詳細は次のとおりです。
- はじめに
- 要件
- レシピ
- 選択したもの
- 有用な代替策または代替方法
- アクセシビリティの考慮
- ブラウザーの互換性（CSS プロパティが完全に対応されていない場合）
- 関連資料
メモ: 日本語版のレシピを単独で投稿することはできません。必ず英語版を先に投稿してください。英語版の投稿については英語版ページをご覧ください。
レシピの投稿の手順
レシピを作成し、CSS レイアウト料理帳に追加するには、以下の手順に従ってください。
1. パターンの作成
例をレシピに変える前に、まずパターンを単純な HTML ページとして作成します。 何を示そうとしているのかを考え、できるだけ単純にします。クラス名を追加する場合は、 "container" や "item" といった説明的な言葉を使用してください。
HTML と CSS については、複数のブラウザー、ビューポートサイズ、および端末で必ずテストを行ってください。また、CSS のスタイル設定がアクセシビリティガイドラインに準拠していることも確実に確認してください。対応が限定的な CSS プロパティを使用しても問題はありませんが、ページを生成する際には、特に「ブラウザーの互換性」の節において、必ずブラウザーの対応情報を記載するようにしてください。場合によっては、代替機能に対応したサンプルを別途作成しておくと役立つことがあります。
2. ライブサンプルの作成
料理帳のページにあるライブサンプル（例えば、要素の中央揃えなど）や、MDN で他の場所にあるライブサンプルでは、読者はコード全体に圧倒されることなく、コードを操作して関連する部分を変更することができます。あなたのレシピも、1つ以上のライブサンプルを用いて解説します。
CSS Examples リポジトリーをフォークして（右上の Fork ボタンを押すと自分のアカウントにコピーが作られます）、css-cookbook フォルダーを調べてください。 出発点としてコピーできる cookbook-template.html ファイルがあります。 これを css-cookbook ディレクトリーにパターンにとって意味のある名前で保存してください。 テンプレート (template) は、さまざまなパーツを適切な場所に追加するのに役立つようにコメントされています。
このための重要な部分は次のとおりです。
-
エディターパネルのスタイル用のスタイルシート、基本的な body のスタイル、およびエディター機能用の JavaScript ファイルがあります。 これらのファイルはそのままにしておきます。
-
<head>の中には 2 つのスタイルのブロックがあります。 1 つ目は、ページの訪問者がこの例で遊ぶために変更する必要がないものです。 2 つ目は、ライブサンプルで遊びたい項目のどれかです。 通常、 1 つ目のブロックにライブサンプルの CSS をすべて追加してから、 2 番目のブロックに移動する必要があるルールのセットを選択します。 2 番目のブロックのルールは、パターンの基本となるルール、おそらくユーザーが CSS の値を変更してパターンの更新を確認できるようなルールにする必要があります。 -
コンポーネント用の HTML を 2 回追加する必要があります。 最初に
previewクラスのsectionの中に、次にplayable-htmlクラスのtextareaの中にです。 -
head の中の 2 番目のブロックからの
editableクラスの CSS も、playable-cssクラスのtextareaにコピーする必要があります。
実例は center.html で、これは要素を中央に配置のページに埋め込まれています。これを使用して、さまざまな細部を正しく追加する方法を確認できます。
リポジトリーをフォークした場合、私たちの CSS と JavaScript ファイルを例と一緒に持っているのであれば、ブラウザーでライブサンプルを開くと、ページに含まれている時と全く同じように動くのが分かるでしょう。
役に立つヒント
textarea内で CSS と HTML をインデントしないでください。代わりに行の先頭にぶつけてください。 レンダリングすると見栄えがよくなります。- 必要な画像がある場合は、例と共にディレクトリーに入れます。または、すでにそこにあるものを使用することを歓迎します。
- インラインスタイルで高さを変更して、
textareaの高さを調整できます。
3. ダウンロード版の作成
サンプルにはすべてのライブサンプルコードが記載されているため、読者の皆様には、不要なアイテムを省略し、そのサンプルに必要なコードのみを提供したいと考えています。ライブサンプルのコピーを生成し、その名前に --download を追加してください。例えば、center.html のダウンロード版は center--download.html となります。このファイルは、最初のサンプルと似たようなものになります。これは、単一の HTML ページとして構成された、パターンの基本バージョンとなるはずです。
組み込みのスタイルシートにある本体用のCSSルールを含めることができると便利です。ガイドとして cookbook-template--download.html をご覧ください。これらのルールは、作成の出発点として提供されています。
4. 例をプルリクエストをする
CSS Examples リポジトリーでプルリクエスト (Pull Request, PR) を作成してください。これにより、ページを作成する前に、サンプルに必要な変更について役立つサポートを提供することができます。さらに、サンプルは公開されている必要があります。そのため、まずサンプルコードを作成し、その後で解説ガイドを作成するのが理にかなっています。プルリクエスト (PR) では、そのパターンと、何を示そうとしているのかを説明してください。プルリクエストを開くためのガイドラインをご参照ください。
5. ページを作成する
サンプルPRがマージされた後、Layout Cookbook ディレクトリー内に新しいページを作成するためのプルリクエストを開いてください。 料理帳ページのテンプレートをご利用ください。 テンプレートにはそれぞれの節の要件が記載されています。さらに詳しい情報が必要な場合は、他の料理帳の例を参照してください。
新しいレシピへのリンクを、メインの レイアウト料理帳 ページに追加することをお忘れなく。
質問がある場合や、ページの確認を依頼したい場合は、コミュニケーションチャネルのいずれかを通じてご連絡ください。