$30 off During Our Annual Pro Sale. View Details »

Vue.js を使って Grid System を実装した話

t0yohei
October 26, 2023

Vue.js を使って Grid System を実装した話

VueFes 2023 のセッション、「Vueを使ってGrid Systemを実装した話」の登壇資料です。

t0yohei

October 26, 2023
Tweet

More Decks by t0yohei

Other Decks in Technology

Transcript

  1. Vue.js を使って Grid System を
    実装した話
    Vue Fes Japan 2023 - 2023/10/28
    @t0yohei / CrowdWorks

    View Slide

  2. Grid System を使ったことがある、
    なんとなく知っている方 󰢧

    View Slide

  3. 自己紹介
    ● とよへい ( @t0yohei )
    ● 株式会社クラウドワークス
    ○ Web エンジニア
    ● アニメとコーヒーが好き
    ● Vue.js / Ruby

    View Slide

  4. VueFes 1 週間前、
    あることに気づいた

    View Slide

  5. Grid System の実装詳細、
    みんな興味あるか...?🤔

    View Slide

  6. そうだ!
    ライブコーディングしよう!

    View Slide

  7. Vue.js を使って Grid System を
    実装した話
    Vue Fes Japan 2023 - 2023/10/28
    @t0yohei / CrowdWorks

    View Slide

  8. Vue.js を使って Grid System を
    作ってみよう
    Vue Fes Japan 2023 - 2023/10/28
    @t0yohei / CrowdWorks

    View Slide

  9. ということで、
    Grid System を作っていこう

    View Slide

  10. そもそも Grid System って?

    View Slide

  11. Grid System の定義
    > グリッドシステムとは、画面上に架空の縦
    横線をガイドラインとして引きブロックごとに
    文字や図版を配置することでデザインのシン
    プルな美しさを引き出す手法
    https://store.bookandsons.com/?pid=146801609

    View Slide

  12. 実装における Grid System (Bootstrap の場合)
    > グリッドシステムは、12カラムのシステムと5段階のレスポンシブ、Sassとmixin、いくつかの定
    義されたクラスですべての図形とサイズのレイアウトを作成可能です
    > グリッドシステムは、一連のコンテナ、行、列を使用してコンテンツをレイアウトし、整列させま

    https://getbootstrap.jp/docs/5.3/layout/grid/

    View Slide

  13. 実装における Grid System (Bootstrap 風) に必要な要素
    ● N 個(ex. 12 個)のカラムで画面を分割できる
    ● カラム数の指定で、縦・横のコンテンツレイアウトを制御
    できる
    ● M 段階(ex. 5 段階)のレスポンシブな画面にできる

    View Slide

  14. 今回作る Grid System (Bootstrap 風)
    PC(Large) TBL(Medium) SP(Small)
    画面サイズ >= 1200 px >= 576 px < 576 px
    総カラム数 12 12 12

    View Slide

  15. 完成イメージ

    View Slide

  16. View Slide

  17. Grid System の実装パターン
    ● float を使う
    ● Flexbox を使う
    ● CSS Grid を使う

    View Slide

  18. Grid System の実装パターン
    ● float を使う
    ● Flexbox を使う
    ● CSS Grid を使う

    View Slide

  19. ここから
    ライブコーディング

    View Slide

  20. 手順
    1. 初期状態の確認
    2. 12 分割の Grid を作成し、エリアを横並びに
    3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
    4. media query を使って、Tablet・SP 用の画面を表示する
    a. Tablet の画面サイズでは横 2 エリア、縦 3 エリアに
    b. SP の画面サイズでは横 1 エリア、縦 6 エリアに

    View Slide

  21. 1. 初期状態の確認

    View Slide

  22. 2. 12 分割の Grid を作成し、エリアを横並びに

    View Slide

  23. 3. PC の画面サイズでは横 3 エリア、縦 2 エリアに

    View Slide

  24. 4. media query を使って、
    Tablet・SP 用の画面を表示する

    View Slide

  25. a. Tablet の画面サイズでは横 2 エリア、縦 3 エリアに

    View Slide

  26. b. SP の画面サイズでは横 1 エリア、縦 6 エリアに

    View Slide

  27. 1. 初期状態

    View Slide

  28. 2. 12 分割の Grid を作成し、エリアを横並びに

    View Slide

  29. 3. PC の画面サイズでは横 3 エリア、縦 2 エリアに

    View Slide

  30. 4. media query を使って、Tablet・SP 用の画面を表示する

    View Slide

  31. シンプルな Grid System が
    実装できた!

    View Slide

  32. まとめ
    ● Vue.js を上手く使うと、結構簡単に Grid System を作ることができる
    ● 運用可能な Grid System を作ろうとすると、色々検討することがあってちょ
    い大変
    ● CSS Grid を使用した Grid System はまだ少なくて、今後に期待

    View Slide

  33. 詳細はテックブログで!
    https://engineer.crowdworks.jp/e
    ntry/2023/10/28/114403

    View Slide

  34. ご清聴
    ありがとうございました!

    View Slide

  35. Appendix
    ● サンプルコード
    ● グリッドシステム グラフィックデザインのために
    ● Bootstrap Grid system
    ● Chakra UI Grid

    View Slide

  36. 運用可能な Grid System を作る上で検討が必要なこと
    ● 画面サイズを何パターンにするか (Large, Medium, Small, etc…)
    ○ それぞれ何 px を境界値(breakpoint)にするか
    ● 各画面サイズにおいて
    ○ 総カラム数は 12 カラムにするか、別にするか
    ○ カラム間の間隔(Gutter)を縦横それぞれ何 px にするか。また可変にするかどうか。
    ● Grid のネストはどういう扱いにするか
    ● 各種オプションの導入するか
    ○ Order: カラムの順番を入れ替える
    ○ Offset(Start): カラムの開始位置を指定できる
    ● etc…

    View Slide