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
30
◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた
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
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
410
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
クラシルを支える技術と組織
rakutek
0
190
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.3k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
390
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
CSC509 Lecture 04
javiergs
PRO
0
300
CSC305 Lecture 04
javiergs
PRO
0
260
CSC305 Lecture 01
javiergs
PRO
1
400
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
550
開発生産性を上げるための生成AI活用術
starfish719
1
180
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
1
150
Featured
See All Featured
Building an army of robots
kneath
306
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Optimizing for Happiness
mojombo
379
70k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
KATA
mclloyd
32
15k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Designing for humans not robots
tammielis
254
25k
How STYLIGHT went responsive
nonsquared
100
5.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Docker and Python
trallard
46
3.6k
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 使いたい
それぞれの特性を理解して 使っていきましょう まとめ