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.3k
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.5k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.4k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
kandai
1
1.6k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.4k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
1.1k
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
540
CSS組版で技術書を作った話
kandai
0
410
Web技術だけで作るQRコードリーダー
kandai
2
2.1k
Other Decks in Programming
See All in Programming
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Select API from Kotlin Coroutine
jmatsu
1
190
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
ニーリーにおけるプロダクトエンジニア
nealle
0
600
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
Java on Azure で LangGraph!
kohei3110
0
170
ふつうの技術スタックでアート作品を作ってみる
akira888
0
180
XP, Testing and ninja testing
m_seki
3
210
Benchmark
sysong
0
270
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
520
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Practical Orchestrator
shlominoach
188
11k
Bash Introduction
62gerente
614
210k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Faster Mobile Websites
deanohume
307
31k
How GitHub (no longer) Works
holman
314
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
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 使いたい
それぞれの特性を理解して 使っていきましょう まとめ