【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ
Post on:2021年4月15日
sponsors
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。
コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。
Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021
by Joy Shaheb
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- Flexboxの構造・各プロパティと値
- 実装の準備
- Level 1: シンプルなカードレイアウト
- Level 2: ナビゲーションバー
- Level 3: サイドバー
- Level 4: 少し複雑なカードレイアウト
- Level 5: Holy Grail（聖杯レイアウト）
- 終わりに
Flexboxの構造・各プロパティと値
まずは、CSS Flexboxのおさらいです。
Flexboxは、Flexコンテナ内にFlexアイテムをメイン軸（Main Axis）またはクロス軸（Cross Axis）に沿って配置します。
Flexboxの構造
Flexboxで使用できる各プロパティとその値の一覧です。
Flexboxの各プロパティと値
Flexboxの各プロパティの振る舞いは、先日の記事をご覧ください。
実装の準備
あなたが使用しているエディタ、またはCodePenに下記を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// defining border color, gap, padding in variables $gap : 4vh; $padding : 4vh; $color : #48CAE4; // Defining Break-Points $bp : ( mobile : 480px, tablet : 768px, desktop : 1440px, ); //Defining our Conditional Media query Mixins. //To save Time & Coffee. @mixin query($display){ @each $key, $value in $bp{ // defining max-width @if ($display == $key){ @media (max-width: $value){@content;} } } } |
スタイルのデフォルトも簡単に定義しておきます。
CSSリセットについては、以前の記事をご覧ください。
参考: 2021年、モダンブラウザに適したCSSリセットのまとめ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//Changing The Default Settings.. *{ margin:0px; padding: 0px; box-sizing: border-box; body{ width: 100%; min-height: 100vh; font-family: sans-serif; font-size: 45px; } } |
この記事で作成するレイアウトの基本構造です。
ラッパーとなるコンテナがあり、その中に子要素としてブロックがあります。ブロックの子要素が必要な場合はボックスを使用します。
レイアウトの基本構造
Level 1: シンプルなカードレイアウト
まずは、シンプルなカードのレイアウト。デスクトップでは3列に配置され、スマホでは1列に幅いっぱいに配置されます。
シンプルなカードのレイアウト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!-- コンテナには3つの子要素 block-1, block-2, block-3 --> <div class="container"> <!--block-1には3つの子要素 box-1,box-2,box-3 --> <div class="block-1"> <div class="box-1">A</div> <div class="box-2">B</div> <div class="box-3">C</div> </div> <!--block-2にも同じ3つの子要素、class名が異なります --> <div class="block-2"> <div class="box-4">D</div> <div class="box-5">E</div> <div class="box-6">F</div> </div> <!--block-3にも同じ3つの子要素、class名が異なります --> <div class="block-3"> <div class="box-7">G</div> <div class="box-8">H</div> <div class="box-9">I</div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
// コンテナのスタイルを定義 .container{ display: flex; //.block-*を列に配置 flex-direction: column; //.block-*間のギャップを定義 gap: $gap; // paddingとborderを定義 padding: $padding; border: 1vh solid $color; } // すべての.block-*に共通のスタイルを定義 [class ^="block-"]{ //ボックスを一列に配置 display: flex; flex-direction: row; // border(1vh+1vh), gap, paddingを取り除き、 // 3で割ることにより、.block-*間でスペースを均等に分散 height: (100vh-2vh -$gap*2-$padding*2) / 3; // .box-*間にギャップを定義 gap: $gap; // スマホ用のスタイル @include query (mobile){ flex-direction: column; // 好きな値に変更してください height: 500px; } } // すべての.box-*に共通のスタイルを定義 [class ^="box-"]{ // テキストを天地左右の中央の配置 display: flex; justify-content: center; align-items: center; // ボックス間でスペースを分割 // flex-gap:1;で違いを確認してみてください // flex-grow: 1; // 1+1+1 =3 => 1/3 X 100% => 33.33%に分割 flex-basis: (100%)/3; // 33.33%に分割 border : 2px solid black; border-radius: 10px; background-color: #c1c1c1; } |
CSSにすると、下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.container { display: flex; flex-direction: column; gap: 4vh; padding: 4vh; border: 1vh solid #48CAE4; } [class^=block-] { display: flex; flex-direction: row; height: 27.3333333333vh; gap: 4vh; } @media (max-width: 480px) { [class^=block-] { flex-direction: column; height: 500px; } } [class^=box-] { display: flex; justify-content: center; align-items: center; flex-basis: 33.3333333333%; border: 2px solid black; border-radius: 10px; background-color: #c1c1c1; } |
Level 2: ナビゲーションバー
デスクトップでは行に、スマホでは列にアイテムが配置されるナビゲーションのレイアウトです。
ナビゲーションのレイアウト
|
1 2 3 4 5 6 |
<div class="container"> <div class="item-1">Home</div> <div class="item-2">About</div> <div class="item-3">Services</div> <div class="item-4">Contact</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.container{ // ここではfont-sizeを変更 font-size: 35px; display: flex; // アイテムの向きを定義 flex-direction: row; // 利用可能なスペースを分配 justify-content: space-evenly; padding: $padding; border : 1vh solid $color; // スタイルの定義はタブレットから始めます @include query(tablet){ // アイテムの向きを変更 flex-direction: column; align-items: center; // アイテムのギャップを垂直に変更 gap: $gap } } |
CSSにすると、下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.container { font-size: 35px; display: flex; flex-direction: row; justify-content: space-evenly; padding: 4vh; border: 1vh solid #48CAE4; } @media (max-width: 768px) { .container { flex-direction: column; align-items: center; gap: 4vh; } } |
Level 3: サイドバー
サイドバーをデスクトップではコンテンツの横に、スマホでは上にするレイアウトです。
サイドバーがあるレイアウト
|
1 2 3 4 |
<div class="container"> <div class="block-1">Left</div> <div class="block-2">Right</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.container{ display: flex; flex-direction: row; gap: $gap; padding: $padding; // スマホのスタイルを定義 @include query(mobile){ flex-direction: column; } } // 2つのクラスをまとめて定義 [class ^="block-"]{ // テキストを天地左右の中央に配置 display: flex; justify-content: center; align-items: center; border : 4px solid $color; // 各ブロックの高さを定義 height: 100vh -$padding*2; // スマホのスタイルを定義 @include query(mobile){ height: 50vh -$padding*2; } } |
CSSにすると、下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.container { display: flex; flex-direction: row; gap: 4vh; padding: 4vh; } @media (max-width: 480px) { .container { flex-direction: column; } } [class^=block-] { display: flex; justify-content: center; align-items: center; border: 4px solid #48CAE4; height: 92vh; } @media (max-width: 480px) { [class^=block-] { height: 42vh; } } |
|
1 2 3 4 5 6 7 8 9 10 11 |
// 左ブロックのスタイルを定義 .block-1{ // 利用可能な幅の20％を占めます flex-grow: 2; } // 右ブロックのスタイルを定義 .block-2{ // 利用可能な幅の80％を占めます flex-grow: 8; } |
Level 4: 少し複雑なカードレイアウト
1とは少し異なり、カードを配置する少し複雑なレイアウトです。
少し複雑なカードレイアウト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <div class="block-1"> <div class="box-1">A</div> </div> <div class="block-2"> <div class="box-2">B</div> <div class="box-3">E</div> </div> <div class="block-3"> <div class="box-4">C</div> <div class="box-5">D</div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
// コンテナのスタイルを定義 .container { display: flex; flex-direction: column; padding: $padding; gap: $gap; } // すべての.block-*に共通のスタイルを定義 [class ^="block-"]{ display: flex; flex-direction: row; gap: $gap; // パディングとギャップを削除し、3で割る height: (100vh -$gap*2 -$padding*2)/3; // スマホのスタイルを定義 @include query(mobile){ flex-direction: column; } } // すべての.box-*に共通のスタイルを定義 [class ^="box-"]{ // テキストを天地左右の中央に配置 display: flex; justify-content: center; align-items: center; // ボーター、角丸、背景色の定義 border : 1vh solid $color; border-radius: 10px; background-color: #c1c1c1; } //A .box-1{ flex-basis: 100%; } //B と D .box-2, .box-5{ flex-basis: 70%; } //E と C .box-3,.box-4{ flex-basis: 30% } // スマホのスタイルを定義 @include query(mobile){ .block-2{ height: (100vh*2)/3; // 66.66vh } .block-3{ flex-direction: row; } // B, E, C, Dのスタイル .box-2,.box-3,.box-4,.box-5{ flex-basis: 50%; } } |
CSSにすると、下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
.container { display: flex; flex-direction: column; padding: 4vh; gap: 4vh; } [class^=block-] { display: flex; flex-direction: row; gap: 4vh; height: 28vh; } @media (max-width: 480px) { [class^=block-] { flex-direction: column; } } [class^=box-] { display: flex; justify-content: center; align-items: center; border: 1vh solid #48CAE4; border-radius: 10px; background-color: #c1c1c1; } .box-1 { flex-basis: 100%; } .box-2, .box-5 { flex-basis: 70%; } .box-3, .box-4 { flex-basis: 30%; } @media (max-width: 480px) { .block-2 { height: 66.6666666667vh; } .block-3 { flex-direction: row; } .box-2, .box-3, .box-4, .box-5 { flex-basis: 50%; } } |
Level 5: Holy Grail（聖杯レイアウト）
Holy Grail（聖杯レイアウト）とは、天地にヘッダとフッタがあり、中央にコンテンツとその左右にサイドバーがあるレイアウトです。スマホではサイドバーを1つ非表示にして、縦一列に配置します。
Holy Grail（聖杯レイアウト）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <div class="block-1"> <div class="box-1">A</div> </div> <div class="block-2"> <div class="box-2">B</div> <div class="box-3">C</div> <div class="box-4">D</div> </div> <div class="block-3"> <div class="box-5">E</div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
// コンテナのスタイルを定義 .container{ display: flex; flex-direction: column; gap: $gap; padding: $padding; } // すべての.block-*に共通のスタイルを定義 [class ^="block-"]{ display: flex; flex-direction: row; gap: $gap; } // すべての.box-*に共通のスタイルを定義 [class ^="box-"]{ display: flex; justify-content: center; align-items: center; border : 1vh solid $color; border-radius: 10px; } // AとEを一緒に定義 .box-1,.box-5{ flex-basis: 100%; height: 20vh; } // Cのスタイルを定義 .box-3{ flex-basis: 60%; // ギャップとパディングを取り除く height: 60vh -$gap*2-$padding*2; } // BとDを一緒に定義 .box-2,.box-4{ flex-basis: 20%; } // スマホのスタイルを定義 @include query(mobile){ .block-2{ flex-direction: column; height: 60vh; } // Bブロックを隠す .box-2{ display: none; } // Cの高さを増やす .box-3{ flex-basis: 80%; } } |
CSSにすると、下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.container { display: flex; flex-direction: column; gap: 4vh; padding: 4vh; } [class^=block-] { display: flex; flex-direction: row; gap: 4vh; } [class^=box-] { display: flex; justify-content: center; align-items: center; border: 1vh solid #48CAE4; border-radius: 10px; } .box-1, .box-5 { flex-basis: 100%; height: 20vh; } .box-3 { flex-basis: 60%; height: 44vh; } .box-2, .box-4 { flex-basis: 20%; } @media (max-width: 480px) { .block-2 { flex-direction: column; height: 60vh; } .box-2 { display: none; } .box-3 { flex-basis: 80%; } } |
終わりに
最後まで読んでくれて、ありがとうございます。この記事があなたのお役に立てば、幸いです。
クレジット
- 画像: Flaticon
sponsors
