Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

C302e84057a922dce0ecbe80207e3fcc?s=47 mu_zaru
November 12, 2020

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

C302e84057a922dce0ecbe80207e3fcc?s=128

mu_zaru

November 12, 2020
Tweet

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 ボタン お願いします! ムーザルちゃんねる