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
3
負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話
t0yohei
0
1.9k
プログラミング入門に失敗した話
t0yohei
0
150
【ITエンジニアが怪我で労災!?】 仕事中に足の小指が骨折したら起きること
t0yohei
0
330
Protocol Buffers で Web APIのスキーマ駆動開発がしたい
t0yohei
0
160
Ruby と JavaScript の違い( Function 編)
t0yohei
1
280
副業のノウハウ
t0yohei
0
170
ちょっとしたRubyの話
t0yohei
1
440
自作キーボード入門してみた
t0yohei
0
120
Other Decks in Technology
See All in Technology
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
12
3.7k
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
200
消し忘れリソースゼロへ!私のResource Explorer活用法
cuorain
0
140
“自分”を大切に、フラットに。キャリアチェンジしてからの一年 三ヶ月で見えたもの。
maimyyym
0
300
トレードオフスライダーにおける品質について考えてみた
suzuki_tada
3
180
Re:Define 可用性を支える モニタリング、パフォーマンス最適化、そしてセキュリティ
pyama86
9
5.6k
Platform EngineeringがあればSREはいらない!? 新時代のSREに求められる役割とは
mshibuya
2
3.9k
Site Reliability Engineering on Kubernetes
nwiizo
6
4.4k
横断SREの立ち上げと、AWSセキュリティへの取り組みの軌跡
rvirus0817
3
4.5k
[TechNight #86] Oracle GoldenGate - 23ai 最新情報&プロジェクトからの学び
oracle4engineer
PRO
1
170
private spaceについてあれこれ調べてみた
operando
1
160
エラーバジェット枯渇の原因 - 偽陽性との戦い -
phaya72
1
100
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
990
The Pragmatic Product Professional
lauravandoore
32
6.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Code Review Best Practice
trishagee
65
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Gamification - CAS2011
davidbonilla
80
5.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Music & Morning Musume
bryan
46
6.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Done Done
chrislema
182
16k
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…