builderscon2017/今日から使えるCSS Grid
2017/08/05 11:40-
@GeckoTangさん
akix.icon感想
めちゃくちゃ勉強になった
<table>から始まってdisplay: flex;までは自分でもやっていたが、CSS Gridが完全にノーマークだった デザイナーが使ういわゆるグリッドシステムと概念が一致しているので、デザイナーの意向を汲みやすくなったり、デザイナーが直接CSS書きやすくなったりするんじゃないかなと思った
アスキーアートみたいな値指定の方法があってめっちゃ笑った
-.icon
現在までの様々なレイアウト方法
<table>
float
position
table0cell
inline-block
Flexbox
CSS Grid(New!)
<table>, float, position
昔はよく使った
display: table-cell;
display: inline-block;
IE8対応のために使っていた
Flexbox
一昨年〜昨年あたりで出てきた
CSS Grid
今年になり遂に多くのブラウザでサポートされるようになった
CSS Gridとは
UI設計に最適化された仕様
CSS Gridはグリッドレイアウトを作りやすい
<table>のコーディングにちょっと似てる
HTML側にレイアウト構造を組まざるを得ない時がある
CSS Gridを使うとCSS側にグリッド構造を持てる
code:html
<div class="grid">
<div class="title"></div>
<div class="status"></div>
<div class="body"></div>
</div>
CSSではどう分割するかを指定する
Flexboxは縦か横かどちらかの整列ができる
CSS Gridは縦と横の整列ができる
各ブラウザの対応状況
Edge16, Chrome, Firefox, Safari, iOS Safari
IE 10+, Edge 15
IE10は誰よりも早く CSS Gridを実装してた（2012年）
IE10とIE11は古い仕様を参照している
Edgeもまた古い仕様を参照していた
IE10+ではグリッドアイテムの自動配置やグリッドエリアへの名前が付けられない
CSS Gridを使えるけど色々使えないことを把握しておくべき
polyfillはあまりオススメではない
CSS Gridを理解するための基礎知識
グリッドコンテナとグリッドアイテム
コンテナ＝親
アイテム＝子
グリッドコンテナ
display: grid;
display: inline-grid;
グリッドの縦横の分割数、列行、高さとかを指定できる
グリッドアイテム
直下の子要素を「グリッドアイテム」と呼び、勝手になる（display指定とか要らない）
グリッドライン
グリッドを作った時に横方向縦方向を分割する罫線
firefoxのdev toolだとグリッドラインを見ることができる
基本的には目に見えない線
グリッドトラック
縦・横のつらなり
grid-template-columnsやgrid-template-rowsプロパティ
グリッドセル
行のグリッドトラックと列のグリッドトラックが交差する場所
グリッドエリア
複数の行と列が交差する場所
3行2列に分割して、左列と右列で違う行数にしたい時とかに使う？
grid-template-areasでアスキーアートみたいに指定する
グリッドエリアと名前付きグリッドライン
CSS GridとFlexboxをどう使い分けるか
CSS Gridが向いているものを理解する
Flexboxが向いているものを理解する
実際のウェブサイトのココで使う
CSS Grid
グリッドレイアウトに向いている
大きい部分で言えば、ウェブサイトの大枠
ヘッダー、コンテンツ、フッターとか
小さい部分で言えば、アイテムリストでアイテムをポコポコ配置する時
Flexboxが向いているもの
横とか縦に並ぶ直線的なUIが向いている
タブとか、サイドメニューとか、ページ送りとか、パンくずリストとか、
例えばパンくずが2段まで伸びた時とか、上と下の段で列を揃える必要がないので
横か縦どちらかに揃える時にFlexboxよさそう
例
サイトの大枠のレイアウト
CSS Grid
リスト部分
CSS Grid
Flexboxでもできるけど、列で揃えてほしいとか言われそう
UI部分（検索フォーム、パンくず、タブ）
Flexbox
文章と画像部分のレイアウト
float
テキストの回り込みとかはfloat
回り込みせずに左右で分けるならCSS Gridがよい
つまり
大枠
CSS Grid
リスト
CSS Grid or Flexbox
UIのレイアウト
Flexbox
画像と文章
float
場合によってCSS Grid or Flexbox
まとめ
CSS Gridはもう使えると思ってよい
Electronとかやるならぜひ使ってほしい
Q&A
基本的には行と列の幅を決めるだけで済む
1行目1列目のセルに入れるという発想ではない
1本目の線から2本目の線の間に入れる、1本目から3本目の間に入れるみたいなこともできる