CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう

Transcript

1. View Slide

2. @tonkotsuboy_com
   鹿野 壮
   

   View Slide

3. View Slide

4. 01
   そもそも、CSS Gridとは？
   

   View Slide

5. CSS Gridとは
   「行列」を使ったレイアウトのこと
   

   View Slide

6. View Slide

7. View Slide

8. エリア名を指定して要素を柔軟に配置
   

   View Slide

9. 行列を繰り返したり、隙間をつくる
   

   View Slide

10. 行・列数を自動で変更したり、要素を敷き詰めたりする
    

    View Slide

11. 従来のブラウザで対応していたのは
    CSS Grid Layout Level 1
    https://www.w3.org/TR/css-grid-1/
    

    View Slide

12. 従来の仕様だと難しいレイアウトがあった
    

    View Slide

13. ウインドウサイズ: 大
    カードの列数を可変にし、カードの各要素の高さを揃えたい
    

    View Slide

14. ウインドウサイズ: 小
    カードの列数を可変にし、カードの各要素の高さを揃えたい
    

    View Slide

15. 従来: CSSだけでは実現が不可能だった
    

    View Slide

16. JavaScriptを使って、行ごとの最大の高さを計算する
    各行の高さを指定する
    ウインドウサイズが変わるごとに（あるいはブレイクポイントを
    跨ぐごとに）高さを計算し直す
    処理の負荷が高く、パフォーマンスの悪化につながる
    従来: JavaScriptを使っていた
    

    View Slide

17. 02
    行列の入れ子が全ブラウザで可能になった
    

    View Slide

18. ① 親行列をつくる
    

    View Slide

19. ② 子行列をつくる
    

    View Slide

20. ③ 親行列に子行列を配置する
    

    View Slide

21. 行列の入れ子が可能な
    CSS Grid Layout Level 2
    subgrid
    https://www.w3.org/TR/css-grid-2/
    

    View Slide

22. 2023年9月にChrome・Edgeが対応し、全ブラウザ対応
    https://caniuse.com/css-subgrid
    

    View Slide

23. Demo
    https://codepen.io/tonkotsuboy/pen/VwqmzeJ
    

    View Slide

24. HTML
    
    
    
    
    
    
    
    1.HTMLのコーディング（親Grid）
    

    View Slide

25. HTML
    
    Feeling Good
    class="image" src="
    画像パス"
    />
    I AM A CAT. As yet I have no name.
    Goods
    
    1. HTMLのコーディング（子Grid）
    

    View Slide

26. CSS
    .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
    2. 親要素をCSS Gridで配置する
    

    View Slide

27. CSS
    .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    }
    3. 子要素をCSS Gridで配置する
    

    View Slide

28. CSS
    .card-container {
    gap: 40px;
    }
    4. 親行列で要素間の隙間（gap）を指定する
    

    View Slide

29. CSS
    /*
    親のgap */
    .card-container {
    gap: 40px;
    }
    /*
    子のgap */
    .card {
    row-gap: 12px;
    }
    5. 子行列で要素間の隙間（gap）を指定する
    

    View Slide

30. DevToolでデバッグする
    

    View Slide

31. 03
    Subgridの活用例
    

    View Slide

32. 画像のキャプションの高さを揃える
    https://codepen.io/michellebarker/pen/abVqwoK
    

    View Slide

33. 12分割グリッドシステムを作る
    https://codepen.io/brianhaferkamp/pen/XWXEbPp
    

    View Slide

34. 04
    まとめ
    

    View Slide

35. CSS Gridは行列を使ったレイアウト
    Subgridを使えば、行列を入れ子にできる
    2023年9月から、Chrome・Edge含めて全ブラウザ対応
    さまざまな行列レイアウトに活用できる
    

    View Slide

36. 新しい知識を取り入れて
    楽しくラクにウェブ制作をしましょう
    

    View Slide

37. 記事でも詳しく解説しています
    https://zenn.dev/moneyforward/articles/css-subgrid-all-browsers
    

    View Slide

38. View Slide