From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../breadcrumb_navigation/index.html | 56 +++++++++ files/ja/web/css/layout_cookbook/card/index.html | 86 ++++++++++++++ .../layout_cookbook/center_an_element/index.html | 59 +++++++++ .../css/layout_cookbook/column_layouts/index.html | 132 +++++++++++++++++++++ .../cookbook_template/index.html | 66 +++++++++++ .../layout_cookbook/contribute_a_recipe/index.html | 106 +++++++++++++++++ .../css/layout_cookbook/grid_wrapper/index.html | 90 ++++++++++++++ files/ja/web/css/layout_cookbook/index.html | 86 ++++++++++++++ .../list_group_with_badges/index.html | 60 ++++++++++ .../css/layout_cookbook/media_objects/index.html | 89 ++++++++++++++ .../web/css/layout_cookbook/pagination/index.html | 85 +++++++++++++ .../layout_cookbook/split_navigation/index.html | 55 +++++++++ .../css/layout_cookbook/sticky_footers/index.html | 77 ++++++++++++ 13 files changed, 1047 insertions(+) create mode 100644 files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/ja/web/css/layout_cookbook/card/index.html create mode 100644 files/ja/web/css/layout_cookbook/center_an_element/index.html create mode 100644 files/ja/web/css/layout_cookbook/column_layouts/index.html create mode 100644 files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html create mode 100644 files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html create mode 100644 files/ja/web/css/layout_cookbook/grid_wrapper/index.html create mode 100644 files/ja/web/css/layout_cookbook/index.html create mode 100644 files/ja/web/css/layout_cookbook/list_group_with_badges/index.html create mode 100644 files/ja/web/css/layout_cookbook/media_objects/index.html create mode 100644 files/ja/web/css/layout_cookbook/pagination/index.html create mode 100644 files/ja/web/css/layout_cookbook/split_navigation/index.html create mode 100644 files/ja/web/css/layout_cookbook/sticky_footers/index.html (limited to 'files/ja/web/css/layout_cookbook') diff --git a/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html new file mode 100644 index 0000000000..ac905fc918 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -0,0 +1,56 @@ +--- +title: パンくずナビゲーション +slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +tags: + - CSS + - Layout + - Navigation + - cookbook + - flexbox +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{CSSRef}}
+ +

パンくず（Breadcrumb）ナビゲーションは、来た道をたどって開始ページまで戻ることができるパンくずリストを提供することによって、ユーザーがウェブサイト内の自分の位置を理解するのに役立ちます。

+ +

リンクを区切り文字を付けてインラインで表示

+ +

要件

+ +

項目は通常、個々のページ間の階層を示すために、区切り文字を付けてインラインで表示されます。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このパターンは単純なフレックスレイアウトを使用してレイアウトされており、CSS の1行でナビゲーションがどのように行われるかを示しています。 区切り文字は CSS 生成コンテンツを使用して追加されます。 区切り文字は好きなものに変更することができます。

+ +

アクセシビリティへの懸念

+ +

aria-label 属性および aria-current 属性を使用して、このナビゲーションが何であるか、そして現在のページが構造のどこにあるのかをユーザーが理解できるようにしています。 詳細については関連リンクを参照してください。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

フレックスボックス

+ +

{{Compat("css.properties.flex")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/card/index.html b/files/ja/web/css/layout_cookbook/card/index.html new file mode 100644 index 0000000000..4c6d015537 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/card/index.html @@ -0,0 +1,86 @@ +--- +title: カード +slug: Web/CSS/Layout_cookbook/Card +tags: + - CSS + - CSS Grid + - card + - cookbook + - css layout +translation_of: Web/CSS/Layout_cookbook/Card +--- +

{{CSSRef}}

+ +

このパターンは、オプションのフッター付きの「カード」コンポーネントのリストです。

+ +

1行に3つのカードコンポーネント

+ +

要件

+ +

カードコンポーネントには、見出し、画像、コンテンツ、フッターなど、さまざまなコンテンツを含めることができます。

+ +

各カードは同じ高さでなければならず、フッターはカードの一番下に固定する必要があります。

+ +

カードのコレクションに追加すると、カードは2次元に並ぶ必要があります。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このカードは、1次元レイアウトであるにもかかわらず CSS グリッドレイアウトを使用してレイアウトされています。 これは、グリッドトラックに対してコンテンツのサイズ変更の使用が可能になるためです。 単一列グリッドを設定するときは、次のようにします。

+ +
.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}
+ +

見出しトラックは {{cssxref("max-content")}} に設定されているため、伸縮は行われません。 画像は 200 ピクセルの高さのトラック内に収めることにしました。 それから、その次のトラック（コンテンツが存在する場所）を 1fr に設定します。 これは、残りのスペースを占有することを意味します。

+ +

暗黙的にグリッドに作成された行はデフォルトで自動サイズ変更されるため、トラックにフッターがある場合は自動サイズ変更されます。 したがって、これは追加されたコンテンツにフィットします。

+ +
+

注: 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 グリッドレベル 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。

+
+ +

便利な代替方法

+ +

フレックスボックスを使ってカードをレイアウトすることもでき、その場合は、コンテンツ領域を大きくし、他の項目は大きくしないようにする必要があります。 これはカードをレイアウトするための合理的な方法ですが、私は、項目に規則を追加する必要があるのではなく、コンテナからトラックを制御できることをやや好みます。

+ +

全体的なレイアウトのためにフレックスボックスを使うことができますが、これは最終的なフレックス行の上で伸縮するカードをもたらすでしょう。 あるいは、CSS 段組みを使用することもできます — これにより、カードが段の上にレイアウトされることになりますが、これは問題になる場合もあれば、そうでない場合もあります。

+ +

これらの各レイアウト方法のデモについては、欄のレシピを参照してください。

+ +

アクセシビリティへの懸念

+ +

カードの内容によっては、アクセシビリティを高めるためにできること、あるいはすべきことがあるかもしれません。 これらの問題のとても詳細な説明については、Heydon Pickering による包括的なコンポーネント: カード（英語）を参照してください。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

 

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/center_an_element/index.html b/files/ja/web/css/layout_cookbook/center_an_element/index.html new file mode 100644 index 0000000000..c813da5cbe --- /dev/null +++ b/files/ja/web/css/layout_cookbook/center_an_element/index.html @@ -0,0 +1,59 @@ +--- +title: 要素を中央に配置 +slug: Web/CSS/Layout_cookbook/Center_an_element +tags: + - CSS + - Layout + - Recipe + - box alignment + - centering + - cookbook + - flexbox +translation_of: Web/CSS/Layout_cookbook/Center_an_element +--- +
{{CSSRef}}
+ +

このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方を中央に配置するのは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。

+ +

大きなボックスの中央に配置された要素

+ +

要件

+ +

項目を別のボックスの縦横の中央に配置する。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

あるボックスを別のボックスの中央に配置するには、コンテナをフレックスコンテナにします。 次に、ブロック軸（交差軸）の中央に配置するには {{cssxref("align-items")}} を center に設定し、インライン軸（主軸）の中央に配置するには {{cssxref("justify-content")}} を center に設定します。

+ +

ここで使用されているボックス配置プロパティはブロックレイアウトにも適用されるように指定されているため、将来的には親をフレックスコンテナに変える必要なしに要素を中央に配置できるようになるかもしれません。 ただし、現在ブロックレイアウトでのボックス配置プロパティのサポートは制限されているため、現在フレックスボックスを使用して中央に配置するのがこれを達成するための最も堅牢な方法です。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

MDN にある資料

+ + diff --git a/files/ja/web/css/layout_cookbook/column_layouts/index.html b/files/ja/web/css/layout_cookbook/column_layouts/index.html new file mode 100644 index 0000000000..868f6d0610 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/column_layouts/index.html @@ -0,0 +1,132 @@ +--- +title: 欄レイアウト +slug: Web/CSS/Layout_cookbook/Column_layouts +tags: + - CSS + - Layout + - Multi-col + - columns + - cookbook + - flexbox + - grid +translation_of: Web/CSS/Layout_cookbook/Column_layouts +--- +
{{CSSRef}}
+ +

多くの場合、いくつかの欄を含むレイアウトを作成する必要があります。 CSS にはこれを行うためのいくつかの方法があります。 グリッド、フレックスボックス、段組みのレイアウトのどれを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらのオプションについて説明します。

+ +

コンテナ内に2つの欄を持つ3種類のレイアウトスタイル。

+ +

必要条件

+ +

欄（columns）で達成したいと思うかもしれないデザインパターンがいくつかあります。

+ + + +

レシピ

+ +

要件を満たすためには、さまざまなレイアウト方法を選択する必要があります。

+ +

コンテンツの連続したスレッド — 段組みレイアウト

+ +

段組みレイアウト（multi-column layout、multicol）を使用して段を作成した場合、テキストは各段を順番に埋める連続したストリームのままです。 段はすべて同じサイズである必要があり、個々の段または個々の段のコンテンツをターゲットにすることはできません。

+ +

{{cssxref("column-gap")}} プロパティを使用して段間のギャップを制御したり、{{cssxref("column-rule")}} を使用して段間に線を追加したりできます。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

次の場合に段組みを使用してください。

+ + + +

同じ高さの単一行の項目 — フレックスボックス

+ +

フレックスボックス（flexbox）は、{{cssxref("flex-direction")}} を row に設定することでコンテンツを列に分割するために使用できますが、フレックスボックスはフレックスコンテナ内の要素をターゲットにし、それぞれの直接の子を新しい列に配置します。 これは段組みで見たものとは異なる振る舞いです。

+ +

フレックス項目間に規則を追加する方法は現在ありません。 また、{{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティに対するブラウザーのサポートは制限されています。 したがって、項目間にギャップを作成するには、マージンを使用します。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

フレックスボックスを使用して、コンテナの {{cssxref("flex-wrap")}} プロパティを wrap に設定することで、フレックス項目が新しい行に折り返されるレイアウトを作成することもできます。 これらの新しいフレックスラインは、そのラインに沿ってのみスペースを配分します — 以下の例に示すように、新しいラインの項目は上のラインの項目と整列しません。 これがフレックスボックスが一次元として記述されている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、同時に両方ではありません。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

次の場合にフレックスボックスを使用してください。

+ + + +

項目を行と列に並べる — グリッドレイアウト

+ +

欲しいものが項目が行と列に並ぶレイアウトであるならば、CSS グリッドレイアウトを選ぶべきです。 グリッドレイアウトは、フレックスボックスがフレックスコンテナの直接の子に作用するのと同様の方法で、グリッドコンテナの直接の子に作用しますが、CSS グリッドでは、項目を行と列に並べることができます — これは2次元として記述されています。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

次の場合にグリッドを使用してください。

+ + + +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

column-width

+ +

{{Compat("css.properties.column-width")}}

+ +

column-rule

+ +

{{Compat("css.properties.column-rule")}}

+ +

flex

+ +

{{Compat("css.properties.flex")}}

+ +

flex-wrap

+ +

{{Compat("css.properties.flex-wrap")}}

+ +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

MDN にある資料

+ + diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html new file mode 100644 index 0000000000..e420bcc7b3 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html @@ -0,0 +1,66 @@ +--- +title: Cookbook template +slug: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +tags: + - CSS + - Contribute + - Layout + - Template + - cookbook + - recipes +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +--- +

{{CSSRef}}

+ +
注: これは CSS 料理帳のページのテンプレートページです。 新しい料理帳のページを作成するときに、これを生のテンプレートとして使用してください。
+イタリック体のコメントは、テンプレートの一部の使い方に関する情報です。
+ +

このレシピが解決する問題の説明または、あなたが実証しているパターンの説明。

+ +

Requirements

+ +

このパターンには何を含める必要がありますか、それともどのような問題を解決する必要がありますか？ それをここにリストします。

+ +

Recipe

+ +

下の例のパスを変更して、マージされた例を指すようにします。 最後のパラメータは実際のサンプルの高さで、必要に応じて変更できます。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +

マージされたダウンロードバージョンを指すようにリンクを変更します。

+ +

Download the example

+ +

Choices made

+ +

パターンを作成したときの決定を説明してください。 なぜあなたは特定の方法を選んだのですか？ あなたがここに追加の例を追加したい場合 — 例えば代替のあるバージョン — ぜひ追加してください。 パターンは非常に単純なものからより複雑なものまで多岐にわたるので、このセクションは意図的に緩めています。

+ +

Useful fallbacks or alternative methods

+ +

レシピを構築するための有用な代替方法、またはサポートしていないブラウザーをサポートする必要がある場合に使用する代替レシピがある場合は、それらをここの別のセクションに含めてください。

+ +

Accessibility concerns

+ +

アクセシビリティに関して注意すべき点がある場合に、これを含めます。 あなたのパターンに関係がなければ、これは省略することができます。

+ +

Browser compatibility

+ +

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

+ + + +

以下の例で align-items を含めたように、使用した重要なプロパティの互換データ（compat data）を含めます。

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

See also

+ + diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html new file mode 100644 index 0000000000..ac347af90a --- /dev/null +++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html @@ -0,0 +1,106 @@ +--- +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}}
+ +

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

+ +

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

+ +

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

+ +

レシピを公開する手順

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
    +
  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. +
+ +

1. パターンを作ります

+ +

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

+ +

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

+ +

2. 実例を作成する

+ +

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

+ +

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. +
  2. 必要な画像がある場合は、例と共にディレクトリにポップします。 または、すでにそこにあるものを使用することを歓迎します。
    3. +
  3. インラインスタイルで高さを変更して、textarea の高さを調整できます。
    4. +
+ +

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

+ +

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

+ +

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

+ +

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

+ +

5. ページを作成する

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/grid_wrapper/index.html b/files/ja/web/css/layout_cookbook/grid_wrapper/index.html new file mode 100644 index 0000000000..4d49e35c4d --- /dev/null +++ b/files/ja/web/css/layout_cookbook/grid_wrapper/index.html @@ -0,0 +1,90 @@ +--- +title: グリッドラッパー +slug: Web/CSS/Layout_cookbook/Grid_wrapper +tags: + - CSS + - Guide + - Layout + - cookbook + - recipes +translation_of: Web/CSS/Layout_cookbook/Grid_wrapper +--- +
{{CSSRef}}
+ +

このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。

+ +

要件

+ +

グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このレシピでは、CSS グリッドの {{cssxref("minmax")}} 関数を使用して、{{cssxref("grid-template-columns")}} プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の（グリッドレイアウトに使う6つの）列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位（ピクセル、em、rem）を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。

+ +

外側の2つの列の最大サイズは 1fr です。 つまり、グリッドコンテナ内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。

+ +

便利な代替方法

+ +

このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の auto の {{cssxref("margin")}} とともに max-width を設定すると便利です。

+ +
.grid {
+  max-width: 1200px;
+  margin: 0 auto; // コンテナを水平方向に中央揃え
+}
+
+/* ブラウザーがグリッドをサポートしている場合は、max-width と margin を取り除く */
+@supports (display: grid) {
+  .grid {
+    display: grid;
+    /* 他のグリッドのコードはここへ */
+    max-width: none;
+    margin: 0;
+  }
+}
+ +

full-width 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます（Una Kravets の好意による）。

+ +
.item {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+ +

これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。

+ +

アクセシビリティへの懸念

+ +

グリッドを使用すると（理由の範囲内で）項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です（詳細については、CSS グリッドのレイアウトとアクセシビリティを参照）。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

 

+ +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

関連情報

+ + + +

 

diff --git a/files/ja/web/css/layout_cookbook/index.html b/files/ja/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..9b98903a2b --- /dev/null +++ b/files/ja/web/css/layout_cookbook/index.html @@ -0,0 +1,86 @@ +--- +title: CSS レイアウト料理帳 +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - cookbook + - レイアウト + - レシピ + - 料理帳 +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

CSS レイアウト料理帳は、よくあるレイアウトパターンや、あなた自身のサイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。 プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。

+ +
+

メモ: CSS のレイアウトが初めてならば、最初に CSS レイアウト学習モジュールを見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。

+
+ +

レシピ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
レシピ説明レイアウト方法
メディアオブジェクト一方が画像でもう一方が説明テキストである二列のボックス。 例えば Facebook の投稿やツイート。CSS グリッド, {{cssxref("float")}} による代替, {{cssxref("fit-content")}} による寸法制御
欄段組みレイアウト、フレックスボックス、グリッドの選択CSS グリッド, 段組み, フレックスボックス
要素を中央に配置アイテムを水平および垂直方向に中央に配置する方法フレックスボックス, ボックス配置
張り付くフッターコンテンツが短い場合にコンテナーまたはビューポートの最下部に配置されるフッターの作成。CSS グリッド, フレックスボックス
ナビゲーションの分割一部のリンクが他と視覚的に分割されているナビゲーションパターン。フレックスボックス, {{cssxref("margin")}}
パンくずナビゲーション来訪者がページ階層の上の階層に戻ることができるリンクのリストの作成。フレックスボックス
バッジ付きリストグループカウントを表示するバッジの付いたアイテムのリスト。フレックスボックス, ボックス配置
ページ付けコンテンツのページへのリンク (検索結果など)。フレックスボックス, ボックス配置
カードカードのグリッドで表示されるカードコンポーネント。CSS グリッド
グリッドラッパーグリッドコンテンツを中央のラッパー内に配置するためのもので、はみ出すこともできます。CSS グリッド
+ +

レシピにご協力を

+ +

MDN 全体として、上記にあるものと同じ形式のレシピを提供していただけると助かります。 例を書くテンプレートやガイドラインはこちらのページを見てください。

diff --git a/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html new file mode 100644 index 0000000000..f822596444 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html @@ -0,0 +1,60 @@ +--- +title: バッジ付きリストグループ +slug: Web/CSS/Layout_cookbook/List_group_with_badges +tags: + - CSS + - Layout + - box alignment + - cookbook + - flexbox + - lists +translation_of: Web/CSS/Layout_cookbook/List_group_with_badges +--- +

{{CSSRef}}

+ +

このレシピでは、カウントを示すバッジ付きのリストグループのパターンを作成します。

+ +

テキストの右側に表示されるカウントを示すバッジ付きの項目のリスト。

+ +

要件

+ +

項目のコンテンツ量に関係なく、リスト項目の右側にバッジを並べて表示する必要があります。 1行のコンテンツでも、複数行のコンテンツでも、バッジは常に垂直方向の中央に配置する必要があります。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

フレックスボックスは、この特定のパターンを簡単にし、またレイアウトの変更を容易にします。

+ +

テキストとバッジが正しく並ぶようにするために、{{cssxref("justify-content")}} プロパティに space-between の値を使用します。 これにより、項目間に余分なスペースが入ります。 実際の例では、このプロパティを削除すると、テキストが1行より短い項目のバッジがテキストの末尾に移動します。

+ +

コンテンツを垂直方向に揃えるには、{{cssxref("align-items")}} プロパティを使用してテキストとバッジを交差軸上で揃えます。 代わりに、バッジをコンテンツの上部に揃える場合は、これを align-items: flex-start に変更します。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/media_objects/index.html b/files/ja/web/css/layout_cookbook/media_objects/index.html new file mode 100644 index 0000000000..3fbb3dc75d --- /dev/null +++ b/files/ja/web/css/layout_cookbook/media_objects/index.html @@ -0,0 +1,89 @@ +--- +title: 'レシピ: メディアオブジェクト' +slug: Web/CSS/Layout_cookbook/Media_objects +tags: + - CSS + - Layout + - Media object + - Recipe + - cookbook + - fit-content + - float + - grid +translation_of: Web/CSS/Layout_cookbook/Media_objects +--- +
{{CSSRef}}
+ +

メディアオブジェクトは、ウェブ上のいたるところで見られるパターンです。 Nicole Sullivan によって命名され、それは一方の側に画像を、そして他方の側に説明的なテキストを有する Facebook の投稿やツイートのような2列のボックスを指します。

+ +

+ +

必要条件

+ +

メディアオブジェクトのパターンには、次の特性の一部または全部が必要です。

+ + + +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

必要に応じて2次元でレイアウトを制御できるため、メディアオブジェクトにグリッドレイアウトを使用することを選択しました。 つまり、フッターがあり、その上に短いコンテンツがある場合、そのフッターはそのメディアオブジェクトの下部にまで押し下げられます。

+ +

グリッドレイアウトを使用するもう1つの理由は、画像のトラックのサイズ変更に {{cssxref("fit-content")}} を使用できるようにするためです。 最大サイズが 200 ピクセルの fit-content を使用すると、アイコンのような小さい画像がある場合、トラックはその画像のサイズ、つまり max-content のサイズと同じサイズになります。 画像が大きい場合、トラックは 200 ピクセルで拡大しなくなり、画像には 100% の {{cssxref("max-width")}} が適用されるため、列の内側に収まるように縮小されます。

+ +

レイアウトを実現するために {{cssxref("grid-template-areas")}} を使用することで、CSS でこのパターンを見ることができます。 max-width が 500 ピクセルになったら、グリッドを定義します。 そのため、より小さいデバイスではメディアオブジェクトが積み重ねられます。

+ +

パターンのオプションはそれを反転して画像を反対側に切り替えることです — これはレイアウトを反映させる反転グリッドテンプレートを定義する media-flip クラスを追加することによって行われます。

+ +

あるメディアオブジェクトを別のメディアオブジェクトの中にネストするときは、通常のレイアウトでは2番目のトラックに、反転したときは最初のトラックに配置する必要があります。

+ +

代替方法

+ +

サポートしたいブラウザーに応じて、このパターンにはいくつかの代替方法があります。 良いキャッチオールは、画像を左に浮かべること、そしてそれがフロートを含むことを確実にするためにボックスに clearfix ハックを追加することです。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}

+ +
+

この例をダウンロードする

+
+ +

浮動要素がグリッド項目になると、そのフロートは適用されなくなるため、フロートを除去するために特別なことをする必要はありません。

+ +

する必要があるのは、項目に適用されているすべてのマージンと、グリッドのコンテキストで必要としていないすべての幅を取り除くことです（グリッドでそれを制御するための {{cssxref("gap")}} プロパティがあり、トラックがサイズを制御します）。

+ +

MDN の関連資料

+ + + +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用しているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ +

このページの互換性テーブルは構造化データから生成されます。 データに貢献したい場合は、https://github.com/mdn/browser-compat-data をチェックして、プルリクエストを送ってください。

+ +

grid-template-areas

+ +

{{Compat("css.properties.grid-template-areas")}}

+ +

float

+ +

{{Compat("css.properties.float")}}

diff --git a/files/ja/web/css/layout_cookbook/pagination/index.html b/files/ja/web/css/layout_cookbook/pagination/index.html new file mode 100644 index 0000000000..60821375f6 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/pagination/index.html @@ -0,0 +1,85 @@ +--- +title: ページ付け +slug: Web/CSS/Layout_cookbook/Pagination +tags: + - CSS + - Layout + - cookbook + - flexbox + - pagination +translation_of: Web/CSS/Layout_cookbook/Pagination +--- +

{{CSSRef}}

+ +

この料理帳のパターンは、ページ付け（pagination）を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。

+ +

ページ付きリスト内のページのセットへのリンク

+ +

要件

+ +

ページ付けのパターンは通常、項目を1行に表示します。 スクリーンリーダーを使用している人がページ付けであることを理解できるようにするために、項目を {{htmlelement("nav")}} 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に1行として表示します。

+ +

通常、ページ付けのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このパターンは、フレックスボックスを使用してレイアウトされています — 一方のフレックスコンテナは別のフレックスコンテナの中にネストされています。 {{htmlelement("nav")}} 要素は、{{cssxref("justify-content")}} プロパティを使用してリストを中央に配置できるように、フレックスコンテナとして指定されています。

+ +

リスト自体も、項目を行としてレイアウトするためのフレックスコンテナになります。 項目を配置するために、フレックス項目には {{cssxref("margin")}} を使用します。

+ +

代替方法

+ +

{{cssxref("column-gap")}} プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。

+ +
.pagination {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+
+ +

アクセシビリティへの懸念

+ +

スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、<nav> 要素に aria-label="pagination" を追加しました。

+ +

スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に aria-hidden 属性を設定しました。

+ +

このドキュメントの最後にある「関連情報」セクションには、関連するアクセシビリティのトピックへのリンクがあります。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

フレックスレイアウトの column-gap

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/split_navigation/index.html b/files/ja/web/css/layout_cookbook/split_navigation/index.html new file mode 100644 index 0000000000..beb0d732d9 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/split_navigation/index.html @@ -0,0 +1,55 @@ +--- +title: ナビゲーションの分割 +slug: Web/CSS/Layout_cookbook/Split_Navigation +tags: + - CSS + - Layout + - Navigation + - Recipe + - cookbook + - flexbox +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

1つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。

+ +

2つのグループに分けられた項目。

+ +

要件

+ +

一般的なナビゲーションのパターンは、ある要素を他の要素から押しのけることです。 2セットの項目を2つの別々のフレックスコンテナにする必要なく、フレックスボックスを使用してこれを実現できます。

+ +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

+ +
+

この例をダウンロードする

+
+ +

行った選択

+ +

このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。

+ +

自動マージンは、適用される方向に利用可能なすべてのスペースを吸収します。 これは、自動マージンを使ってブロックを中央に配置する方法です — ブロックの両側にスペースをすべて取ろうとすると、ブロックが中央に押し込まれます。

+ +

この場合、左の自動マージンは利用可能なスペースをすべて占め、項目を右に押します。 リスト内の任意の項目にクラス push を適用できます。

+ +

ブラウザー実装状況

+ +

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+ + + +

フレックスボックス

+ +

{{Compat("css.properties.flex")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_cookbook/sticky_footers/index.html b/files/ja/web/css/layout_cookbook/sticky_footers/index.html new file mode 100644 index 0000000000..07ce9b5e34 --- /dev/null +++ b/files/ja/web/css/layout_cookbook/sticky_footers/index.html @@ -0,0 +1,77 @@ +--- +title: 固定フッター +slug: Web/CSS/Layout_cookbook/Sticky_footers +tags: + - CSS + - Guide + - Layout + - cookbook + - flexbox + - grid + - sticky footer +translation_of: Web/CSS/Layout_cookbook/Sticky_footers +--- +
{{CSSRef}}
+ +

固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。

+ +

ボックスの底に押し込まれた張り付くフッター

+ +

要件

+ +

固定フッターのパターンは、次の要件を満たす必要があります。

+ + + +

レシピ

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

+ +
+

この例をダウンロードする

+
+ +
+

注: この例と以下の例では、ライブ例がうまくいくように、min-height: 100% に設定された wrapper を使用しています。 また、{{htmlelement("body")}} で {{cssxref("min-height")}} を 100vh に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。

+
+ +

行った選択

+ +

上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 .wrapper の最小の高さは 100% です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。

+ +

グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは 1fr トラックに、フッターは最後の自動サイズ調整トラックに入ります。1fr トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。

+ +

代替方法

+ +

グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

+ +

フレックスボックスの例は同じように始まりますが、.wrapper では display: grid ではなく display: flex を使用し、flex-direction を column に設定します。次に、メインコンテンツを flex-grow: 1 に設定し、他の2つの要素を flex-shrink: 0 に設定します — これにより、コンテンツがメイン領域いっぱいになったときにそれらが小さく縮小されるのを防ぎます。

+ +

ブラウザー実装状況

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

flex-direction

+ +

{{Compat("css.properties.flex-direction")}}

+ +

flex-grow

+ +

{{Compat("css.properties.flex-grow")}}

+ +

flex-shrink

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

MDN にある資料

+ + -- cgit v1.2.3-54-g00ecf