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
5.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.js でリプレイスした話
t0yohei
0
1.7k
プログラミング入門に失敗した話
t0yohei
0
140
【ITエンジニアが怪我で労災!?】 仕事中に足の小指が骨折したら起きること
t0yohei
0
290
Protocol Buffers で Web APIのスキーマ駆動開発がしたい
t0yohei
0
130
Ruby と JavaScript の違い( Function 編)
t0yohei
1
230
副業のノウハウ
t0yohei
0
150
ちょっとしたRubyの話
t0yohei
1
370
自作キーボード入門してみた
t0yohei
0
110
Other Decks in Technology
See All in Technology
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Visualization
eitanlees
139
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
How GitHub (no longer) Works
holman
305
140k
Web development in the modern age
philhawksworth
203
10k
Navigating Team Friction
lara
181
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
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…