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

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

レシピ

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

レシピにご協力を

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

ドキュメントのタグと貢献者

このページの貢献者: Wind1808, mdnwebdocs-bot, mfuji09
最終更新者: Wind1808,