Lesson402
THEME
テーマ

CSS Gridを使ったレイアウト
90min

CSS Gridと呼ばれる方法でレイアウトをしてみましょう。Flexboxやinline-blockと違い、行と列を使って二次元的に要素を配置をする方法です。IE11への対応はサポートする記述が必要です（IE10以前は非対応）。

CSS Gridとは
CSS Grid Layout Module（以下「CSS Grid」）とは、「グリッド」と呼ばれる見えない罫線を生成し、マス目を使ってレイアウトするシステムです。flexbox でも同じようなレイアウトを作れますが、CSS Grid は要素を二次元的に配置することができ、写真ギャラリーなどの配置も簡単に作ることができます。
図1

HTMLとGridを書く前段階のCSS

HTMLCSS<ul class="container">/* 全体の設定・事前準備 */<li class="item"><img src="img/1.png" alt="1"></li><li class="item"><img src="img/2.png" alt="2"></li><li class="item"><img src="img/3.png" alt="3"></li><li class="item"><img src="img/4.png" alt="4"></li><li class="item"><img src="img/5.png" alt="5"></li><li class="item"><img src="img/6.png" alt="6"></li></ul>

ブラウザ表示Gridを使う前はただ縦に並んでいる

20px

*{

box-sizing:border-box;

margin: 0;

padding: 0;}ul{list-style: none;}img{

display: block;}max-width: 100%;.container{

width: 1000px;}

margin: 20px auto;

1000px108 Le sso n 4-0 2 CSS Gridを使ったレイアウト

HTMLCSS_L04.indd 108

2020/02/15 8:56

なお、CSS Grid は、現在はほとんどの最新ブラウザでサポート
Lesson 4

されていますが、IE11 ではベンダープレフィックスや機能を補助する記述が必要です。

HTMLとCSSの応用

グリッドを作る
本節では番号の書かれた画像を行と列の 2 方向から指定して配置していきます。 図1 はベースとなる HTML/CSS です。グリッドはテーブルのように列と行で構成します。grid-template-columns
プロパティと grid-template-rows プロパティを使って、箱の数と大きさを指定します。grid-template-columns は、数値を書いた数だけ横に列が増え、grid-template-rows では数値を書いた数だ
け下に行が増えていきます。 図2 の記述では、320px の列が 3 つと240px の行が 2 つ生成されます。
なお、IE11 には効かないため、-ms-grid-columns と -ms-grid-rows というプロパティも併記します。 接頭辞「-ms-」だけでなくプロパティ名も異なっていることに注意しましょう。
アイテム同士の間隔を決めるには、margin などは使わず、コンPOINT
古いブラウザに対応させるための接頭辞を「ベンダープレフィックス」といいます。ここではIE11に対応させるため「-ms-」というベンダープレフィックスを記述しています。

テナに grid-gap プロパティで指定します。
グリッドを作る

図2

CSS※青字はIE11用の記述/*Grid の設定 */.container{

display: -ms-grid;display: grid;

CSS Grid を有効化

列（column）の幅と数を指定-ms-grid-columns: 320px 20px 320px 20px 320px;
grid-template-columns: 320px 320px 320px;-ms-grid-rows:240px 20px 240px;

grid-template-rows: 240px 240px;}

grid-gap:20px;

行（row）の高
さと数を指定アイテム同士の間隔（縦も横も）/*IE11 用 アイテムの設定 */memo
IE11にはアイテム同士の間隔を指定するgrid-gapが効かないため、隙間部分もグリッドの箱として配置する必要があ り ま す。IE11用 の 記 述（-ms-gridcolumnsと-ms-grid-rows）の 値 に、1つおきにgrid-gapと同じ数値（ここでは20px）を記述します。

.container .item:nth-child(1){-ms-grid-row: 1;}-ms-grid-column: 1;

1 行目、 1 列目作るための箱になるので、奇数行目、.container .item:nth-child(2){-ms-grid-row: 1;}-ms-grid-column: 3;memo
偶数行目、偶数列目はIE11用の隙間を奇数列目に要素を配置。

1 行目、 3 列目
↓次ページへ続く

109

HTMLCSS_L04.indd 109

2020/02/15 8:56

CSS

↓前ページからの続き.container .item:nth-child(3){-ms-grid-row: 1;}

1 行目、 5 列目

-ms-grid-column: 5;.container .item:nth-child(4){-ms-grid-row: 3;}

3 行目、 1 列目

-ms-grid-column: 1;.container .item:nth-child(5){-ms-grid-row: 3;}

3 行目、 3 列目

-ms-grid-column: 3;.container .item:nth-child(6){-ms-grid-row: 3;}

3 行目、 5 列目

-ms-grid-column: 5;

ブラウザ表示

20px

20px

320px

320px

320px

1000px

レスポンシブにする
ブラウザの幅が 1000px を切るとアイテムがはみ出るので、ブレイクポイントを 999px にします。先ほどの 図2 では幅 320px の列が 3 つだったのに対し、図3 の CSS では、155px の列が 2 つになっています。代わりに行が増えています。

110 Le sso n 4-0 2 CSS Gridを使ったレイアウト

HTMLCSS_L04.indd 110

2020/02/15 8:56

図3

レスポンシブにする

Lesson 4

CSS@media screen and (max-width: 999px){.container{

小さいデバイスに合わせた幅-ms-grid-columns: 155px 10px 155px;
grid-template-columns: 155px 155px;-ms-grid-rows: 116px 10px 116px 10px 116px;
grid-template-rows: 116px 116px 116px;}

HTMLとCSSの応用

width: 320px;

要素がはみださないブレイクポイントを指定

width に収まるよう、
2 列 3 行に変更

grid-gap:10px;/*IE11 用 アイテムの設定 */.container .item:nth-child(1){-ms-grid-row: 1;}-ms-grid-column: 1;.container .item:nth-child(2){IE 用にアイテムの位置を再設定-ms-grid-row: 1;}-ms-grid-column: 3;.container .item:nth-child(3){モバイルブラウザ表示-ms-grid-row: 3;}-ms-grid-column: 1;.container .item:nth-child(4){-ms-grid-row: 3;}-ms-grid-column: 3;.container .item:nth-child(5){-ms-grid-row: 5;}-ms-grid-column: 1;.container .item:nth-child(6){-ms-grid-row: 5;

}

}

10px
155px

155px
320px

-ms-grid-column: 3;

111

HTMLCSS_L04.indd 111

2020/02/15 8:56

可変幅にしてみよう
図1 〜 図3 の CSS では各グリッドの幅やコンテナの幅を px で指memo定しているため、計算が面倒です。また、999px 以下になった途

紙面上では 図2 図3 との違いがわかりに端余白が大きく生まれてしまいます。CSS Grid には便利な可変のくいため、実際に自分でブラウザで開単位（fr）が用意されているため、それを使ってもう少し簡単に、き、ウィンドウ幅を変えて確認してみましょう。

かつ最適表示にできるようにしてみましょう 図4 （HTML は 図1 と同じです）。
図4 （frを使った可変バージョンのCSS）
CSS/* 全体の設定・事前準備 */*{box-sizing:border-box;
margin: 0;

padding: 0;}ul{list-style: none;}img{

図1 とほぼ同じ

display: block;}max-width: 100%;.container{

width: 100%;

max-width: 1000px;}

margin: 20px auto;

ここだけ変更※コンテナの幅を100%にし、大きなブラウザで見ても1000pxを超えないようにしている.container{

display: -ms-grid;display: grid;-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
grid-template-columns: 1fr 1fr 1fr;
-ms-grid-rows: 1fr 20px 1fr;
grid-template-rows: 1fr 1fr;}

grid-gap:20px;

トラックの高さを 1:1 で 2 等分（コンテナに高さは指定されていないので auto のイメージ）

memo「トラック」とは「グリッドトラック」とも.container .item:nth-child(1){-ms-grid-row: 1;}

トラックの幅を 1:1:1 で 3 等分

-ms-grid-column: 1;（省略）

いい、「グリッドロウ」（行）と「グリッドカラム」（列）の総称です。

IE11用 アイテムの設定（ 図2 と同じ）

.container .item:nth-child(6){-ms-grid-row: 3;↓次ページへ続く112 Le sso n 4-0 2 CSS Gridを使ったレイアウト

HTMLCSS_L04.indd 112

2020/02/15 8:56

-ms-grid-column: 5;@media screen and (max-width: 650px){

画像の大きさが 320px なので、320+320+10(gap)=650-ms-grid-columns: 1fr 10px 1fr;
grid-template-columns: 1fr 1fr;

-ms-grid-rows: 1fr 10px 1fr 10px 1fr;
grid-template-rows: 1fr 1fr 1fr;}

grid-gap:10px;

HTMLとCSSの応用.container{

Lesson 4}

モバイル向けにも fr を使う
列と行の数を変えただけ

間隔も少し狭く.container .item:nth-child(1){-ms-grid-row: 1;}-ms-grid-column: 1;（省略）.container .item:nth-child(6){IE11 用 アイテムの設定（ 図3 と同じ）-ms-grid-row: 5;}}-ms-grid-column: 3;

PCのブラウザ表示

モバイルのブラウザ表示

20px
可変幅(100%-40px)÷320px
可変幅(100%-40px)÷3

可変幅(100%-40px)÷3

100%（1000pxより大きくは広がらない）
10px
可変幅

可変幅

(100%-10px)÷2(100%-10px)÷2

100%113

HTMLCSS_L04.indd 113

2020/02/15 8:56