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.2k
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.6k
プログラミング入門に失敗した話
t0yohei
0
140
【ITエンジニアが怪我で労災!?】 仕事中に足の小指が骨折したら起きること
t0yohei
0
250
Protocol Buffers で Web APIのスキーマ駆動開発がしたい
t0yohei
0
120
Ruby と JavaScript の違い( Function 編)
t0yohei
1
200
副業のノウハウ
t0yohei
0
130
ちょっとしたRubyの話
t0yohei
1
340
自作キーボード入門してみた
t0yohei
0
100
Other Decks in Technology
See All in Technology
データベース02: データベースの概念
trycycle
0
180
Cracking the KubeCon CfP
inductor
2
270
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
300
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
200
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
4
37k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
120
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.5k
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
3
620
Featured
See All Featured
The Cult of Friendly URLs
andyhume
74
5.7k
GraphQLとの向き合い方2022年版
quramy
33
12k
A designer walks into a library…
pauljervisheath
201
23k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Designing for Performance
lara
602
67k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
Bash Introduction
62gerente
605
210k
A Modern Web Designer's Workflow
chriscoyier
689
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Music & Morning Musume
bryan
41
5.6k
YesSQL, Process and Tooling at Scale
rocio
165
13k
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…