From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/layout_cookbook/index.html | 86 +++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 files/ja/web/css/layout_cookbook/index.html (limited to 'files/ja/web/css/layout_cookbook/index.html') 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 全体として、上記にあるものと同じ形式のレシピを提供していただけると助かります。 例を書くテンプレートやガイドラインはこちらのページを見てください。

-- cgit v1.2.3-54-g00ecf