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
Swift Concurrency - 状態監視の罠
objectiveaudio
2
520
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
450
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
870
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
910
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Leading Effective Engineering Teams in the AI Era
addyosmani
6
440
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
250
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Featured
See All Featured
A Tale of Four Properties
chriscoyier
161
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Typedesign – Prime Four
hannesfritz
42
2.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Designing Experiences People Love
moore
142
24k
The Cost Of JavaScript in 2023
addyosmani
55
9k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Testing 201, or: Great Expectations
jmmastey
45
7.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 使いたい
それぞれの特性を理解して 使っていきましょう まとめ