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.2k
マージンを使わずに Webサイト構築してみた
2023年6月22日に行われたSendai Frontend Meetup #9で使用したスライドです。
Daichi
June 22, 2023
Tweet
Share
More Decks by Daichi
See All by Daichi
◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた
kandai
0
1.4k
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.5k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.4k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
kandai
1
1.6k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.5k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
1.1k
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
550
CSS組版で技術書を作った話
kandai
0
420
Web技術だけで作るQRコードリーダー
kandai
2
2.1k
Other Decks in Programming
See All in Programming
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
階層化自動テストで開発に機動力を
ickx
1
420
AIのメモリー
watany
11
970
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
NEWT Backend Evolution
xpromx
1
150
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
650
Hack Claude Code with Claude Code
choplin
8
2.8k
Reactの歴史を振り返る
tutinoko
1
110
What's new in AppKit on macOS 26
1024jp
0
170
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
150
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
140
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How to Ace a Technical Interview
jacobian
278
23k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing for Performance
lara
610
69k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
BBQ
matthewcrist
89
9.7k
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 使いたい
それぞれの特性を理解して 使っていきましょう まとめ