WEBVTT

1
00:00:00.000 --> 00:00:00.864
こんにちは。

2
00:00:00.864 --> 00:00:03.454
シーエスエス、リファレンス解説です。

3
00:00:03.454 --> 00:00:06.333
今回のテーマは、マージンインラインです。

4
00:00:06.333 --> 00:00:13.673
これは、インライン方向の始まり側と終わり側の外側余白、つまりマージンをまとめて指定するプロパティです。

5
00:00:13.673 --> 00:00:21.300
ふだんの横書きでは、インライン方向は文字が進む左右の方向なので、対象になるのは要素の左側と右側の余白です。

6
00:00:21.300 --> 00:00:25.906
この動画では、基本の書き方から、値が一つと二つの違い、片側だけ指定する方法、

7
00:00:25.906 --> 00:00:30.512
そして中央寄せに使うオートまでを順番に見ていきます。

8
00:00:30.512 --> 00:00:36.988
余白を二レムにした例と、余白ゼロの例を比べて、左右の間隔だけが変わる様子を確認しましょう。

9
00:00:36.988 --> 00:00:38.723
まず基本の書き方です。

10
00:00:38.723 --> 00:00:43.062
スライドのように、対象のクラスにマージンインラインと書き、コロンのあとに値を置き、

11
00:00:43.062 --> 00:00:47.401
最後にセミコロンを付けます。

12
00:00:47.401 --> 00:00:49.767
これは通常の宣言と同じ形です。

13
00:00:49.767 --> 00:00:55.763
値を一つ書けば始まり側と終わり側に同じ余白が付き、二つ書けば別々にできます。

14
00:00:55.763 --> 00:01:01.758
スライドの例では、両側とも二レムなので、横書きなら左も右も二レムになります。

15
00:01:01.758 --> 00:01:10.908
このプロパティは、始まり側のマージンインラインスタートと、終わり側のマージンインラインエンドをまとめた省略記法です。

16
00:01:10.908 --> 00:01:13.748
初期値はゼロで、通常は継承しません。

17
00:01:13.748 --> 00:01:18.008
左右のマージンを一行で書けるので、指定も短く済みます。

18
00:01:18.008 --> 00:01:23.532
ここで、論理プロパティという考え方を押さえましょう。

19
00:01:23.532 --> 00:01:33.092
従来のマージンレフトやマージンライトは、画面の左や右という物理的な位置で指定していました。

20
00:01:33.092 --> 00:01:40.102
これに対してインラインは、文章の流れを基準にした論理的な方向です。

21
00:01:40.102 --> 00:01:47.538
インラインは文字が進む方向、ブロックは段落が積み重なる方向を表します。

22
00:01:47.538 --> 00:01:59.010
横書きで左から右へ読む日本語や英語では、始まり側は左ですが、右から左へ読む言語では始まり側が右に変わります。

23
00:01:59.010 --> 00:02:06.233
縦書きでは文字が上から下へ進むため、インライン方向は上下になります。

24
00:02:06.233 --> 00:02:15.156
同じ指定でも書字方向に応じて余白の付く辺が切り替わるのが、論理プロパティの利点です。

25
00:02:15.156 --> 00:02:18.096
値の個数による違いを見てみましょう。

26
00:02:18.096 --> 00:02:22.995
値を一つだけ書くと、始まり側と終わり側に同じ余白が付きます。

27
00:02:22.995 --> 00:02:26.915
例えば二レムなら、横書きでは左も右も二レムです。

28
00:02:26.915 --> 00:02:33.611
値を半角スペースで区切って二つ書くと、最初が始まり側、二番目が終わり側になります。

29
00:02:33.611 --> 00:02:37.858
二レムと一レムなら、左は広く、右はやや狭くなります。

30
00:02:37.858 --> 00:02:41.287
値には長さのほか、割合やオートも使えます。

31
00:02:41.287 --> 00:02:48.147
割合は、包含ブロックのインライン方向の大きさ、横書きでは親の幅を基準に計算されます。

32
00:02:48.147 --> 00:02:55.170
まずは一つでそろえてみて、必要なら二つに分けて調整すると、意図が分かりやすくなります。

33
00:02:55.170 --> 00:02:59.416
開始側を先に書く、という順番だけ覚えておきましょう。

34
00:02:59.416 --> 00:03:04.673
両側をまとめるのではなく、片側だけ余白を調整したい場面もよくあります。

35
00:03:04.673 --> 00:03:12.635
そのときは、始まり側だけのマージンインラインスタートと、終わり側だけのマージンインラインエンドを使います。

36
00:03:12.635 --> 00:03:19.695
横書きで左から読む場合、左だけ余白を広げたいなら、始まり側であるスタートを指定すれば十分です。

37
00:03:19.695 --> 00:03:22.699
逆に右だけ欲しい場合はエンドを選びます。

38
00:03:22.699 --> 00:03:29.384
まとめて指定するマージンインラインと、片側ずつのスタート、エンドを使い分けることで、

39
00:03:29.384 --> 00:03:36.068
不要な余白を付けずに済みますし、どの辺を調整したかったのかも、あとから読み取りやすくなります。

40
00:03:36.068 --> 00:03:37.718
ここからは実例です。

41
00:03:37.718 --> 00:03:45.306
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。

42
00:03:45.306 --> 00:03:52.565
中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。

43
00:03:52.565 --> 00:03:58.339
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

44
00:03:58.339 --> 00:04:08.072
親のステージがあることで、デモの箱の外側に生まれる余白、つまり左右のマージンがどこに現れるのかを見分けやすくなります。

45
00:04:08.072 --> 00:04:12.114
この土台は変えずに、最後のマージンインラインの行だけを切り替えて比べるのが、

46
00:04:12.114 --> 00:04:16.156
この実例の進め方です。

47
00:04:16.156 --> 00:04:21.600
親と子の関係が見える例ほど、外側余白の働きは理解しやすくなります。

48
00:04:21.600 --> 00:04:24.102
土台のシーエスエスの続きです。

49
00:04:24.102 --> 00:04:30.189
ステージには幅の上限と内側の余白と点線の枠を付け、デモの箱には一レムの内側余白と、

50
00:04:30.189 --> 00:04:36.277
緑色の三ピクセルの枠と、薄い緑の背景、そして文字色を指定します。

51
00:04:36.277 --> 00:04:43.949
この準備があることで、後から外側の余白だけを変えたときの違いがはっきり見えるようになります。

52
00:04:43.949 --> 00:04:49.119
続く別のルールで、デモに対してマージンインラインを指定します。

53
00:04:49.119 --> 00:04:55.457
同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されます。

54
00:04:55.457 --> 00:05:00.460
土台と変更行を分けて書くのが、原因を追いやすくするコツです。

55
00:05:00.460 --> 00:05:01.640
では比較です。

56
00:05:01.640 --> 00:05:03.833
最初は二レムを指定します。

57
00:05:03.833 --> 00:05:09.314
ファイルを保存してブラウザーを再読み込みすると、デモの箱の左と右に空間が生まれ、

58
00:05:09.314 --> 00:05:14.794
親の枠から箱が離れて、箱の幅もその分狭く見えます。

59
00:05:14.794 --> 00:05:19.179
次に、最後の行の値だけをゼロに置き換えてみましょう。

60
00:05:19.179 --> 00:05:21.371
他の指定はすべて同じです。

61
00:05:21.371 --> 00:05:27.611
今度は左右の外側余白がなくなり、箱が親の内側余白のすぐ内側まで広がります。

62
00:05:27.611 --> 00:05:35.031
変わったのは左右の外側だけ、上下の位置や箱の中の余白は同じ、という点に注目してください。

63
00:05:35.031 --> 00:05:40.428
値を一つだけ変えて比べる方法は、ほかのプロパティにも役立ちます。

64
00:05:40.428 --> 00:05:45.824
左右の余白は相殺されず、そのまま幅に影響する点も観察しましょう。

65
00:05:45.824 --> 00:05:50.751
マージンインラインで特に大切なのが、オートの使い方です。

66
00:05:50.751 --> 00:05:57.437
マージンは内側余白のパディングとは違い、オートやマイナスの値も指定できます。

67
00:05:57.437 --> 00:06:03.155
インライン方向にオートを指定し、要素に幅や最大幅の制約があると、余った幅が始まり側と終わり側へ均等に配られ、

68
00:06:03.155 --> 00:06:08.874
要素が中央に寄ります。

69
00:06:08.874 --> 00:06:13.097
逆に幅の制約がなく、要素が親いっぱいに広がっていると、配る余白が残らず、

70
00:06:13.097 --> 00:06:17.320
中央寄せには見えません。

71
00:06:17.320 --> 00:06:22.246
また負の値は要素を外側へ広げたり、隣と近づけたりします。

72
00:06:22.246 --> 00:06:28.933
インヘリットは親の計算値を使う指定、イニシャルは初期値のゼロに戻す指定です。

73
00:06:28.933 --> 00:06:31.572
一つずつ試して確かめましょう。

74
00:06:31.572 --> 00:06:35.670
効かないと感じたときは、まず指定の混在を確認しましょう。

75
00:06:35.670 --> 00:06:41.086
マージンレフトやマージンライトとマージンインラインを同じ要素に混ぜて書くと、

76
00:06:41.086 --> 00:06:46.502
書く順番や書字方向によって、どちらが効いているのか分かりにくくなります。

77
00:06:46.502 --> 00:06:49.722
どちらか一方の書き方にそろえるのが安全です。

78
00:06:49.722 --> 00:06:56.017
中央寄せでオートが効かない場合は、要素の幅が親いっぱいになっていないかも見てください。

79
00:06:56.017 --> 00:06:58.212
続いて開発者ツールで調べます。

80
00:06:58.212 --> 00:07:05.531
ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、

81
00:07:05.531 --> 00:07:12.850
スタイルズで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで左右の最終値を確認します。

82
00:07:12.850 --> 00:07:17.680
三百二十ピクセル程度の狭い画面でも読めるかどうかも確認しましょう。

83
00:07:17.680 --> 00:07:19.525
最後に互換性とまとめです。

84
00:07:19.525 --> 00:07:25.768
マージンインラインは、クローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、

85
00:07:25.768 --> 00:07:32.012
サファリ十四点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。

86
00:07:32.012 --> 00:07:32.863
まとめます。

87
00:07:32.863 --> 00:07:38.468
マージンインラインはインライン方向の始まりと終わりの外側余白をまとめる省略記法で、

88
00:07:38.468 --> 00:07:44.073
横書きでは左右、縦書きでは上下が対象になり、値は一つでも二つでも書けました。

89
00:07:44.073 --> 00:07:49.891
片側だけならスタートとエンド、中央寄せなら幅の制約とオートの組み合わせも使えます。

90
00:07:49.891 --> 00:07:54.148
練習として、二レムとゼロの違いを言葉で説明してみてください。

91
00:07:54.148 --> 00:07:58.263
関連するマージンブロックもあわせて学ぶと理解が深まります。

92
00:07:58.263 --> 00:07:59.540
お疲れさまでした。