WEBVTT

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

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

3
00:00:03.906 --> 00:00:06.998
今回のテーマは、マージンブロックです。

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

5
00:00:15.135 --> 00:00:24.086
ふだんの横書きでは、ブロック方向は段落が積み重なる上下の方向なので、対象になるのは要素の上側と下側の余白です。

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

7
00:00:29.457 --> 00:00:34.827
そして余白が効かないときの確認までを順番に見ていきます。

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

9
00:00:42.964 --> 00:00:48.172
見出しと本文の間隔を整える場面を思い浮かべながら聞いてください。

10
00:00:48.172 --> 00:00:49.896
まず基本の書き方です。

11
00:00:49.896 --> 00:00:54.127
スライドのように、対象のクラスにマージンブロックと書き、コロンのあとに値を置き、

12
00:00:54.127 --> 00:00:58.358
最後にセミコロンを付けます。

13
00:00:58.358 --> 00:01:00.709
これは通常の宣言と同じ形です。

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

15
00:01:06.664 --> 00:01:11.209
スライドの例では、始まり側が二レム、終わり側が一レムです。

16
00:01:11.209 --> 00:01:14.657
横書きなら上が二レム、下が一レムになります。

17
00:01:14.657 --> 00:01:23.433
このプロパティは、始まり側のマージンブロックスタートと、終わり側のマージンブロックエンドをまとめた省略記法です。

18
00:01:23.433 --> 00:01:26.254
初期値はゼロで、通常は継承しません。

19
00:01:26.254 --> 00:01:31.112
横書きの上下マージンをまとめて書けるので、指定も短く済みます。

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

21
00:01:35.564 --> 00:01:43.269
従来のマージントップやマージンボトムは、画面の上や下という物理的な位置で指定していました。

22
00:01:43.269 --> 00:01:49.775
これに対してブロックやインラインは、文章の流れを基準にした論理的な方向です。

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

24
00:01:55.768 --> 00:02:00.819
横書きではブロックは上下ですが、縦書きに切り替えると、段落は右から左へ積み重なるため、

25
00:02:00.819 --> 00:02:05.870
ブロック方向は左右に変わります。

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

27
00:02:13.061 --> 00:02:18.540
書字方向を意識すると、海外向けのページでも余白の意図が保てます。

28
00:02:18.540 --> 00:02:21.185
値の個数による違いを見てみましょう。

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

30
00:02:25.594 --> 00:02:29.121
例えば二レムなら、横書きでは上も下も二レムです。

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

32
00:02:35.146 --> 00:02:38.967
二レムと一レムなら、上は広く、下はやや狭くなります。

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

34
00:02:42.053 --> 00:02:46.903
割合は、包含ブロックのインライン方向の大きさを基準に計算されます。

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

36
00:02:53.222 --> 00:02:58.072
迷ったときは、開始側を先に書く、という順番だけ覚えておきましょう。

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

38
00:03:03.668 --> 00:03:11.822
そのときは、始まり側だけのマージンブロックスタートと、終わり側だけのマージンブロックエンドを使います。

39
00:03:11.822 --> 00:03:18.537
横書きの場合、上だけ余白を広げたいなら、始まり側であるスタートを指定すれば十分です。

40
00:03:18.537 --> 00:03:21.734
逆に下だけ欲しい場合はエンドを選びます。

41
00:03:21.734 --> 00:03:28.769
まとめて指定するマージンブロックと、片側ずつのスタート、エンドを使い分けることで、

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

43
00:03:35.804 --> 00:03:37.237
ここからは実例です。

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

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

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

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

48
00:04:03.607 --> 00:04:07.047
この土台は変えずに、最後のマージンブロックの行だけを切り替えて比べるのが、

49
00:04:07.047 --> 00:04:10.487
この実例の進め方です。

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

51
00:04:15.216 --> 00:04:17.933
土台のシーエスエスの続きです。

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

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

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

55
00:04:39.491 --> 00:04:44.925
続く別のルールで、デモに対してマージンブロックを指定します。

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

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

58
00:04:57.244 --> 00:04:58.435
では比較です。

59
00:04:58.435 --> 00:05:01.329
最初は二レムと一レムを指定します。

60
00:05:01.329 --> 00:05:06.775
ファイルを保存してブラウザーを再読み込みすると、デモの箱の上に広い空間、

61
00:05:06.775 --> 00:05:12.221
下に少し狭い空間が生まれ、親の枠から箱が離れて見えます。

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

63
00:05:16.646 --> 00:05:18.859
他の指定はすべて同じです。

64
00:05:18.859 --> 00:05:25.156
今度は上下の外側余白がなくなり、箱が親の内側余白のすぐ内側まで近づきます。

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

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

67
00:05:38.091 --> 00:05:44.048
スクリーンショットで並べて比べると、違いがさらに分かりやすくなります。

68
00:05:44.048 --> 00:05:47.843
使える値の注意点と、共通値も知っておきましょう。

69
00:05:47.843 --> 00:05:54.484
マージンブロックは内側余白のパディングとは違い、オートやマイナスの値も指定できます。

70
00:05:54.484 --> 00:06:03.656
ただし、ブロック方向のオートは多くの場面でゼロとして扱われ、中央寄せのような効果は期待できない点に注意してください。

71
00:06:03.656 --> 00:06:07.135
負の値は要素同士を近づけたり重ねたりします。

72
00:06:07.135 --> 00:06:14.725
インヘリットは親要素の計算された値を使う指定、イニシャルは仕様の初期値であるゼロに戻す指定です。

73
00:06:14.725 --> 00:06:20.576
アンセットは、継承しないこのプロパティではイニシャルと同じ結果になります。

74
00:06:20.576 --> 00:06:23.580
使い方を一つずつ試して確かめましょう。

75
00:06:23.580 --> 00:06:28.032
効かないと感じたときは、まず余白の相殺を疑いましょう。

76
00:06:28.032 --> 00:06:33.803
横書きで上下のマージンとして働くとき、隣り合う要素の余白や、親と子の余白が重なると、

77
00:06:33.803 --> 00:06:39.574
単純な合計にはならず、大きい方だけが残ることがあります。

78
00:06:39.574 --> 00:06:46.500
余白が思ったより小さい場合は、親子構造や、親の内側余白と枠の有無を確認してください。

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

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

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

82
00:07:05.462 --> 00:07:11.728
三百二十ピクセル程度の狭い画面でも読めるかどうかも、あわせて確認しましょう。

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

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

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

86
00:07:27.844 --> 00:07:28.811
まとめます。

87
00:07:28.811 --> 00:07:35.015
マージンブロックはブロック方向の始まりと終わりの外側余白をまとめる省略記法で、

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

89
00:07:41.220 --> 00:07:44.443
片側だけならスタートとエンドも使えます。

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

91
00:07:49.761 --> 00:07:54.595
関連するマージンインラインもあわせて学ぶと理解が深まります。

92
00:07:54.595 --> 00:07:56.046
お疲れさまでした。

93
00:07:56.046 --> 00:08:01.364
上と下を別々に考える練習が、ほかの論理プロパティにもつながります。