SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

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

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