SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01シーエスエス、リファレンス解説です。
  3. 0:04今回のテーマは、マージンです。
  4. 0:06これは、枠線の外側にある余白のことで、箱と箱の間、あるいは箱と周囲との距離を決めるプロパティです。
  5. 0:15要素同士がぴったりくっついていると、窮屈で読み分けにくくなります。
  6. 0:20そこにマージンで間隔を作ると、まとまりごとに区切れて、ぐっと見やすくなります。
  7. 0:27この動画では、基本の書き方、値の個数による違い、オートや割合といった値の意味、
  8. 0:34上下の余白が重なる相殺という注意点、そして効かないときの確認方法まで順番に見ていきます。
  9. 0:41まず基本の書き方です。
  10. 0:43セレクターを書いたら、マージンと書き、コロンのあとに値を並べ、最後にセミコロンを付けます。
  11. 0:49スライドの例では、上下が一レム、左右が二レムという指定です。
  12. 0:54レムは文字サイズを基準にした単位で、文字の大きさに合わせて余白も考えやすいのが特徴です。
  13. 1:00この一行だけで、四辺の外側の余白をまとめて決められます。
  14. 1:04エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
  15. 1:13まずはこの形をそのまま書いて、ブラウザーで確かめましょう。
  16. 1:18マージンで大切なのが、値の個数による割り当てです。
  17. 1:22値を一つだけ書くと、四辺すべてが同じ余白になります。
  18. 1:27二つ書くと、一つ目が上下、二つ目が左右を担当します。
  19. 1:31三つ書くと、上、左右、下の順です。
  20. 1:34四つ書くと、上、右、下、左と、時計回りに割り当てられます。
  21. 1:40記事の実例で使う二つの値の書き方は、上下と左右で余白を変えたいときによく登場します。
  22. 1:47個数を間違えると、思っていたのと違う辺が広がってしまうので、書いたあとは、
  23. 1:53どの値がどの辺に対応しているかを指で追いながら確認すると安心です。
  24. 2:00四辺を別々に書く方法もあります。
  25. 2:02上の余白はマージントップ、右はマージンライト、下はマージンボトム、左はマージンレフトという個別のプロパティが担当しています。
  26. 2:10マージンは、この四つをまとめて書ける一括指定です。
  27. 2:14普段は一行で済ませて問題ありませんが、下だけ広げたいといった部分的な調整では、
  28. 2:17個別の指定が役立ちます。
  29. 2:21なお、個別プロパティの初期値はいずれもゼロで、マージンは親から通常は継承しません。
  30. 2:27親に余白があっても、子には自動では伝わらない点も覚えておきましょう。
  31. 2:31次に、指定できる値を確認します。
  32. 2:33ピクセルやレムなどの長さのほか、パーセントで割合も書けます。
  33. 2:37パーセントの場合は、親要素の幅を基準に計算される点に注意してください。
  34. 2:42上下の余白でも、基準は高さではなく幅です。
  35. 2:45さらにマージンでは、自動調整を意味するオートも使えますし、マイナスの値も指定できます。
  36. 2:51ここが、内側の余白であるパディングとの大きな違いです。
  37. 2:55負の値は要素同士を近付けたり重ねたりできますが、意図せず重なって読みにくくなることもあるので、
  38. 2:59使う場面は慎重に選びましょう。
  39. 3:03余白の位置を、ボックスモデルで整理しましょう。
  40. 3:07要素は内側から、内容、パディング、枠線、マージンという層でできています。
  41. 3:12マージンは一番外側、枠線のさらに外にある余白です。
  42. 3:16ここで大事なのが、背景の広がり方です。
  43. 3:19背景色はパディングの領域までは描画されますが、マージンの領域までは広がりません。
  44. 3:25つまりマージンを広げても、色の付いた範囲は大きくならず、周りとの距離だけが広がります。
  45. 3:32また、マージンの領域は原則としてクリックの対象にもなりません。
  46. 3:37距離だけを空けたいときはマージン、色付きの範囲ごと広げたいときはパディング、
  47. 3:40と使い分けましょう。
  48. 3:44マージン特有の注意点が、上下の余白の相殺です。
  49. 3:47縦に並んだ要素同士で、上の要素の下マージンと、下の要素の上マージンが接すると、
  50. 3:52二つが足し算にはならず、大きい方だけが残る場合があります。
  51. 3:57例えば下に二十四ピクセル、上に十六ピクセルを指定しても、実際の間隔は四十ピクセルではなく二十四ピクセルです。
  52. 4:04親要素と最初の子要素の間でも起きることがあります。
  53. 4:08計算が合わないと感じたら、まず相殺を疑ってください。
  54. 4:12パディングで代用したり、フレックスボックスやグリッドのギャップを使ったりすると、
  55. 4:16意図どおりの間隔にしやすくなります。
  56. 4:20オートの代表的な使い方として、中央寄せを紹介します。
  57. 4:24幅を指定したブロック要素に、上下はゼロ、左右はオートと書くと、余った横幅が左右に均等に配分され、
  58. 4:30箱が中央に置かれます。
  59. 4:35記事のステージのように、文章の箱の幅に上限を付けて中央へ置きたい場面でよく使う形です。
  60. 4:43ただし幅が親いっぱいに広がっていると、配る余りがなく、変化は見えません。
  61. 4:50一方、フレックスボックスやグリッドの中の項目同士の間隔は、マージンよりギャップで指定した方が、
  62. 4:56意図が伝わりやすく管理もしやすくなります。
  63. 5:02場面で使い分けましょう。
  64. 5:04ここからは記事の実例です。
  65. 5:06エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  66. 5:13中には少し長めの文章を入れて、折り返したときの見え方も確認できるようにしています。
  67. 5:20頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  68. 5:25今回比べたいのは、箱の外側の間隔そのものです。
  69. 5:29文章や内側の余白といった土台を固定してから、外側の余白だけを差し替えると、
  70. 5:33距離の変化だけを純粋に観察できます。
  71. 5:37この考え方は、ほかのプロパティを学ぶときにも役立つ比較の基本です。
  72. 5:42土台のシーエスエスです。
  73. 5:44全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。
  74. 5:52デモの箱には濃い緑の枠線と薄い緑の背景、そして内側の余白を用意し、最後の行でマージンに、
  75. 5:57上下一レム、左右二レムを指定します。
  76. 6:01これが周囲から離れた状態です。
  77. 6:04次に最後の行だけをゼロへ置き換えて再読み込みすると、箱がステージの内側へくっつき、
  78. 6:08外側の間隔だけが消えます。
  79. 6:12枠と文章の内側の距離は変わりません。
  80. 6:15効かないときは、読み込み、セレクターの一致、上書きの有無を順に調べ、コンピューテッドで最終値を確認してください。
  81. 6:23最後に互換性とまとめです。
  82. 6:25記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
  83. 6:31ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。
  84. 6:38まとめます。
  85. 6:39マージンは枠線の外側の余白で、値は一つから四つまで書け、通常は継承せず、
  86. 6:42オートと負の値も使えました。
  87. 6:46縦の余白では相殺にも注意が必要でした。
  88. 6:48練習として、一レム二レムとゼロの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。
  89. 6:55関連するパディングやボーダーも学ぶと、余白の調整が一通りできるようになります。
  90. 7:01お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

marginの役割と主な指定値を解説。箱の外側の間隔が変わり、枠と文章の内側余白は変わりません。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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