Slide 1
Slide 1 text
Vue.js を使って Grid System を
実装した話
Vue Fes Japan 2023 - 2023/10/28
@t0yohei / CrowdWorks
Slide 2
Slide 2 text
Grid System を使ったことがある、
なんとなく知っている方
Slide 3
Slide 3 text
自己紹介
● とよへい ( @t0yohei )
● 株式会社クラウドワークス
○ Web エンジニア
● アニメとコーヒーが好き
● Vue.js / Ruby
Slide 4
Slide 4 text
VueFes 1 週間前、
あることに気づいた
Slide 5
Slide 5 text
Grid System の実装詳細、
みんな興味あるか...？🤔
Slide 6
Slide 6 text
そうだ！
ライブコーディングしよう！
Slide 7
Slide 7 text
Vue.js を使って Grid System を
実装した話
Vue Fes Japan 2023 - 2023/10/28
@t0yohei / CrowdWorks
Slide 8
Slide 8 text
Vue.js を使って Grid System を
作ってみよう
Vue Fes Japan 2023 - 2023/10/28
@t0yohei / CrowdWorks
Slide 9
Slide 9 text
ということで、
Grid System を作っていこう
Slide 10
Slide 10 text
そもそも Grid System って？
Slide 11
Slide 11 text
Grid System の定義
> グリッドシステムとは、画面上に架空の縦
横線をガイドラインとして引きブロックごとに
文字や図版を配置することでデザインのシン
プルな美しさを引き出す手法
https://store.bookandsons.com/?pid=146801609
Slide 12
Slide 12 text
実装における Grid System (Bootstrap の場合)
> グリッドシステムは、12カラムのシステムと5段階のレスポンシブ、Sassとmixin、いくつかの定
義されたクラスですべての図形とサイズのレイアウトを作成可能です
> グリッドシステムは、一連のコンテナ、行、列を使用してコンテンツをレイアウトし、整列させま
す
https://getbootstrap.jp/docs/5.3/layout/grid/
Slide 13
Slide 13 text
実装における Grid System (Bootstrap 風) に必要な要素
● N 個(ex. 12 個)のカラムで画面を分割できる
● カラム数の指定で、縦・横のコンテンツレイアウトを制御
できる
● M 段階(ex. 5 段階)のレスポンシブな画面にできる
Slide 14
Slide 14 text
今回作る Grid System (Bootstrap 風)
PC(Large) TBL(Medium) SP(Small)
画面サイズ >= 1200 px >= 576 px < 576 px
総カラム数 12 12 12
Slide 15
Slide 15 text
完成イメージ
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Grid System の実装パターン
● float を使う
● Flexbox を使う
● CSS Grid を使う
Slide 18
Slide 18 text
Grid System の実装パターン
● float を使う
● Flexbox を使う
● CSS Grid を使う
Slide 19
Slide 19 text
ここから
ライブコーディング
Slide 20
Slide 20 text
手順
1. 初期状態の確認
2. 12 分割の Grid を作成し、エリアを横並びに
3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
4. media query を使って、Tablet・SP 用の画面を表示する
a. Tablet の画面サイズでは横 2 エリア、縦 3 エリアに
b. SP の画面サイズでは横 1 エリア、縦 6 エリアに
Slide 21
Slide 21 text
1. 初期状態の確認
Slide 22
Slide 22 text
2. 12 分割の Grid を作成し、エリアを横並びに
Slide 23
Slide 23 text
3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
Slide 24
Slide 24 text
4. media query を使って、
Tablet・SP 用の画面を表示する
Slide 25
Slide 25 text
a. Tablet の画面サイズでは横 2 エリア、縦 3 エリアに
Slide 26
Slide 26 text
b. SP の画面サイズでは横 1 エリア、縦 6 エリアに
Slide 27
Slide 27 text
1. 初期状態
Slide 28
Slide 28 text
2. 12 分割の Grid を作成し、エリアを横並びに
Slide 29
Slide 29 text
3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
Slide 30
Slide 30 text
4. media query を使って、Tablet・SP 用の画面を表示する
Slide 31
Slide 31 text
シンプルな Grid System が
実装できた！
Slide 32
Slide 32 text
まとめ
● Vue.js を上手く使うと、結構簡単に Grid System を作ることができる
● 運用可能な Grid System を作ろうとすると、色々検討することがあってちょ
い大変
● CSS Grid を使用した Grid System はまだ少なくて、今後に期待
Slide 33
Slide 33 text
詳細はテックブログで！
https://engineer.crowdworks.jp/e
ntry/2023/10/28/114403
Slide 34
Slide 34 text
ご清聴
ありがとうございました！
Slide 35
Slide 35 text
Appendix
● サンプルコード
● グリッドシステム グラフィックデザインのために
● Bootstrap Grid system
● Chakra UI Grid
Slide 36
Slide 36 text
運用可能な Grid System を作る上で検討が必要なこと
● 画面サイズを何パターンにするか (Large, Medium, Small, etc…)
○ それぞれ何 px を境界値(breakpoint)にするか
● 各画面サイズにおいて
○ 総カラム数は 12 カラムにするか、別にするか
○ カラム間の間隔(Gutter)を縦横それぞれ何 px にするか。また可変にするかどうか。
● Grid のネストはどういう扱いにするか
● 各種オプションの導入するか
○ Order: カラムの順番を入れ替える
○ Offset(Start): カラムの開始位置を指定できる
● etc…