Movatterモバイル変換

[0]ホーム
URL:

コリス

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

サイト構築 -CSS

Post on:2021年4月15日

sponsorsr

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に下記を記述します。

SCSS
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.
 
@mixinquery($display){
  @each$key,$valuein$bp{
 
    //  defining max-width
    @if($display==$key){
      @media(max-width:$value){@content;}
    }
  }
}

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

SCSS
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列に幅いっぱいに配置されます。

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

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

HTML
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-->
 
<divclass="container">
 
<!--block-1には3つの子要素box-1,box-2,box-3-->
 
  <divclass="block-1">
    <divclass="box-1">A</div>
    <divclass="box-2">B</div>
    <divclass="box-3">C</div>
  </div>
 
<!--block-2にも同じ3つの子要素、class名が異なります-->
 
  <divclass="block-2">
    <divclass="box-4">D</div>
    <divclass="box-5">E</div>
    <divclass="box-6">F</div>
  </div>
 
<!--block-3にも同じ3つの子要素、class名が異なります-->
 
  <divclass="block-3">
    <divclass="box-7">G</div>
    <divclass="box-8">H</div>
    <divclass="box-9">I</div>
  </div>
</div>

SCSS
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:1vhsolid$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;
 
// スマホ用のスタイル
  @includequery(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:2pxsolidblack;
  border-radius:10px;
  background-color:#c1c1c1;
}

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

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:1vhsolid#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:2pxsolidblack;
  border-radius:10px;
  background-color:#c1c1c1;
}

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

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

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

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

HTML
1
2
3
4
5
6
<divclass="container">
  <divclass="item-1">Home</div>
  <divclass="item-2">About</div>
  <divclass="item-3">Services</div>
  <divclass="item-4">Contact</div>
</div>

SCSS
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:1vhsolid$color;
 
// スタイルの定義はタブレットから始めます
  @includequery(tablet){
// アイテムの向きを変更
    flex-direction:column;
    align-items:center;
 
// アイテムのギャップを垂直に変更
    gap:$gap
  }
}

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

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:1vhsolid#48CAE4;
}
@media(max-width:768px){
  .container{
    flex-direction:column;
    align-items:center;
    gap:4vh;
  }
}

Level 3: サイドバー

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

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

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

HTML
1
2
3
4
<divclass="container">
  <divclass="block-1">Left</div>
  <divclass="block-2">Right</div>
</div>

SCSS
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;
 
// スマホのスタイルを定義
  @includequery(mobile){
    flex-direction:column;
  }
}
 
 
// 2つのクラスをまとめて定義
[class^="block-"]{
 
// テキストを天地左右の中央に配置
  display:flex;
  justify-content:center;
  align-items:center;
 
  border:4pxsolid$color;
// 各ブロックの高さを定義
  height:100vh-$padding*2;
 
// スマホのスタイルを定義
  @includequery(mobile){
    height:50vh-$padding*2;
  }
}

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

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:4pxsolid#48CAE4;
  height:92vh;
}
@media(max-width:480px){
  [class^=block-]{
    height:42vh;
  }
}

CSS
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とは少し異なり、カードを配置する少し複雑なレイアウトです。

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

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

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<divclass="container">
  <divclass="block-1">
    <divclass="box-1">A</div>
  </div>
  <divclass="block-2">
    <divclass="box-2">B</div>
    <divclass="box-3">E</div>
  </div>
    <divclass="block-3">
    <divclass="box-4">C</div>
    <divclass="box-5">D</div>
  </div>
</div>
</div>

SCSS
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;
 
// スマホのスタイルを定義
  @includequery(mobile){
    flex-direction:column;
  }
}
 
// すべての.box-*に共通のスタイルを定義
[class^="box-"]{
// テキストを天地左右の中央に配置
  display:flex;
  justify-content:center;
  align-items:center;
 
// ボーター、角丸、背景色の定義
  border:1vhsolid$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%
}
 
// スマホのスタイルを定義
 
@includequery(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にすると、下記の通りです。

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:1vhsolid#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（聖杯レイアウト）

Holy Grail（聖杯レイアウト）

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<divclass="container">
  <divclass="block-1">
    <divclass="box-1">A</div>
  </div>
  <divclass="block-2">
    <divclass="box-2">B</div>
    <divclass="box-3">C</div>
    <divclass="box-4">D</div>
  </div>
  <divclass="block-3">
    <divclass="box-5">E</div>
  </div>
</div>

SCSS
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:1vhsolid$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%;
}
 
// スマホのスタイルを定義
 
@includequery(mobile){
  .block-2{
    flex-direction:column;
    height:60vh;
  }
// Bブロックを隠す
  .box-2{
    display:none;
  }
// Cの高さを増やす
  .box-3{
    flex-basis:80%;
  }
}

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

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:1vhsolid#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%;
  }
}

終わりに

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

クレジット

sponsors

Related Posts

関連記事が見つかりませんでした。

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • ソースネクスト
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp