レシピを投稿する

あらゆる便利なウェブデザインのパターンの最も単純なバージョンです。 含まれている CSS の各行は、パターンを示すのを助けるためにそこにあるべきですので、例をきれいに見せるためだけのものは省略してください。アイデアは、誰かがパターンを手に取り、自分のスタイルでサイトでそれを使用できるということです。

レシピは以下で構成されています。

1. ライブサンプル（live example）は、CSS Examples GitHub リポジトリーに保存します。

2. その例のダウンロード可能なバージョンも、CSS Examples リポジトリーに保存します。

3. CSS レイアウト料理帳内のページの詳細は次のとおりです。

   1. 要件 (Requirements)
   2. レシピ (Recipe)
   3. 行った選択 (Choices made)
   4. 有用な代替策または代替方法 (Useful fallbacks or alternative methods)
   5. アクセシビリティの考慮 (Accessibility concerns)
   6. ブラウザーの互換性 (Browser compatibility)
   7. 関連資料 (Additional resources)

例をレシピに変える前に、まずパターンを単純な HTML ページとして作成します。 何を示そうとしているのかを考え、できるだけ単純にします。 BEM のような特殊な CSS 規約の使用は避けてください。誰もが知っているわけではありませんし、必要以上に複雑に見える可能性があります。

HTML と 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 ファイルを例と一緒に持っているのであれば、ブラウザーでライブサンプルを開くと、ページに含まれている時と全く同じように動くのが分かるでしょう。

役に立つヒント

1. textarea 内で CSS と HTML をインデントしないでください。代わりに行の先頭にぶつけてください。 レンダリングすると見栄えがよくなります。
2. 必要な画像がある場合は、例と共にディレクトリーに入れます。または、すでにそこにあるものを使用することを歓迎します。
3. インラインスタイルで高さを変更して、textarea の高さを調整できます。

ライブサンプルにはすべてのライブサンプルコードが含まれているので、そのすべてを含まない簡単な例を訪問者に提供したいと思います。 ライブサンプルを --download を付けてコピーしてください。 例えば、center.html には center--download.html という名前のダウンロードバージョンがあります。 このファイルはあなたの最初の例と似ています。 これは単一の HTML ページとしてのパターンの基本バージョンです。 含まれたスタイルシートにある body の CSS ルールを含めると便利かもしれません。 cookbook-template--download.html を見てみると、これらが出発点として含まれています。

CSS Examples リポジトリーでプルリクエスト (Pull Request, PR) を作成してください。 このようにして、ページを作成する前に必要になる可能性のある例の変更を手助けすることができます。 さらに、この例は実際のものである必要があり、最初に作成するのが理にかなっています。 プルリクエストにパターンの説明とあなたが何を示しているかを含めてください。

例がマージされたら、ページを作成することができます。 そのためにはページ作成権限付き MDN アカウントが必要です。その後、そのページを CSS 料理帳のページのサブページとして作成できます。ここに料理帳のページ用のテンプレートがあります。

テンプレートは各セクションの一部になるべきものを説明し、より多くの助けを得るために他の料理帳の例を参照することができます。 これらのページのいずれかの編集ボタンをクリックすると、互換性データを埋め込むために使用されるマクロやライブサンプルなどが表示されます。

MDN Wiki の使用に関する一般的なガイダンスが必要な場合は、こちらのヘルプページを参照してください。

質問をする必要がある場合、または誰かにあなたのページを見てもらいたい場合は、Discourse の MDN フォーラムを利用するか、Matrix でチャットしてください。

• 料理帳ページのテンプレート
• CSS Examples リポジトリー