マージンを使わずに Webサイト構築してみた

2023年6月22日に行われたSendai Frontend Meetup #9で使用したスライドです。

Transcript

1. 2023.06.22 @ Sendai Frontend Meetup #9 Daichi Kanke （@kan_dai） マージンを使わずに 
 Webサイト構築してみた 

2. Daichi Kanke 株式会社プレイド デザインエンジニア
 株式会社TAM フロントエンドアドバイザー kan_dai KanDai 宮城県 PWA Night / 仙台フロントエンドUG
3. 唐突な思いつき(半分ネタで半分本気) 

4. やってみた 

5. • 元のデザインを(できるだけ)崩さない • リセットで使ってるマージンは許容 • ライブラリで使ってるマージンも許容 • 対象ブラウザはMacのChromeのみでスマホはエミュレーター (でもIE以外は大体見れるはず ) ルール
 マージンを使わない
6. https://developer.mozilla.org/ja/docs/Web/CSS/gap マージンを使わずにWebのレイアウトってできるの？ 

7. https://webdesigner-go.com/coding-practice/ 無料コーディング練習所さんの素材を使わせていただきました 

8. https://pon-design.netlify.app/
10. いきなり結論

11. いきなり結論
 できました
13. https://pon-design-kandai.netlify.app/ GitHubのリポジトリは再配布っぽくなるかもなので非公開にしてます
14. でもおすすめは しません
15. よかったところ 

16. 規則的な余白のパターン 

17. 規則的な余白のパターン 

18. 画面サイズで縦並びと横並びが変わるパターン 

19. 画面サイズで縦並びと横並びが変わるパターン(gap) 

20. ずっと横並びパターン 
 • 左右の要素が入れ替わっても修正の必要がないので変更に強い • 子要素にスタイルを当てる必要がないのでクラス名をつけなくてもよくなる
21. 微妙だったところ 

22. 記事などの文章コンテンツ 
 • 余白が一定じゃない ◦ 大抵は見出しや文章など要素によって決まる • どんなHTMLが入ってくるかわからない ◦ 組み合わせパターンがめちゃくちゃある ◦ エディタによる
23. 縦積みレイアウトで 
 規則的な余白じゃない 
 • 無駄にHTMLの階層が 深くなる • 無駄にflexやgridが 増える
24. display: inline っぽい 
 挙動にしたい
 • むずい
25. 素直に auto 使いたい 

26. それぞれの特性を理解して 
 使っていきましょう 
 まとめ