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

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

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

mu_zaru

November 12, 2020
Tweet

More Decks by mu_zaru

Other Decks in Programming

Transcript

  1. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近の仕事は figma で画

    面設計をつくることで す。英語の勉強してる。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします!
  2. 今日話すこと • ボックスモデルについて • margin の相殺 • block と inline

    の違い • auto と negative • margin 上か下か議論 • UI パーツ余白設計 • 論理プロパティについて
  3. width は box-sizing で変わる box-sizing: content-box 標準 box-sizing: border-box 伝統

    width はコンテンツ領域のみの寸 法となる。padding や border を 考慮する必要がある width は border を含んだ寸法と なる。見た目通りに幅を指定でき るので感覚的で使いやすい ( height )
  4. ぶつかる 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
  5. ぶつかる 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 になる
  6. 親子の 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
  7. 親子の 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 は上辺がくっつく
  8. inline は左右のみ影響する display: block display: inline block 要素はボックス周りへの影響を与える inline 要素は自身のボックスにのみ影響を与

    える。例外は左右の margin は適用される inline-block にすれば inline のように振る 舞いつつ block と同じく上下への margin が適用される
  9. HTML の block と CSS の block HTML におけるブロック要素・インラ イン要素は、HTML5

    では存在せず、 もっと細かい要素に分割されている <div> ブロック要素 <span> インライン要素 CSS ではレイアウトとしてのブロック 要素・インライン要素などが定義され ている display: block ブロック要素 display: inline インライン要素 フローコンテンツ Tips
  10. 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
  11. 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 にすることで飛び越えられる
  12. margin の方向を統一する margin の相殺があるので、互いの要素が持 つ margin がぶつかるとレイアウトがしにく い。 サイト全体の中で方向を統一していくのがベ ター。

    上下どちらがいいのかは、それぞれメリット があり一概に言い切れないのでやりやすい方 で。 上でも下でも、どちらでも良い 個人的には 上マージン派閥 下マージン派閥 ぶつかるのは避ける ❌
  13. このボタンの余白どうする? .button { margin: 10px; } CSS 流用可能性がある小さな UI パーツ自身に

    余白の定義を直接するのは Not good ❌ .parent { padding: 10px; } CSS パーツを使う側が余白のコントロールをする 方向でスタイルを作っていく(色んなやり方 がある) ✅
  14. .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 論理プロパティ