CSS Gridで実装する際にはこの点に注意、IE11以下・Edge15以下をサポートするフォールバックのテクニック
Post on:2018年5月9日
sponsorsr
CSS Gridは非常に便利ですが、唯一の欠点はIE11以下・Edge15以下のユーザーをサポートする必要がある場合に期待通りに機能しないことです。
CSS Gridでページのレイアウト・グリッド・コンポーネントを実装する際に、IE11以下・Edge15以下をサポートするフォールバックのテクニックを紹介します。
Grid to Flex
Grid to Flex -GitHub
CSS Gridがレイアウトで優れている点は、水平方向と垂直方向の両方を制御して、レイアウトができるという点です。
Flexboxでは両方を制御することはできないため、その点に注意します。
CSS Grid, Flexboxについて学びたい時は、下記の記事がオススメです。
CSS Gridを使ったページのレイアウト
まずは、よく見かけるページのレイアウト。
ヘッダ・コンテンツ・フッタ・サイドバーがあり、サイドバーの高さがコンテンツ・ページ全体の2種類です。
ページのレイアウト（サイドバーの高さがコンテンツと同じ）
See the Pen Grid To Flex -- Example 1 by Una Kravets (@una) on CodePen.
|
1 2 3 4 5 6 |
<div class="container"> <div class="red">Header</div> <div class="orange">Sidebar</div> <div class="yellow">Content</div> <div class="green">Footer</div> </div> |
CSS Gridを使った実装
絵文字は名前を定義しているだけなので、自由に変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@supports (display: grid) { .container { display: grid; grid-template: "😁 😁" 60px "🐒 📝" var(--middleHeight) "👠 👠" var(--footerHeight)/1fr 3fr; } .red { grid-area: 😁; } .orange { grid-area: 🐒; } .yellow { grid-area: 📝; } .green { grid-area: 👠; } } |
フォールバック
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.ex1 .container { display: flex; flex-wrap: wrap; } .ex1 .red { flex-basis: 100%; height: 60px; } .ex1 .orange { flex: 1; } .ex1 .yellow { flex: 3; height: 300px; } .ex1 .green { flex-basis: 100%; height: 100px; } |
ページのレイアウト（サイドバーの高さがページ全体と同じ）
See the Pen Grid To Flex -- Example 2 by Una Kravets (@una) on CodePen.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="sidebar-container"> <div class="orange">Sidebar</div> </div> <div class="main-container"> <div class="red">Header</div> <div class="yellow">Content</div> <div class="green">Footer</div> </div> </div> |
CSS Gridを使った実装
絵文字は名前を定義しているだけなので、自由に変更できます。
|
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 |
.ex2 .container { display: grid; grid-template: '🐒 📝' 60px '🐒 📝' 300px '🐒 📝' 100px / 1fr 3fr ; } .ex2 .sidebar-container { grid-area: 🐒; } .ex2 .orange { height: 100%; } .ex2 .main-container { grid-area: 📝; display: grid; grid-template: '😁' 60px '💛' 300px '👠' 100px / 100% ; } .ex2 .red { grid-area: 😁; } .ex2 .yellow { grid-area: 💛; } .ex2 .green { grid-area: 👠; } |
フォールバック
|
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 |
.ex2 .container { display: flex; } .ex2 .sidebar-container { flex: 1; } .ex2 .orange { height: 100%; width: 100%; } .ex2 .main-container { display: flex; flex-wrap: wrap; flex: 3; } .ex2 .red { flex-basis: 100%; height: 60px; } .ex2 .yellow { flex-basis: 100%; height: 300px; } .ex2 .green { flex-basis: 100%; height: 100px; } |
CSS Gridを使ったブロックのグリッド
カードなどのブロックを配置するグリッドです。
CSS Gridを使ったブロックのグリッド
See the Pen Grid To Flex -- Example 3 by Una Kravets (@una) on CodePen.
|
1 2 3 4 5 6 7 8 |
<div class="container"> <div class="red">1</div> <div class="orange">2</div> <div class="yellow">3</div> <div class="green">4</div> <div class="blue">5</div> <div class="purple">6</div> </div> |
CSS Gridを使った実装
|
1 2 3 4 |
.ex3 .container { display: grid; grid-template-columns: repeat(4, 1fr); } |
フォールバック
|
1 2 3 4 5 6 7 8 |
.ex3 .container { display: flex; flex-wrap: wrap; } .ex3 .container > div { flex-basis: calc(100% / 4); } |
CSS Gridを使ったコンポーネントのレイアウト
よく見かけるナビゲーションバーで、ナビゲーションは左寄せ、ログアウトは右寄せに配置されています。
See the Pen Grid To Flex -- Example 4 by Una Kravets (@una) on CodePen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <div class="yellow"> <ul class="green"> <li class="blue">Nav1</li> <li class="blue">Nav2</li> <li class="blue">Nav3</li> <li class="blue">Nav4</li> </ul> <div class="orange"> <p class="purple"><u>Log Out</u></p> <div class="red">💁🏻♀️</div> </div> </div> </div> |
CSS Gridを使った実装
絵文字は名前を定義しているだけなので、自由に変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.ex4 .yellow { display: grid; grid-template: '📝 👾 💁🏻' / auto 1fr auto; height: 60px; width: 100%; } .ex4 .green { grid-area: 📝; } .ex4 .blue + .blue{ margin-left: 1em; } .ex4 .orange { grid-area: 💁🏻; } |
フォールバック
|
1 2 3 4 5 6 7 8 9 10 |
.ex4 .yellow { display: flex; width: 100%; justify-content: space-between; height: 60px; } .ex4 .blue + .blue { margin-left: 1em; } |
sponsors
