From 46fa6021426cb405f6d25e68d13a2bd60c2888ac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 23 Dec 2021 23:05:47 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/layout_cookbook/index.md | 91 +++++++------------------------ 1 file changed, 20 insertions(+), 71 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/layout_cookbook/index.md b/files/ja/web/css/layout_cookbook/index.md index 9b98903a2b..fc63b268eb 100644 --- a/files/ja/web/css/layout_cookbook/index.md +++ b/files/ja/web/css/layout_cookbook/index.md @@ -3,84 +3,33 @@ title: CSS レイアウト料理帳 slug: Web/CSS/Layout_cookbook tags: - CSS - - cookbook + - ガイド - レイアウト - - レシピ - 料理帳 + - レシピ translation_of: Web/CSS/Layout_cookbook --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

-
+> **Note:** CSS のレイアウトが初めてならば、最初に [CSS レイアウト学習モジュール](/ja/docs/Learn/CSS/CSS_layout)を見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。 -

レシピ

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

レシピにご協力を

+## レシピにご協力を -

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

+MDN 全体として、上記にあるものと同じ形式のレシピを提供していただけると助かります。 例を書くテンプレートやガイドラインは[こちらのページを見て](/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe)ください。 -- cgit v1.2.3-54-g00ecf