CSS Grid Layout の基礎

CSS
2018. 07.12 [Thu]
Koji Kobayashi
Grid
Layout 1

Agenda
1. はじめに
2. 現状のレイアウトの問題
3. CSS Grid Layoutの概要
4. 対応ブラウザ
5. 基本的な使い方
6. デモ（ライブコーディング）
7. 所感
8. おすすめリンク集 2

3
【アンケート】あてはまるものに ✋
1. CSS Grid Layout なら任せろ
2. 使ったことがある（実務関係なし）
1. はじめに

上記理由により、あまり詳しい話はできません。
ただCSS Grid Layoutはこれまでのレイアウトに絡む問題をいろいろと解決してくれ、今後デファ
クトスタンダードになりうる機能だと思いますので、本勉強会を通じて雰囲気だけでも感じ取っ
てもらえたらと思います。
4
● 使用歴 10日🔰
● 実務での使用経験なし
My Skill Of CSS Grid Layout
1. はじめに

レイアウトを実現するために、HTML上で要素の順番を、本来あるべき文書構造とは異なるものに
せざるを得なかったり、レイアウト用のdivを入れるなどの必要があった。
5
HTMLとCSSの分離ができない
2. 現状のレイアウトの問題
さまざまなCSSテクニックを駆使したり、JavaScriptを使ったり力技が必要だった。
レスポンシブでウィンドウサイズごとに要素の並び順が変更となるとさらに複雑化。
雑誌風などの複雑なレイアウトを表現しにくかった

3. CSS Grid Layout の概要
6
● 正式名称：CSS Grid Layout Module
● 2次元グリッドベースのレイアウトシステムを定義する新しい仕様
○ display: grid; が指定された親要素にグリッドレイアウト情報を定義し、子要素では、
そのグリッドのどこに配置されるかを定義する
● 2017/12/14以降、W3Cでは勧告候補になっている
● IE10から使える！

7https://caniuse.com/#search=css%20grid

8
postcss.config.js
const autoprefixer =
require('autoprefixer')
module.exports = {
plugins: [
autoprefixer({ grid: true })
]
};
● IE10、11に対応するには、ただベンダープレ
フィックスを加えるだけは不十分。
（対応しているプロパティや仕様に違いが多
い）
● Autoprefixer（version 8以上）を使えば、IEで
本来は利用できないプロパティーでも互換性
のあるコードに変換してくれる
（optionで grid: true にする必要有）

9
Header
Main Visual
Section01
Section02
News
Sidemenu
Footer
Portrait
Header
Main Visual
Section01
News
Sidemenu
Footer
Section02
Landscape

10
Header
Main Visual
Section01
News
Sidemenu
Footer
Section02
1 2 3 4
1
2
3
4
5
6

11
Header
Main Visual
Section01
News
Sidemenu
Footer
Header
Section02
1 2 3 4
1
2
3
4
5
6
Header
1～2列、1～2行目
News
3～4列、 1～2行目
Main Visual
1～4列、 2～3行目
・
・
・

12
HTML
<div class="container">
<header class="header">Header</header>
<div class="mv">Main visual</div>
<section class="news">News</section>
<section class="section01">Section01</section>
<section class="section02">Section02</section>
<aside class="sideMenu">Sidemenu</aside>
<footer class="footer">Footer</footer>
</div>
● 親要素の直下に配置したい要素を
並べる

13
CSS
.container {
display: grid;
grid-template-columns: 300px 1fr 200px;
grid-template-rows: auto auto auto auto auto;
gap: 30px 10px;
}
.header { grid-column: 1 / 3; grid-row: 1; }
.mv { grid-column: 1 / -1; grid-row: 2; }
.news { grid-column: 3; grid-row: 1; }
.sideMenu { grid-column: 1; grid-row: 3 / 5; }
.section01 { grid-column: 2 / -1; grid-row: 3; }
.footer { grid-column: 1 / -1; grid-row: -2; }

14
CSS
.container {
display: grid;
gap: 30px 10px;
}
display: grid;
● グリッド全体を覆う要素に指定
● グリッドコンテナを形成（詳細は後述）
● 直下の子要素はグリッドアイテムになる

15
CSS
.container {
display: grid;
gap: 30px 10px;
}
grid-template-columns
● グリッドの列に関する設定
● 列ごとに幅を設定する
○ リピートするには repeat(count, width)
● 初期値：none
● 設定可能値： auto, px, %, fr, repeat(), etc...

16
CSS
.container {
display: grid;
gap: 30px 10px;
}
grid-template-rows
● グリッドの行に関する設定
● 他は基本的にgrid-template-columnsと同じ
grid-template-rows: repeat(5, auto);
下記のように書くことも可能

17
CSS
.container {
display: grid;
gap: 30px 10px;
}
gap
● グリッドの行、列のすき間を一括設定
○ 行だけ： row-gap
○ 列だけ： column-gap
● 初期値： row-gap: normal;
column-gap: normal;
● 設定可能値： px, em, cm, %, calc(), etc...
● grid-gap から gapへ変更された

18
CSS
.container {
display: grid;
gap: 30px 10px;
}
grid-column
● グリッドコンテナの子要素（グリッドアイ
テム）に、グリッド上のどの列に配置する
か範囲を設定
● 開始位置だけ： grid-column-start
終了位置だけ： grid-column-end
● 初期値： grid-column-start: normal;
grid-column-end: normal;
● 設定可能値： auto, <integer>, span, etc...

19
CSS
.container {
display: grid;
gap: 30px 10px;
}
grid-row
● グリッドコンテナの子要素（グリッドアイ
テム）に、グリッド上のどの行に配置する
か範囲を設定
● 開始位置だけ： grid-row-start
終了位置だけ： grid-row-end
● 初期値： grid-row-start: normal;
grid-row-end: normal;
● 設定可能値： auto, <integer>, span, etc...

20
CSS Grid Layoutに
登場する大事な用語
● グリッドコンテナ
● グリッドアイテム
● グリッドライン
● グリッドトラック
● グリッドセル
● グリッドエリア
1 2 3 4
1
2
3
4
5
6

グリッドコンテナ
display: grid; または
display: inline-grid; が指定された要素。
グリッドの分割数や、分割されたグリッド
の列や行の幅や高さなどレイアウト情報を
指定することが可能。
利用可能プロパティ
grid-template-columns(rows), grid-template-
areas, gap, justify-items, align-items, etc...
Header
Main Visual
Section01
News
Sidemenu
Footer
Section02
1 2 3 4
1
2
3
4
5
6

グリッドアイテム
グリッドコンテナの直下の子要素。
分割されたグリッドのどこに配置するか等
を指定する。
利用可能プロパティ
grid-column(row), grid-area, justyfy-self, align-
self, z-index, etc...
Header
Main Visual
Section01
News
Sidemenu
Footer
Section02
1 2 3 4
1
2
3
4
5
6

グリッドライン
グリッドを横方向・縦方向に分割する
罫線。太さがなく見た目には現れない。
縦の線がcolumn line、
横の線がrow line。
マイナス値での指定も可能。
1 2 3 4
1
2
3
4
5
6
-1-2-3-4
-6
-5
-4
-3
-2
-1

グリッドトラック
各列や行を示す。
（グリッドトラックの数やサイズを指
定するためには、グリッドコンテナに
grid-template-rows, grid-template-
columns を指定する）
1 2 3 4
1
2
3
4
5
6
-1-2-3-4
-6
-5
-4
-3
-2
-1

グリッドセル
行のグリッドトラックと、列のグリッ
ドトラックが交差する箇所。
（今回の例だと、15個のグリッドセル
がある）
1 2 3 4
1
2
3
4
5
6
-1-2-3-4
-6
-5
-4
-3
-2
-1

グリッドエリア
複数の、行と列のグリッドトラックが
交差する範囲。
グリッドコンテナに grid-template-
areas を指定することで、グリッドエ
リアを作成。そしてグリッドアイテム
にgrid-area を指定するとグリッドエリ
アに配置することが可能。
1 2 3 4
1
2
3
4
5
6
-1-2-3-4
-6
-5
-4
-3
-2
-1

不使用（元のCSS）
.container {
display: grid;
gap: 30px 10px;
}
使用
.container {
display: grid;
grid-template-areas:
"header header news"
"mv mv mv"
"sidemenu section01 section01"
"sidemenu section02 section02"
"footer footer footer";
gap: 30px 10px;
}
.header { grid-area: header; }
.mv { grid-area: mv; }
.news { grid-area: news; }
.sideMenu { grid-area: sidemenu; }
.section01 { grid-area: section01; }
.section02 { grid-area: section02; }
.footer { grid-area: footer; }
grid-areaを不使用／使用時のCSS
grid-area を使用すると、グリッドアイテムのプロパティ
ごとに配置の指定をしなくて済む。
複雑な構造の時におすすめ。

6. デモ（ライブコーディング）
28
https://kde-space.github.io/css_grid_layout/demo01/

29
● 複雑なレイアウト、レスポンシブを簡単に実現できてとてもイイ
● 今までと比べるとはるかにHTMLがシンプルになる
● 設定できる項目はまだまだたくさんあるので、もっと便利に使えるはず。
その分、全部使いこなせるようになるのは少し大変
● 既存のレイアウト用のプロパティとうまく使い分けたい
● デバッグにはFirefoxのデベロッパーツールが今のところ一番良い
7. 所感

30
● CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 (ICS media)
● これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法
(ICS media)
● CSS Grid Layoutをガッツリ使った所感 (ICS media)
● CSS Grid Layout を極める！（基礎編）(Qiita)
● CSS グリッドレイアウト (MDN)
● Learn CSS Grid
● Grid Examples
8. おすすめリンク集

31
Thanks!!ご静聴ありがとうございました

CSS Grid Layout の基礎

Recommandé

Recommandé

Contenu connexe

Similaire à CSS Grid Layout の基礎

Similaire à CSS Grid Layout の基礎 (20)

CSS Grid Layout の基礎

Notes de l'éditeur