【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ

CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。

コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。

レスポンシブ対応のレイアウトをFlexboxで実装するシンプルなコードのまとめ

Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021
by Joy Shaheb

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Flexboxの構造・各プロパティと値

まずは、CSS Flexboxのおさらいです。
Flexboxは、Flexコンテナ内にFlexアイテムをメイン軸(Main Axis)またはクロス軸(Cross Axis)に沿って配置します。

Flexboxの構造

Flexboxの構造

Flexboxで使用できる各プロパティとその値の一覧です。

Flexboxの各プロパティと値

Flexboxの各プロパティと値

Flexboxの各プロパティの振る舞いは、先日の記事をご覧ください。

実装の準備

あなたが使用しているエディタ、またはCodePenに下記を記述します。

スタイルのデフォルトも簡単に定義しておきます。
CSSリセットについては、以前の記事をご覧ください。
参考: 2021年、モダンブラウザに適したCSSリセットのまとめ

この記事で作成するレイアウトの基本構造です。
ラッパーとなるコンテナがあり、その中に子要素としてブロックがあります。ブロックの子要素が必要な場合はボックスを使用します。

レイアウトの基本構造

レイアウトの基本構造

Level 1: シンプルなカードレイアウト

まずは、シンプルなカードのレイアウト。デスクトップでは3列に配置され、スマホでは1列に幅いっぱいに配置されます。

シンプルなカードのレイアウト

シンプルなカードのレイアウト

CSSにすると、下記の通りです。

Level 2: ナビゲーションバー

デスクトップでは行に、スマホでは列にアイテムが配置されるナビゲーションのレイアウトです。

ナビゲーションのレイアウト

ナビゲーションのレイアウト

CSSにすると、下記の通りです。

Level 3: サイドバー

サイドバーをデスクトップではコンテンツの横に、スマホでは上にするレイアウトです。

サイドバーがあるレイアウト

サイドバーがあるレイアウト

CSSにすると、下記の通りです。

Level 4: 少し複雑なカードレイアウト

1とは少し異なり、カードを配置する少し複雑なレイアウトです。

少し複雑なカードレイアウト

少し複雑なカードレイアウト

CSSにすると、下記の通りです。

Level 5: Holy Grail(聖杯レイアウト)

Holy Grail(聖杯レイアウト)とは、天地にヘッダとフッタがあり、中央にコンテンツとその左右にサイドバーがあるレイアウトです。スマホではサイドバーを1つ非表示にして、縦一列に配置します。

Holy Grail(聖杯レイアウト)

Holy Grail(聖杯レイアウト)

CSSにすると、下記の通りです。

終わりに

最後まで読んでくれて、ありがとうございます。この記事があなたのお役に立てば、幸いです。

クレジット

sponsors

top of page

©2021 coliss