Slide 1
Slide 1 text
2023.06.22 @ Sendai Frontend Meetup #9
Daichi Kanke （@kan_dai）
マージンを使わずに
Webサイト構築してみた
Slide 2
Slide 2 text
Daichi Kanke
株式会社プレイド デザインエンジニア
株式会社TAM フロントエンドアドバイザー
kan_dai KanDai 宮城県
PWA Night / 仙台フロントエンドUG
Slide 3
Slide 3 text
唐突な思いつき(半分ネタで半分本気)
Slide 4
Slide 4 text
やってみた
Slide 5
Slide 5 text
● 元のデザインを(できるだけ)崩さない
● リセットで使ってるマージンは許容
● ライブラリで使ってるマージンも許容
● 対象ブラウザはMacのChromeのみでスマホはエミュレーター (でもIE以外は大体見れるはず )
ルール
マージンを使わない
Slide 6
Slide 6 text
https://developer.mozilla.org/ja/docs/Web/CSS/gap
マージンを使わずにWebのレイアウトってできるの？
Slide 7
Slide 7 text
https://webdesigner-go.com/coding-practice/
無料コーディング練習所さんの素材を使わせていただきました
Slide 8
Slide 8 text
https://pon-design.netlify.app/
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
いきなり結論
Slide 11
Slide 11 text
いきなり結論
できました
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
https://pon-design-kandai.netlify.app/
GitHubのリポジトリは再配布っぽくなるかもなので非公開にしてます
Slide 14
Slide 14 text
でもおすすめは
しません
Slide 15
Slide 15 text
よかったところ
Slide 16
Slide 16 text
規則的な余白のパターン
Slide 17
Slide 17 text
規則的な余白のパターン
Slide 18
Slide 18 text
画面サイズで縦並びと横並びが変わるパターン
Slide 19
Slide 19 text
画面サイズで縦並びと横並びが変わるパターン(gap)
Slide 20
Slide 20 text
ずっと横並びパターン
● 左右の要素が入れ替わっても修正の必要がないので変更に強い
● 子要素にスタイルを当てる必要がないのでクラス名をつけなくてもよくなる
Slide 21
Slide 21 text
微妙だったところ
Slide 22
Slide 22 text
記事などの文章コンテンツ
● 余白が一定じゃない
○ 大抵は見出しや文章など要素によって決まる
● どんなHTMLが入ってくるかわからない
○ 組み合わせパターンがめちゃくちゃある
○ エディタによる
Slide 23
Slide 23 text
縦積みレイアウトで
規則的な余白じゃない
● 無駄にHTMLの階層が
深くなる
● 無駄にflexやgridが
増える
Slide 24
Slide 24 text
display: inline っぽい
挙動にしたい
● むずい
Slide 25
Slide 25 text
素直に auto 使いたい
Slide 26
Slide 26 text
それぞれの特性を理解して
使っていきましょう
まとめ