CSS 余白をマスターする margin/padding 編

配信動画はこちら
https://www.youtube.com/watch?v=dn_QYEeMvkU&feature=youtu.be

もし良かったらムーザルちゃんねるのチャンネル登録お願いします！
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_book
zaru
https://twitter.com/zaru

Transcript

1. YouTube Live (2020.11.12 Thur. 21:00~)
2. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近の仕事は figma で画 面設計をつくることで す。英語の勉強してる。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします！
3. 今日話すこと • ボックスモデルについて • margin の相殺 • block と inline の違い • auto と negative • margin 上か下か議論 • UI パーツ余白設計 • 論理プロパティについて
4. ボックスモデル
5. CSS のボックスモデル
6. width はどこまで？ CSS クイズ CSS はモダンブラウザ標準のままとする ❹ コンテンツだけ ❸ パディング含む ❷ ボーダー含む ❶ マージン含む
7. width は box-sizing で変わる box-sizing: content-box 標準 box-sizing: border-box 伝統 width はコンテンツ領域のみの寸 法となる。padding や border を 考慮する必要がある width は border を含んだ寸法と なる。見た目通りに幅を指定でき るので感覚的で使いやすい ( height )
8. margin の相殺
9. ぶつかる margin は相殺される .box1 { background: aqua; margin-bottom: 50px; } .box2 { background: hotpink; margin-top: 25px; } CSS <div class="box1">Box1</div> <div class="box2">Box2</div> HTML ??px
10. ぶつかる margin は相殺される .box1 { background: aqua; margin-bottom: 50px; } .box2 { background: hotpink; margin-top: 25px; } CSS <div class="box1">Box1</div> <div class="box2">Box2</div> HTML 50px 隣接する DIV の margin は数値が大き い方が採用される。そのため、50px の margin になる
11. 親子の margin はどうなる？ .parent1 { background: aqua; margin-top: 25px; } .child1 { background: hotpink; margin-top: 50px; } CSS <div class="parent1"> <div class="child1">child1</div> </div> HTML CSS クイズ ??px ??px
12. 親子の margin も相殺される .parent1 { background: aqua; margin-top: 25px; } .child1 { background: hotpink; margin-top: 50px; } CSS <div class="parent1"> <div class="child1">child1</div> </div> HTML CSS クイズ 50px 0px 上記例の HTML/CSS だと実際に描画されるのはこう いう感じ。child1 の margin-top 50px が使われ、 親子の DIV は上辺がくっつく
13. 止める要素があれば相殺されない 何もなければ子の margin が親を突き 抜けてしまう 親に padding や border など子を 止める要素があれば突き抜けず、両 方の margin が適用される padding border
14. block と inline の違い
15. inline は左右のみ影響する display: block display: inline block 要素はボックス周りへの影響を与える inline 要素は自身のボックスにのみ影響を与 える。例外は左右の margin は適用される inline-block にすれば inline のように振る 舞いつつ block と同じく上下への margin が適用される
16. HTML の block と CSS の block HTML におけるブロック要素・インラ イン要素は、HTML5 では存在せず、 もっと細かい要素に分割されている <div> ブロック要素 <span> インライン要素 CSS ではレイアウトとしてのブロック 要素・インライン要素などが定義され ている display: block ブロック要素 display: inline インライン要素 フローコンテンツ Tips
17. auto と negative
18. auto はいい感じにやる auto はブラウザがいい感じにやってくれる便利なもの で代表的な使い方は要素の真ん中よせ。 ただ 2020 現代では display: flex; justify-content: center; が使えるのであまり使わない…。 .auto { width: 200px; margin: auto; } CSS
19. negative でカバー表現 親要素と同じ幅 まで広げたいなぁ
20. negative でカバー表現 margin-left: -20px .parent { background: aqua; padding: 20px; } .child { background: hotpink; margin-left: -20px; margin-right: -20px; } CSS <div class="parent"> <div class="child"></div> </div> HTML
21. negative でカバー表現 いい感じ .parent3 { background: aqua; padding: 20px; } .child { background: hotpink; margin-left: -20px; margin-right: -20px; } CSS <div class="parent"> <div class="child"></div> </div> HTML 親要素に padding などのスペースがあるけど、幅は 親と一緒にしたい…とか飛び越えたいという時には negative margin にすることで飛び越えられる
22. margin 上につけるか下につけるか
23. margin の方向を統一する margin の相殺があるので、互いの要素が持 つ margin がぶつかるとレイアウトがしにく い。 サイト全体の中で方向を統一していくのがベ ター。 上下どちらがいいのかは、それぞれメリット があり一概に言い切れないのでやりやすい方 で。 上でも下でも、どちらでも良い 個人的には 上マージン派閥 下マージン派閥 ぶつかるのは避ける ❌
24. UI パーツ 余白設計
25. このボタンの余白どうする？
26. このボタンの余白どうする？ .button { margin: 10px; } CSS 流用可能性がある小さな UI パーツ自身に 余白の定義を直接するのは Not good ❌ .parent { padding: 10px; } CSS パーツを使う側が余白のコントロールをする 方向でスタイルを作っていく（色んなやり方 がある） ✅
27. 論理プロパティについて 従来のプロパティ 論理プロパティ 物理的な見た目のプロパティ名から、要素に対しての論理的なプロパ ティ名へ。これによって要素が縦書きやアラビア語圏などでも統一し たプロパティ設定が可能になる。
28. .legacy-properties, .logic-properties { background: beige; margin: 10px; writing-mode: vertical-rl; } .legacy-properties { padding-top: 25px; padding-left: 25px; } .logic-properties { padding-block-start: 25px; padding-inline-start: 25px; } CSS <div class="legacy-properties"> <p>アイウエオ。アイウエオ。 </p> </div> <div class="logic-properties"> <p>アイウエオ。アイウエオ。 </p> </div> HTML 論理プロパティ
29. ありがとうございました！ 次回は... 未定！ 質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru - ツイッター情報 @mu_vpoe , @zaru チャンネル登録 Good ボタン お願いします！ ムーザルちゃんねる