Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js を使って Grid System を実装した話
Search
t0yohei
October 26, 2023
Technology
2
6.7k
Vue.js を使って Grid System を実装した話
VueFes 2023 のセッション、「Vueを使ってGrid Systemを実装した話」の登壇資料です。
t0yohei
October 26, 2023
Tweet
Share
More Decks by t0yohei
See All by t0yohei
Vue の Input における State は親で持つべきか子で持つべきか
t0yohei
0
8
負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話
t0yohei
0
1.9k
プログラミング入門に失敗した話
t0yohei
0
150
【ITエンジニアが怪我で労災!?】 仕事中に足の小指が骨折したら起きること
t0yohei
0
340
Protocol Buffers で Web APIのスキーマ駆動開発がしたい
t0yohei
0
160
Ruby と JavaScript の違い( Function 編)
t0yohei
1
290
副業のノウハウ
t0yohei
0
180
ちょっとしたRubyの話
t0yohei
1
450
自作キーボード入門してみた
t0yohei
0
120
Other Decks in Technology
See All in Technology
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
短縮URLをお手軽に導入しよう
nakasho
0
140
偏光画像処理ライブラリを作った話
elerac
1
160
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
680
Reading Code Is Harder Than Writing It
trishagee
2
120
AIエージェント元年
shukob
0
150
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
190
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
550
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
200
AIエージェント元年@日本生成AIユーザ会
shukob
0
140
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
160
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.3k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Why Our Code Smells
bkeepers
PRO
336
57k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for humans not robots
tammielis
250
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
It's Worth the Effort
3n
184
28k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Adopting Sorbet at Scale
ufuk
74
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
Vue.js を使って Grid System を 実装した話 Vue Fes Japan 2023
- 2023/10/28 @t0yohei / CrowdWorks
Grid System を使ったことがある、 なんとなく知っている方
自己紹介 • とよへい ( @t0yohei ) • 株式会社クラウドワークス ◦ Web
エンジニア • アニメとコーヒーが好き • Vue.js / Ruby
VueFes 1 週間前、 あることに気づいた
Grid System の実装詳細、 みんな興味あるか...?🤔
そうだ! ライブコーディングしよう!
Vue.js を使って Grid System を 実装した話 Vue Fes Japan 2023
- 2023/10/28 @t0yohei / CrowdWorks
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
完成イメージ
None
Grid System の実装パターン • float を使う • Flexbox を使う •
CSS Grid を使う
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. 初期状態
2. 12 分割の Grid を作成し、エリアを横並びに
3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
4. media query を使って、Tablet・SP 用の画面を表示する
シンプルな Grid System が 実装できた!
まとめ • Vue.js を上手く使うと、結構簡単に Grid System を作ることができる • 運用可能な Grid
System を作ろうとすると、色々検討することがあってちょ い大変 • CSS Grid を使用した Grid System はまだ少なくて、今後に期待
詳細はテックブログで! https://engineer.crowdworks.jp/e ntry/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…