SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのボックスモデルと優先順位：余白・幅・継承を理解するの解説動画

再生時間 8:37動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、シーエスエス入門、第五回です。
  3. 0:05今回のテーマは、ボックスモデルと優先順位です。
  4. 0:08前回、文字の色や背景を変えたページは、まだ文字が画面の端に寄っていて、少し読みにくい状態でした。
  5. 0:16今回は、そこに余白を作り、読みやすい幅へ整えます。
  6. 0:20そしてもう一つ、大きなテーマがあります。
  7. 0:24シーエスエスは、書いた順番だけでは結果が決まらない、ということです。
  8. 0:29見た目が予想と違うとき、むやみに値を増やして試す前に、原因を確認できるようになること。
  9. 0:36それが今回のゴールです。
  10. 0:38元になる記事は、エスイーの部屋の、シーエスエスのボックスモデルと優先順位、
  11. 0:41です。
  12. 0:44まず、ボックスモデルの考え方です。
  13. 0:47エイチティーエムエルの要素は、すべて箱として扱われます。
  14. 0:52その箱は、内側から四つの層でできています。
  15. 0:56一番内側が、コンテント、内容そのもの。
  16. 0:59その外側に、パディング、内側の余白。
  17. 1:02次に、ボーダー、境界線。
  18. 1:05一番外側が、マージン、外側の余白です。
  19. 1:08実例で考えましょう。
  20. 1:10カードの中の文字と、枠との距離。
  21. 1:12これはパディングで調整します。
  22. 1:15隣のカードとの距離は、マージンや、レイアウトのギャップで扱います。
  23. 1:21もう一つ、大切な性質です。
  24. 1:23背景色は、通常、パディングの範囲まで塗られます。
  25. 1:27マージンには塗られません。
  26. 1:30色がどこまで広がるかの違いは、この層の理解から説明できます。
  27. 1:35幅の計算で、初心者がつまずくポイントを押さえます。
  28. 1:39標準の、コンテントボックスという方式では、ウィドゥス、幅の指定は、内容だけの幅を指します。
  29. 1:45たとえば、幅三百ピクセルに、左右二十ピクセルのパディングと、左右一ピクセルのボーダーを足すと、
  30. 1:51ボーダーまでの実際の幅は、三百四十二ピクセルになります。
  31. 1:56指定したはずの三百より、広くなってしまうのです。
  32. 2:00これに対して、ボックスサイジング、ボーダーボックスを指定すると、三百ピクセルの中に、
  33. 2:04パディングとボーダーが含まれます。
  34. 2:09指定した幅が、そのまま箱の幅になるので、予測が立てやすくなります。
  35. 2:14なお、マージンは、どちらの方式でも指定幅の外側です。
  36. 2:17この違いが、後の計算ミスを防ぎます。
  37. 2:20次に、読みやすい最大幅の決め方です。
  38. 2:23ページ全体の入れ物、コンテナには、行が長すぎないよう上限を設けます。
  39. 2:29ただし、固定の幅だけを指定すると、小さな画面では、はみ出してしまいます。
  40. 2:35そこで使うのが、ミン関数です。
  41. 2:37千百二十ピクセルと、画面の利用できる幅から四十ピクセルを引いた値、この二つのうち、
  42. 2:41小さい方を採用します。
  43. 2:46大きな画面では千百二十ピクセルまで、狭い画面では画面に収まる幅になる、という賢い指定です。
  44. 2:53あわせて、マージンインライン、オートで、横方向の余白を自動で配分し、箱を中央に置きます。
  45. 3:00なお、パディングブロックは、縦書きも含めた論理方向の指定ですが、この日本語の横書きページでは、
  46. 3:05上下のパディングとして働きます。
  47. 3:11ここから、今回追加するコードを見ていきます。
  48. 3:14前回のスタイルズ ドット シーエスエスは残したまま、末尾へ追加していくのが手順です。
  49. 3:20最初の一行、アスタリスク、ボックスサイジング、ボーダーボックスは、全ての要素にボーダーボックスを適用する指定です。
  50. 3:28先ほどの幅計算が、ページ全体で予測しやすくなります。
  51. 3:32次に、コンテナの幅と中央寄せ。
  52. 3:34これは前のスライドで解説したとおりです。
  53. 3:37そして、セクションとヒーローに、パディングブロック、六十四ピクセル。
  54. 3:41章ごとに縦の余白が空き、文章の区切りがはっきりします。
  55. 3:45追加するコードは、大きく三つのまとまりに分けて読むと、追いやすくなります。
  56. 3:51追加コードの二つ目です。
  57. 3:52カードには、パディング二十四ピクセルで内側の余白を作り、ボーダーで細い枠線を引き、
  58. 3:56ボーダーレイディアスで角を丸くします。
  59. 4:01次に、ドット カード、プラス、ドット カードというセレクターです。
  60. 4:05これは、カードの直後にあるカードだけを選ぶ書き方で、マージントップ、十六ピクセルが付きます。
  61. 4:11一枚目のカードには付かず、二枚目以降の上にだけ間隔が空く、という仕組みです。
  62. 4:17最後に、画像です。
  63. 4:18マックスウィドゥス、百パーセントで、親の幅を超えないようにし、ハイト、オートで縦横比を保ちます。
  64. 4:24この二行は、画像のはみ出し防止の定番です。
  65. 4:27追加コードの三つ目、フォームまわりです。
  66. 4:31意外な落とし穴ですが、ブラウザーの標準指定では、フォームの部品の文字設定が、
  67. 4:35本文と一致しないことがあります。
  68. 4:40ボタンや入力欄だけ、違うフォントや大きさで表示されてしまうのです。
  69. 4:46そこで、フォント、インヘリットを指定して、本文の文字設定を引き継がせます。
  70. 4:52インヘリットは、親要素の計算済みの値を使う、という指定です。
  71. 4:57あわせて、インプットとセレクトは、幅を百パーセントに広げ、パディング十二ピクセルで入力しやすくします。
  72. 5:06フィールドというクラスには、マージンブロック、二十ピクセルで、項目どうしの上下の間隔を作ります。
  73. 5:14ここから、後半のテーマ、優先順位です。
  74. 5:17まず、二つの仕組みを区別しましょう。
  75. 5:21一つ目は、継承です。
  76. 5:23本文の文字色やフォントのように、親に指定すると、子の要素へ引き継がれるプロパティがあります。
  77. 5:32一方で、パディングやボーダーは、通常、そのまま継承されません。
  78. 5:38二つ目は、カスケードです。
  79. 5:40同じ要素の、同じプロパティに、複数の指定が競合したとき、どの値を採用するかを決める仕組みがカスケードです。
  80. 5:50子に値が伝わる話と、競合した指定の勝敗の話は、別の話です。
  81. 5:56ここを混同すると、効かない原因の切り分けができません。
  82. 6:01まず、この区別をしっかり押さえてください。
  83. 6:05カスケードで勝敗を決める中心が、詳細度です。
  84. 6:09詳細度は、アイディー、クラス、要素などの組み合わせから計算する、指定の具体性の強さです。
  85. 6:17たとえば、ドット カード、ピーは、ピーだけの指定より具体的です。
  86. 6:23画面の実験コードを見てください。
  87. 6:26カード内の段落を、先に書いたルールでは濃い緑に。
  88. 6:30後に書いた、ピーだけのルールでは、別の色に指定しています。
  89. 6:36結果は、先に書いた方が採用されます。
  90. 6:39詳細度が高いからです。
  91. 6:41詳細度も同じ場合に限って、後に書いたルールが優先されます。
  92. 6:46後から書けば必ず勝つ、わけではない。
  93. 6:49ここが今回一番のポイントです。
  94. 6:52実験コードは、確認後に二つとも削除してください。
  95. 6:57優先順位を調べる実践的な手順です。
  96. 6:59まず注意点として、インポータントを安易に増やさないでください。
  97. 7:04強い指定が増えるほど、後の変更が、どこで負けているのか追いにくくなります。
  98. 7:10調べ方は、前回も出てきた開発者ツールです。
  99. 7:14スタイルズで、どの指定が適用され、どれに打ち消し線が付いているかを見る。
  100. 7:19コンピューテッドで、最終的に採用された値を確認する。
  101. 7:23この二段構えです。
  102. 7:25その際、その値が、親からの継承で来たものか、その要素へ直接指定したものかも区別してください。
  103. 7:32もう一つ、レイアウトの注意点です。
  104. 7:35上下のマージンは、隣り合うと相殺される場合があります。
  105. 7:39二つの余白が、常に足し算になるわけではありません。
  106. 7:43部品間の間隔は、次回のフレックスボックスやグリッドのギャップで管理すると、
  107. 7:47意図を表現しやすくなります。
  108. 7:51最後に、練習問題です。
  109. 7:53一つ目、カードのパディングを、二十四ピクセルから、三十二ピクセルに変えて、
  110. 7:58文字と枠の距離だけが変わるかを確認してください。
  111. 8:03二つ目、ブラウザーの幅を、三百九十ピクセル程度に狭くして、画像がはみ出さずに縮小されるかを調べてください。
  112. 8:11もし、はみ出しがある場合は、開発者ツールで、その要素の、コンテント、パディング、
  113. 8:15ボーダーを順に確認します。
  114. 8:19まとめです。
  115. 8:20今日は、ボックスモデルの四つの層、ボーダーボックスの幅計算、画面に合わせて縮む最大幅、
  116. 8:25継承とカスケードの区別、そして詳細度と記述順を学びました。
  117. 8:31次回は、フレックスボックスとグリッドでレイアウトを作ります。
  118. 8:36お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

padding・border・margin、border-box、最大幅、継承・詳細度・記述順を学習。開発者ツールでCSSが効かない原因を切り分けます。

解説記事・サンプルコードを読む：CSSのボックスモデルと優先順位：余白・幅・継承を理解する →