SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのmargin-blockの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、マージンブロックです。
  4. 0:06これは、ブロック方向の始まり側と終わり側の外側余白、つまりマージンをまとめて指定するプロパティです。
  5. 0:15ふだんの横書きでは、ブロック方向は段落が積み重なる上下の方向なので、対象になるのは要素の上側と下側の余白です。
  6. 0:24この動画では、基本の書き方から、値が一つと二つの違い、片側だけ指定する方法、
  7. 0:29そして余白が効かないときの確認までを順番に見ていきます。
  8. 0:34上を二レム、下を一レムにした例と、余白ゼロの例を比べて、上下の間隔だけが変わる様子を確認しましょう。
  9. 0:42見出しと本文の間隔を整える場面を思い浮かべながら聞いてください。
  10. 0:48まず基本の書き方です。
  11. 0:49スライドのように、対象のクラスにマージンブロックと書き、コロンのあとに値を置き、
  12. 0:54最後にセミコロンを付けます。
  13. 0:58これは通常の宣言と同じ形です。
  14. 1:00値を一つ書けば始まり側と終わり側に同じ余白が付き、二つ書けば別々にできます。
  15. 1:06スライドの例では、始まり側が二レム、終わり側が一レムです。
  16. 1:11横書きなら上が二レム、下が一レムになります。
  17. 1:14このプロパティは、始まり側のマージンブロックスタートと、終わり側のマージンブロックエンドをまとめた省略記法です。
  18. 1:23初期値はゼロで、通常は継承しません。
  19. 1:26横書きの上下マージンをまとめて書けるので、指定も短く済みます。
  20. 1:31ここで、論理プロパティという考え方を押さえましょう。
  21. 1:35従来のマージントップやマージンボトムは、画面の上や下という物理的な位置で指定していました。
  22. 1:43これに対してブロックやインラインは、文章の流れを基準にした論理的な方向です。
  23. 1:49ブロックは段落が積み重なる方向、インラインは文字が進む方向を表します。
  24. 1:55横書きではブロックは上下ですが、縦書きに切り替えると、段落は右から左へ積み重なるため、
  25. 2:00ブロック方向は左右に変わります。
  26. 2:05同じ指定でも書字方向に応じて余白の付く辺が切り替わるのが、論理プロパティの利点です。
  27. 2:13書字方向を意識すると、海外向けのページでも余白の意図が保てます。
  28. 2:18値の個数による違いを見てみましょう。
  29. 2:21値を一つだけ書くと、始まり側と終わり側に同じ余白が付きます。
  30. 2:25例えば二レムなら、横書きでは上も下も二レムです。
  31. 2:29値を半角スペースで区切って二つ書くと、最初が始まり側、二番目が終わり側になります。
  32. 2:35二レムと一レムなら、上は広く、下はやや狭くなります。
  33. 2:38値には長さのほか、割合やオートも使えます。
  34. 2:42割合は、包含ブロックのインライン方向の大きさを基準に計算されます。
  35. 2:46まずは一つでそろえてみて、必要なら二つに分けて調整すると、意図が分かりやすくなります。
  36. 2:53迷ったときは、開始側を先に書く、という順番だけ覚えておきましょう。
  37. 2:58両側をまとめるのではなく、片側だけ余白を調整したい場面もよくあります。
  38. 3:03そのときは、始まり側だけのマージンブロックスタートと、終わり側だけのマージンブロックエンドを使います。
  39. 3:11横書きの場合、上だけ余白を広げたいなら、始まり側であるスタートを指定すれば十分です。
  40. 3:18逆に下だけ欲しい場合はエンドを選びます。
  41. 3:21まとめて指定するマージンブロックと、片側ずつのスタート、エンドを使い分けることで、
  42. 3:28不要な余白を付けずに済みますし、どの辺を調整したかったのかも、あとから読み取りやすくなります。
  43. 3:35ここからは実例です。
  44. 3:37エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  45. 3:43中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
  46. 3:50頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  47. 3:55親のステージがあることで、デモの箱の外側に生まれる余白、つまり上下のマージンがどこに現れるのかを見分けやすくなります。
  48. 4:03この土台は変えずに、最後のマージンブロックの行だけを切り替えて比べるのが、
  49. 4:07この実例の進め方です。
  50. 4:10親と子の関係が見える例ほど、外側余白の働きは理解しやすくなります。
  51. 4:15土台のシーエスエスの続きです。
  52. 4:17ステージには幅の上限と内側の余白と点線の枠を付け、デモの箱には一レムの内側余白と、
  53. 4:24緑色の三ピクセルの枠と、薄い緑の背景、そして文字色を指定します。
  54. 4:31この準備があることで、後から外側の余白だけを変えたときの違いがはっきり見えるようになります。
  55. 4:39続く別のルールで、デモに対してマージンブロックを指定します。
  56. 4:44同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されます。
  57. 4:51土台と変更行を分けて書くのが、原因を追いやすくするコツです。
  58. 4:57では比較です。
  59. 4:58最初は二レムと一レムを指定します。
  60. 5:01ファイルを保存してブラウザーを再読み込みすると、デモの箱の上に広い空間、
  61. 5:06下に少し狭い空間が生まれ、親の枠から箱が離れて見えます。
  62. 5:12次に、最後の行の値だけをゼロに置き換えてみましょう。
  63. 5:16他の指定はすべて同じです。
  64. 5:18今度は上下の外側余白がなくなり、箱が親の内側余白のすぐ内側まで近づきます。
  65. 5:25変わったのは上下の外側だけ、左右の位置や箱の中の余白は同じ、という点に注目してください。
  66. 5:32値を一つだけ変えて比べる方法は、ほかのプロパティにも役立ちます。
  67. 5:38スクリーンショットで並べて比べると、違いがさらに分かりやすくなります。
  68. 5:44使える値の注意点と、共通値も知っておきましょう。
  69. 5:47マージンブロックは内側余白のパディングとは違い、オートやマイナスの値も指定できます。
  70. 5:54ただし、ブロック方向のオートは多くの場面でゼロとして扱われ、中央寄せのような効果は期待できない点に注意してください。
  71. 6:03負の値は要素同士を近づけたり重ねたりします。
  72. 6:07インヘリットは親要素の計算された値を使う指定、イニシャルは仕様の初期値であるゼロに戻す指定です。
  73. 6:14アンセットは、継承しないこのプロパティではイニシャルと同じ結果になります。
  74. 6:20使い方を一つずつ試して確かめましょう。
  75. 6:23効かないと感じたときは、まず余白の相殺を疑いましょう。
  76. 6:28横書きで上下のマージンとして働くとき、隣り合う要素の余白や、親と子の余白が重なると、
  77. 6:33単純な合計にはならず、大きい方だけが残ることがあります。
  78. 6:39余白が思ったより小さい場合は、親子構造や、親の内側余白と枠の有無を確認してください。
  79. 6:46続いて開発者ツールで調べます。
  80. 6:48ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
  81. 6:57スタイルズで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで上下の最終値を確認します。
  82. 7:05三百二十ピクセル程度の狭い画面でも読めるかどうかも、あわせて確認しましょう。
  83. 7:11最後に互換性とまとめです。
  84. 7:13マージンブロックは、クローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、
  85. 7:20サファリ十四点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。
  86. 7:27まとめます。
  87. 7:28マージンブロックはブロック方向の始まりと終わりの外側余白をまとめる省略記法で、
  88. 7:35横書きでは上下、縦書きでは左右が対象になり、値は一つでも二つでも書けました。
  89. 7:41片側だけならスタートとエンドも使えます。
  90. 7:44練習として、二レム一レムとゼロの違いを言葉で説明してみてください。
  91. 7:49関連するマージンインラインもあわせて学ぶと理解が深まります。
  92. 7:54お疲れさまでした。
  93. 7:56上と下を別々に考える練習が、ほかの論理プロパティにもつながります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

margin-blockの役割と主な指定値を解説。横書きでは上下の外側余白が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのmargin-blockの使い方：指定値・実例・効かない原因とブラウザー互換性 →