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
Bounded Context: Problem or Solution?
ewolff
1
170
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
210
トレードオフスライダーにおける品質について考えてみた
suzuki_tada
3
200
もし今からGraphQLを採用するなら
kazukihayase
9
4.4k
日本語プログラミングとSpring Bootアプリケーション開発 #kanjava
yusuke
2
370
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
160
Zenn のウラガワ ~エンジニアのアウトプットを支える環境で Google Cloud が採用されているワケ~ #burikaigi #burikaigi_h
kongmingstrap
19
7.1k
[2024年10月版] Notebook 2.0のご紹介 / Notebook2.0
databricksjapan
0
1.7k
Kubernetesでメールの大量配信をしている話/k8sjp-20250205
hfukamachi
0
180
Ask! NIKKEI RAG検索技術の深層
hotchpotch
10
1.7k
GitLab SelfManagedをCodePipelineのソースに設定する/SetGitLabSelfManagedtoCodePipeline
norihiroishiyama
1
120
DeepSeek on AWS
hariby
1
170
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Speed Design
sergeychernyshev
25
760
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
How to Ace a Technical Interview
jacobian
276
23k
Done Done
chrislema
182
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
128
19k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Thoughts on Productivity
jonyablonski
69
4.4k
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…