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