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
マージンを使わずに Webサイト構築してみた
Search
Daichi
June 22, 2023
Programming
0
3.3k
マージンを使わずに Webサイト構築してみた
2023年6月22日に行われたSendai Frontend Meetup #9で使用したスライドです。
Daichi
June 22, 2023
Tweet
Share
More Decks by Daichi
See All by Daichi
プロダクト内で混在するUIと技術スタック、コーディングエージェントで整理できるか?
kandai
0
35
◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた
kandai
0
1.7k
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.5k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.5k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
kandai
1
1.7k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.5k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
1.1k
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
570
CSS組版で技術書を作った話
kandai
0
430
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
850
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
XP, Testing and ninja testing ZOZ5
m_seki
3
670
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
940
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
590
Serena MCPのすすめ
wadakatu
4
1k
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
1
370
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
Devoxx BE - Local Development in the AI Era
kdubois
0
130
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
400
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
BBQ
matthewcrist
89
9.8k
Navigating Team Friction
lara
190
15k
Statistics for Hackers
jakevdp
799
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Code Review Best Practice
trishagee
72
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
4 Signs Your Business is Dying
shpigford
185
22k
Scaling GitHub
holman
463
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Transcript
2023.06.22 @ Sendai Frontend Meetup #9 Daichi Kanke (@kan_dai) マージンを使わずに
Webサイト構築してみた
Daichi Kanke 株式会社プレイド デザインエンジニア 株式会社TAM フロントエンドアドバイザー kan_dai KanDai 宮城県 PWA
Night / 仙台フロントエンドUG
唐突な思いつき(半分ネタで半分本気)
やってみた
• 元のデザインを(できるだけ)崩さない • リセットで使ってるマージンは許容 • ライブラリで使ってるマージンも許容 • 対象ブラウザはMacのChromeのみでスマホはエミュレーター (でもIE以外は大体見れるはず )
ルール マージンを使わない
https://developer.mozilla.org/ja/docs/Web/CSS/gap マージンを使わずにWebのレイアウトってできるの?
https://webdesigner-go.com/coding-practice/ 無料コーディング練習所さんの素材を使わせていただきました
https://pon-design.netlify.app/
None
いきなり結論
いきなり結論 できました
None
https://pon-design-kandai.netlify.app/ GitHubのリポジトリは再配布っぽくなるかもなので非公開にしてます
でもおすすめは しません
よかったところ
規則的な余白のパターン
規則的な余白のパターン
画面サイズで縦並びと横並びが変わるパターン
画面サイズで縦並びと横並びが変わるパターン(gap)
ずっと横並びパターン • 左右の要素が入れ替わっても修正の必要がないので変更に強い • 子要素にスタイルを当てる必要がないのでクラス名をつけなくてもよくなる
微妙だったところ
記事などの文章コンテンツ • 余白が一定じゃない ◦ 大抵は見出しや文章など要素によって決まる • どんなHTMLが入ってくるかわからない ◦ 組み合わせパターンがめちゃくちゃある
◦ エディタによる
縦積みレイアウトで 規則的な余白じゃない • 無駄にHTMLの階層が 深くなる • 無駄にflexやgridが 増える
display: inline っぽい 挙動にしたい • むずい
素直に auto 使いたい
それぞれの特性を理解して 使っていきましょう まとめ