From ae47980792ce51b8d8960ec240a5c2117b5e776b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 26 Dec 2021 00:35:31 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout_cookbook/contribute_a_recipe/index.md | 117 +++++++++------------ 1 file changed, 51 insertions(+), 66 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.md index ac347af90a..e6eb2be7f5 100644 --- a/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.md +++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.md @@ -3,104 +3,89 @@ title: レシピを投稿する slug: Web/CSS/Layout_cookbook/Contribute_a_recipe tags: - CSS - - Contribute - - Layout - - Templates - - cookbook - - recipes + - 協力 + - ガイド + - レイアウト + - テンプレート + - 料理帳 + - レシピ translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe --- -
{{CSSRef}}
+{{CSSRef}} -

レイアウト料理帳の一例を提供したい場合は、このページでは、あなたの例を公開するための手順について説明します。

+レイアウト料理帳の例を提供したい場合、このページでは、例を公開するための手順について説明します。 -

何が良いレシピになりますか？

+## 何が良いレシピになるのか -

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

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

レシピを公開する手順

+## レシピを公開する手順 -

英語で考えるんだ！ — en-US のページを作ります。

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

GitHub のアカウントで MDN のアカウントを作ります。

+1. ライブサンプル（live example）は、[CSS Examples GitHub リポジトリー](https://github.com/mdn/css-examples)に保存します。 +2. その例のダウンロード可能なバージョンも、CSS Examples リポジトリーに保存します。 +3. [CSS レイアウト料理帳](/ja/docs/Web/CSS/Layout_cookbook)内のページの詳細は次のとおりです。 -

MDN の編集機能はもちろん GitHub と Git の扱いにも慣れている必要があります。

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

レシピの名前とスラグ、例に使うファイル名を以下を読みながら決めます。

+### 1. パターンの作成 -

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

+例をレシピに変える前に、まずパターンを単純な HTML ページとして作成します。 何を示そうとしているのかを考え、できるだけ単純にします。 BEM のような特殊な CSS 規約の使用は避けてください。誰もが知っているわけではありませんし、必要以上に複雑に見える可能性があります。 -
    -
  1. 実例（live example）は、CSS Examples GitHub リポジトリに保存します。
    2. -
  2. その例のダウンロード可能なバージョンも、CSS Examples リポジトリに保存します。
    3. -
  3. CSS レイアウト料理帳の中のページで、詳細は次のとおりです。 -
      -
    1.  要件（Requirements）
      2. -
    2. レシピ（Recipe）
      3. -
    3. 行った選択（Choices made）
      4. -
    4. 便利な代替方法（Useful fallbacks or alternative methods）
      5. -
    5. アクセシビリティへの懸念（Accessibility concerns）
      6. -
    6. ブラウザー実装状況（Browser compatibility）
      7. -
    7. 関連情報（See also）
      8. -
    -
    4. -
+HTML と CSS が有効であることを確認し、複数のブラウザーでテストしてください。すべてが対応しているわけではない CSS プロパティを使用していても、それは問題ありません。ページを作成するときにブラウザーの対応情報を含めることができます。 場合によっては、代替の対応を含む、例の 2 番目のバージョンを作成すると便利な場合があります。 -

1. パターンを作ります

+### 2. ライブサンプルの作成 -

あなたの例をレシピに変える前に、まずパターンを単純な HTML ページとして作成します。 何を示そうとしているのかを考え、できるだけ単純にします。 誰もがこれらに精通しているわけではないので、（BEM など）特定の CSS の規約を使用しないでください。 必要以上に複雑に見えることがあります。

+料理帳のページや MDN の他の場所で見ることができるライブサンプルは、訪問者が必要なすべてのコードに圧倒されることなく、コードで遊び、関連する部分を変更することを可能にします。レシピは 1 つ以上の例として示します。 -

HTML と CSS が有効であることを確認し、複数のブラウザーでテストしてください。 どこでもサポートされていない CSS プロパティを使用していても問題ありません！ ページを作成するときにブラウザーのサポート情報を含めることができます。 場合によっては、代替のサポートを含む、例の2番目のバージョンを作成すると便利な場合があります。

+[CSS Examples リポジトリー](https://github.com/mdn/css-examples)をフォークして（右上の Fork ボタンを押すと自分のアカウントにコピーが作られます）、`css-cookbook` フォルダーを調べてください。 出発点としてコピーできる [cookbook-template.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html) ファイルがあります。 これを `css-cookbook` ディレクトリーにパターンにとって意味のある名前で保存してください。 テンプレート (template) は、さまざまなパーツを適切な場所に追加するのに役立つようにコメントされています。 -

2. 実例を作成する

+このための重要な部分は次のとおりです。 -

料理帳のページや MDN の他の場所で見ることができる実例は、訪問者が必要なすべてのコードに圧倒されることなくコードで遊んで関連部分を変更することを可能にします。 あなたのレシピは一つ以上の例として示されます。

+エディターパネルのスタイル用のスタイルシート、基本的な body のスタイル、およびエディター機能用の JavaScript ファイルがあります。 これらのファイルはそのままにしておきます。 -

CSS Examples リポジトリをフォークして（右上の Fork ボタンを押すと自分のアカウントにコピーが作られます）、css-cookbook フォルダを調べてください。 出発点としてコピーできる cookbook-template.html ファイルがあります。 これを css-cookbook ディレクトリにあなたのパターンにとって意味のある名前で保存してください。 テンプレート（template）は、さまざまなパーツを適切な場所に追加するのに役立つようにコメントされています。

+head の中には 2 つのスタイルのブロックがあります。 1 つ目は、ページの訪問者がこの例で遊ぶために変更する必要がないものです。 2 つ目は、ライブサンプルで遊びたい項目のどれかです。 通常、 1 つ目のブロックにライブサンプルの CSS をすべて追加してから、 2 番目のブロックに移動する必要があるルールのセットを選択します。 2 番目のブロックのルールは、パターンの基本となるルール、おそらくユーザーが CSS の値を変更してパターンの更新を確認できるようなルールにする必要があります。 -

これの重要なパーツは次のとおりです。

+コンポーネント用の HTML を 2 回追加する必要があります。 最初に `preview` クラスの `section` の中に、次に `playable-html` クラスの `textarea` の中にです。 -

エディタパネルのスタイル用のスタイルシート、基本的な body のスタイル、およびエディタ機能用の JavaScript ファイルがあります。 これらのファイルはそのままにしておきます。

+head の中の 2 番目のブロックからの `editable` クラスの CSS も、`playable-css` クラスの `textarea` にコピーする必要があります。 -

head の中には2つのスタイルのブロックがあります。 1つ目は、ページへの訪問者がこの例で遊ぶために変更する必要がないものです。 2つ目は、実例で遊びたい項目のどれかです。 通常、1つ目のブロックに実例の CSS をすべて追加してから、2番目のブロックに移動する必要がある規則のセットを選択します。 2番目のブロックの規則は、パターンの基本となる規則、おそらくユーザーが CSS の値を変更してパターンの更新を確認できるような規則にする必要があります。

+単純な例は [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html) で、これは[要素を中央に配置](/ja/docs/Web/CSS/Layout_cookbook/Center_an_element)のページに埋め込まれています。これを使用して、さまざまな細部を正しく追加する方法を確認できます。 -

コンポーネント用の HTML を2回追加する必要があります。 最初に preview クラスの section の中に、次に playable-html クラスの textarea の中にです。

+リポジトリーをフォークした場合、私たちの CSS と JavaScript ファイルを例と一緒に持っているのであれば、ブラウザーでライブサンプルを開くと、ページに含まれている時と全く同じように動くのが分かるでしょう。 -

head の中の2番目のブロックからの editable クラスの CSS も、playable-css クラスの textarea にコピーする必要があります。

+#### 役に立つヒント -

単純な例は center.html で、これは要素を中央に配置のページに埋め込まれています。 これを使用して、さまざまな細部を正しく追加する方法を確認できます。

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

リポジトリをフォークしたので、私たちの CSS と JavaScript ファイルをあなたの例と一緒に持っているなら、ブラウザーであなたの実例を開くと、ページに含まれている時と全く同じように動くのを見るでしょう。

+### 3. ダウンロード版の作成 -

役に立つヒント

+ライブサンプルにはすべてのライブサンプルコードが含まれているので、そのすべてを含まない簡単な例を訪問者に提供したいと思います。 ライブサンプルを --download を付けてコピーしてください。 例えば、`center.html` には `center--download.html` という名前のダウンロードバージョンがあります。 このファイルはあなたの最初の例と似ています。 これは単一の HTML ページとしてのパターンの基本バージョンです。 含まれたスタイルシートにある body の CSS ルールを含めると便利かもしれません。 [cookbook-template--download.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html) を見てみると、これらが出発点として含まれています。 -
    -
  1. textarea 内で CSS と HTML をインデントしないでください。 代わりにラインの先頭にぶつけてください。 レンダリングすると見栄えがよくなります。
    2. -
  2. 必要な画像がある場合は、例と共にディレクトリにポップします。 または、すでにそこにあるものを使用することを歓迎します。
    3. -
  3. インラインスタイルで高さを変更して、textarea の高さを調整できます。
    4. -
+### 4. 例をプルリクエストをする -

3. ダウンロード版を作成する

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

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

+### 5. ページを作成する -

4. あなたの例でプルリクエストをする

+例がマージされたら、ページを作成することができます。 そのためには[ページ作成権限](/ja/docs/MDN/Contribute/Howto/Create_and_edit_pages#getting_page-creation_permissions)付き MDN アカウントが必要です。その後、そのページを CSS 料理帳のページのサブページとして作成できます。[ここに料理帳のページ用のテンプレートがあります](/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template)。 -

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

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

5. ページを作成する

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

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

+質問をする必要がある場合、または誰かにあなたのページを見てもらいたい場合は、[Discourse の MDN フォーラム](https://discourse.mozilla.org/c/mdn)を利用するか、[Matrix でチャット](/ja/docs/MDN/Community/Conversations#synchronous_chat)してください。 -

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

+## 関連情報 -

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

- -

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

- -

関連情報

- - +- [料理帳ページのテンプレート](/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template) +- [CSS Examples リポジトリー](https://github.com/mdn/css-examples) -- cgit v1.2.3-54-g00ecf