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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Daichi
June 22, 2023
Programming
3.6k
0
Share
マージンを使わずに Webサイト構築してみた
2023年6月22日に行われたSendai Frontend Meetup #9で使用したスライドです。
Daichi
June 22, 2023
More Decks by Daichi
See All by Daichi
プロダクト内で混在するUIと技術スタック、コーディングエージェントで整理できるか?
kandai
0
260
◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた
kandai
0
2.4k
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.6k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.5k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
kandai
1
1.7k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.6k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
1.2k
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
590
CSS組版で技術書を作った話
kandai
0
460
Other Decks in Programming
See All in Programming
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
tanishiking
0
130
LM Linkで(非力な!)ノートPCでローカルLLM
seosoft
0
290
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
seitarof
3
1.3k
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
ikezoemakoto
0
310
Claude Code Skill入門
mayahoney
0
450
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
tasukuwatanabe
3
430
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
210
Java 21/25 Virtual Threads 소개
debop
0
310
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
sakuraikotone
1
1.7k
Codex CLI でつくる、Issue から merge までの開発フロー
amata1219
0
260
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
nrslib
16
3.5k
Coding as Prompting Since 2025
ragingwind
0
560
Featured
See All Featured
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
420
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
340
Java REST API Framework Comparison - PWX 2021
mraible
34
9.2k
Paper Plane
katiecoart
PRO
0
48k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
110
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Site-Speed That Sticks
csswizardry
13
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.2k
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 使いたい
それぞれの特性を理解して 使っていきましょう まとめ