Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Grid Layout の基礎

286 views

Published on

社内勉強会用に作成したCSS Grid Layoutについての基礎的な内容をまとめたスライドです

Published in: Internet
  • Be the first to comment

  • Be the first to like this

CSS Grid Layout の基礎

  1. 1. CSS 2018. 07.12 [Thu] Koji Kobayashi Grid Layout 1
  2. 2. Agenda 1. はじめに 2. 現状のレイアウトの問題 3. CSS Grid Layoutの概要 4. 対応ブラウザ 5. 基本的な使い方 6. デモ(ライブコーディング) 7. 所感 8. おすすめリンク集 2
  3. 3. 3 【アンケート】あてはまるものに ✋ 1. CSS Grid Layout なら任せろ 2. 使ったことがある(実務関係なし) 1. はじめに
  4. 4. 上記理由により、あまり詳しい話はできません。 ただCSS Grid Layoutはこれまでのレイアウトに絡む問題をいろいろと解決してくれ、今後デファ クトスタンダードになりうる機能だと思いますので、本勉強会を通じて雰囲気だけでも感じ取っ てもらえたらと思います。 4 ● 使用歴 10日🔰 ● 実務での使用経験なし My Skill Of CSS Grid Layout 1. はじめに
  5. 5. レイアウトを実現するために、HTML上で要素の順番を、本来あるべき文書構造とは異なるものに せざるを得なかったり、レイアウト用のdivを入れるなどの必要があった。 5 HTMLとCSSの分離ができない 2. 現状のレイアウトの問題 さまざまなCSSテクニックを駆使したり、JavaScriptを使ったり力技が必要だった。 レスポンシブでウィンドウサイズごとに要素の並び順が変更となるとさらに複雑化。 雑誌風などの複雑なレイアウトを表現しにくかった
  6. 6. 3. CSS Grid Layout の概要 6 ● 正式名称:CSS Grid Layout Module ● 2次元グリッドベースのレイアウトシステムを定義する新しい仕様 ○ display: grid; が指定された親要素にグリッドレイアウト情報を定義し、子要素では、 そのグリッドのどこに配置されるかを定義する ● 2017/12/14以降、W3Cでは勧告候補になっている ● IE10から使える!
  7. 7. 4. 対応ブラウザ 7https://caniuse.com/#search=css%20grid
  8. 8. 4. 対応ブラウザ 8 postcss.config.js const autoprefixer = require('autoprefixer') module.exports = { plugins: [ autoprefixer({ grid: true }) ] }; ● IE10、11に対応するには、ただベンダープレ フィックスを加えるだけは不十分。 (対応しているプロパティや仕様に違いが多 い) ● Autoprefixer(version 8以上)を使えば、IEで 本来は利用できないプロパティーでも互換性 のあるコードに変換してくれる (optionで grid: true にする必要有)
  9. 9. 5. 基本的な使い方 9 Header Main Visual Section01 Section02 News Sidemenu Footer Portrait Header Main Visual Section01 News Sidemenu Footer Section02 Landscape
  10. 10. 5. 基本的な使い方 10 Header Main Visual Section01 News Sidemenu Footer Section02 1 2 3 4 1 2 3 4 5 6
  11. 11. 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行目 ・ ・ ・ 5. 基本的な使い方
  12. 12. 12 5. 基本的な使い方 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. 13. 13 5. 基本的な使い方 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; } .section02 { grid-column: 2 / -1; grid-row: 4; } .footer { grid-column: 1 / -1; grid-row: -2; }
  14. 14. 14 5. 基本的な使い方 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; } .section02 { grid-column: 2 / -1; grid-row: 4; } .footer { grid-column: 1 / -1; grid-row: -2; } display: grid; ● グリッド全体を覆う要素に指定 ● グリッドコンテナを形成(詳細は後述) ● 直下の子要素はグリッドアイテムになる
  15. 15. 15 5. 基本的な使い方 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; } .section02 { grid-column: 2 / -1; grid-row: 4; } .footer { grid-column: 1 / -1; grid-row: -2; } grid-template-columns ● グリッドの列に関する設定 ● 列ごとに幅を設定する ○ リピートするには repeat(count, width) ● 初期値:none ● 設定可能値: auto, px, %, fr, repeat(), etc...
  16. 16. 16 5. 基本的な使い方 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; } .section02 { grid-column: 2 / -1; grid-row: 4; } .footer { grid-column: 1 / -1; grid-row: -2; } grid-template-rows ● グリッドの行に関する設定 ● 他は基本的にgrid-template-columnsと同じ grid-template-rows: repeat(5, auto); 下記のように書くことも可能
  17. 17. 17 5. 基本的な使い方 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; } .section02 { grid-column: 2 / -1; grid-row: 4; } .footer { grid-column: 1 / -1; grid-row: -2; } gap ● グリッドの行、列のすき間を一括設定 ○ 行だけ: row-gap ○ 列だけ: column-gap ● 初期値: row-gap: normal; column-gap: normal; ● 設定可能値: px, em, cm, %, calc(), etc... ● grid-gap から gapへ変更された
  18. 18. 18 5. 基本的な使い方 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; } .section02 { grid-column: 2 / -1; grid-row: 4; } .footer { grid-column: 1 / -1; grid-row: -2; } grid-column ● グリッドコンテナの子要素(グリッドアイ テム)に、グリッド上のどの列に配置する か範囲を設定 ● 開始位置だけ: grid-column-start 終了位置だけ: grid-column-end ● 初期値: grid-column-start: normal; grid-column-end: normal; ● 設定可能値: auto, <integer>, span, etc...
  19. 19. 19 5. 基本的な使い方 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; } .section02 { grid-column: 2 / -1; grid-row: 4; } .footer { grid-column: 1 / -1; grid-row: -2; } grid-row ● グリッドコンテナの子要素(グリッドアイ テム)に、グリッド上のどの行に配置する か範囲を設定 ● 開始位置だけ: grid-row-start 終了位置だけ: grid-row-end ● 初期値: grid-row-start: normal; grid-row-end: normal; ● 設定可能値: auto, <integer>, span, etc...
  20. 20. 20 5. 基本的な使い方 CSS Grid Layoutに 登場する大事な用語 ● グリッドコンテナ ● グリッドアイテム ● グリッドライン ● グリッドトラック ● グリッドセル ● グリッドエリア 1 2 3 4 1 2 3 4 5 6
  21. 21. 5. 基本的な使い方 グリッドコンテナ 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
  22. 22. 5. 基本的な使い方 グリッドアイテム グリッドコンテナの直下の子要素。 分割されたグリッドのどこに配置するか等 を指定する。 利用可能プロパティ 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
  23. 23. 5. 基本的な使い方 グリッドライン グリッドを横方向・縦方向に分割する 罫線。太さがなく見た目には現れない。 縦の線がcolumn line、 横の線がrow line。 マイナス値での指定も可能。 1 2 3 4 1 2 3 4 5 6 -1-2-3-4 -6 -5 -4 -3 -2 -1
  24. 24. 5. 基本的な使い方 グリッドトラック 各列や行を示す。 (グリッドトラックの数やサイズを指 定するためには、グリッドコンテナに 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
  25. 25. 5. 基本的な使い方 グリッドセル 行のグリッドトラックと、列のグリッ ドトラックが交差する箇所。 (今回の例だと、15個のグリッドセル がある) 1 2 3 4 1 2 3 4 5 6 -1-2-3-4 -6 -5 -4 -3 -2 -1
  26. 26. 5. 基本的な使い方 グリッドエリア 複数の、行と列のグリッドトラックが 交差する範囲。 グリッドコンテナに 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
  27. 27. 5. 基本的な使い方 不使用(元のCSS) .container { display: grid; grid-template-columns: 300px 1fr 200px; grid-template-rows: repeat(5, 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; } .section02 { grid-column: 2 / -1; grid-row: 4; } .footer { grid-column: 1 / -1; grid-row: -2; } 使用 .container { display: grid; grid-template-columns: 300px 1fr 200px; grid-template-rows: repeat(5, auto); 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 を使用すると、グリッドアイテムのプロパティ ごとに配置の指定をしなくて済む。 複雑な構造の時におすすめ。
  28. 28. 6. デモ(ライブコーディング) 28 https://kde-space.github.io/css_grid_layout/demo01/
  29. 29. 29 ● 複雑なレイアウト、レスポンシブを簡単に実現できてとてもイイ ● 今までと比べるとはるかにHTMLがシンプルになる ● 設定できる項目はまだまだたくさんあるので、もっと便利に使えるはず。 その分、全部使いこなせるようになるのは少し大変 ● 既存のレイアウト用のプロパティとうまく使い分けたい ● デバッグにはFirefoxのデベロッパーツールが今のところ一番良い 7. 所感
  30. 30. 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. 31. 31 Thanks!!ご静聴ありがとうございました

×