WEBVTT

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

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

3
00:00:04.130 --> 00:00:06.711
今回のテーマは、マージンです。

4
00:00:06.711 --> 00:00:15.142
これは、枠線の外側にある余白のことで、箱と箱の間、あるいは箱と周囲との距離を決めるプロパティです。

5
00:00:15.142 --> 00:00:20.820
要素同士がぴったりくっついていると、窮屈で読み分けにくくなります。

6
00:00:20.820 --> 00:00:27.531
そこにマージンで間隔を作ると、まとまりごとに区切れて、ぐっと見やすくなります。

7
00:00:27.531 --> 00:00:34.671
この動画では、基本の書き方、値の個数による違い、オートや割合といった値の意味、

8
00:00:34.671 --> 00:00:41.812
上下の余白が重なる相殺という注意点、そして効かないときの確認方法まで順番に見ていきます。

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

10
00:00:43.396 --> 00:00:49.877
セレクターを書いたら、マージンと書き、コロンのあとに値を並べ、最後にセミコロンを付けます。

11
00:00:49.877 --> 00:00:54.197
スライドの例では、上下が一レム、左右が二レムという指定です。

12
00:00:54.197 --> 00:01:00.534
レムは文字サイズを基準にした単位で、文字の大きさに合わせて余白も考えやすいのが特徴です。

13
00:01:00.534 --> 00:01:04.567
この一行だけで、四辺の外側の余白をまとめて決められます。

14
00:01:04.567 --> 00:01:13.928
エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。

15
00:01:13.928 --> 00:01:18.104
まずはこの形をそのまま書いて、ブラウザーで確かめましょう。

16
00:01:18.104 --> 00:01:22.575
マージンで大切なのが、値の個数による割り当てです。

17
00:01:22.575 --> 00:01:27.225
値を一つだけ書くと、四辺すべてが同じ余白になります。

18
00:01:27.225 --> 00:01:31.875
二つ書くと、一つ目が上下、二つ目が左右を担当します。

19
00:01:31.875 --> 00:01:34.915
三つ書くと、上、左右、下の順です。

20
00:01:34.915 --> 00:01:40.102
四つ書くと、上、右、下、左と、時計回りに割り当てられます。

21
00:01:40.102 --> 00:01:47.613
記事の実例で使う二つの値の書き方は、上下と左右で余白を変えたいときによく登場します。

22
00:01:47.613 --> 00:01:53.873
個数を間違えると、思っていたのと違う辺が広がってしまうので、書いたあとは、

23
00:01:53.873 --> 00:02:00.132
どの値がどの辺に対応しているかを指で追いながら確認すると安心です。

24
00:02:00.132 --> 00:02:02.339
四辺を別々に書く方法もあります。

25
00:02:02.339 --> 00:02:10.891
上の余白はマージントップ、右はマージンライト、下はマージンボトム、左はマージンレフトという個別のプロパティが担当しています。

26
00:02:10.891 --> 00:02:14.340
マージンは、この四つをまとめて書ける一括指定です。

27
00:02:14.340 --> 00:02:17.857
普段は一行で済ませて問題ありませんが、下だけ広げたいといった部分的な調整では、

28
00:02:17.857 --> 00:02:21.375
個別の指定が役立ちます。

29
00:02:21.375 --> 00:02:27.030
なお、個別プロパティの初期値はいずれもゼロで、マージンは親から通常は継承しません。

30
00:02:27.030 --> 00:02:31.720
親に余白があっても、子には自動では伝わらない点も覚えておきましょう。

31
00:02:31.720 --> 00:02:33.901
次に、指定できる値を確認します。

32
00:02:33.901 --> 00:02:37.991
ピクセルやレムなどの長さのほか、パーセントで割合も書けます。

33
00:02:37.991 --> 00:02:42.762
パーセントの場合は、親要素の幅を基準に計算される点に注意してください。

34
00:02:42.762 --> 00:02:45.625
上下の余白でも、基準は高さではなく幅です。

35
00:02:45.625 --> 00:02:51.487
さらにマージンでは、自動調整を意味するオートも使えますし、マイナスの値も指定できます。

36
00:02:51.487 --> 00:02:55.168
ここが、内側の余白であるパディングとの大きな違いです。

37
00:02:55.168 --> 00:02:59.394
負の値は要素同士を近付けたり重ねたりできますが、意図せず重なって読みにくくなることもあるので、

38
00:02:59.394 --> 00:03:03.620
使う場面は慎重に選びましょう。

39
00:03:03.620 --> 00:03:07.174
余白の位置を、ボックスモデルで整理しましょう。

40
00:03:07.174 --> 00:03:12.737
要素は内側から、内容、パディング、枠線、マージンという層でできています。

41
00:03:12.737 --> 00:03:16.600
マージンは一番外側、枠線のさらに外にある余白です。

42
00:03:16.600 --> 00:03:19.536
ここで大事なのが、背景の広がり方です。

43
00:03:19.536 --> 00:03:25.716
背景色はパディングの領域までは描画されますが、マージンの領域までは広がりません。

44
00:03:25.716 --> 00:03:32.361
つまりマージンを広げても、色の付いた範囲は大きくならず、周りとの距離だけが広がります。

45
00:03:32.361 --> 00:03:37.151
また、マージンの領域は原則としてクリックの対象にもなりません。

46
00:03:37.151 --> 00:03:40.860
距離だけを空けたいときはマージン、色付きの範囲ごと広げたいときはパディング、

47
00:03:40.860 --> 00:03:44.568
と使い分けましょう。

48
00:03:44.568 --> 00:03:47.798
マージン特有の注意点が、上下の余白の相殺です。

49
00:03:47.798 --> 00:03:52.572
縦に並んだ要素同士で、上の要素の下マージンと、下の要素の上マージンが接すると、

50
00:03:52.572 --> 00:03:57.347
二つが足し算にはならず、大きい方だけが残る場合があります。

51
00:03:57.347 --> 00:04:04.930
例えば下に二十四ピクセル、上に十六ピクセルを指定しても、実際の間隔は四十ピクセルではなく二十四ピクセルです。

52
00:04:04.930 --> 00:04:08.440
親要素と最初の子要素の間でも起きることがあります。

53
00:04:08.440 --> 00:04:12.091
計算が合わないと感じたら、まず相殺を疑ってください。

54
00:04:12.091 --> 00:04:16.164
パディングで代用したり、フレックスボックスやグリッドのギャップを使ったりすると、

55
00:04:16.164 --> 00:04:20.236
意図どおりの間隔にしやすくなります。

56
00:04:20.236 --> 00:04:24.957
オートの代表的な使い方として、中央寄せを紹介します。

57
00:04:24.957 --> 00:04:30.314
幅を指定したブロック要素に、上下はゼロ、左右はオートと書くと、余った横幅が左右に均等に配分され、

58
00:04:30.314 --> 00:04:35.671
箱が中央に置かれます。

59
00:04:35.671 --> 00:04:43.480
記事のステージのように、文章の箱の幅に上限を付けて中央へ置きたい場面でよく使う形です。

60
00:04:43.480 --> 00:04:50.017
ただし幅が親いっぱいに広がっていると、配る余りがなく、変化は見えません。

61
00:04:50.017 --> 00:04:56.191
一方、フレックスボックスやグリッドの中の項目同士の間隔は、マージンよりギャップで指定した方が、

62
00:04:56.191 --> 00:05:02.365
意図が伝わりやすく管理もしやすくなります。

63
00:05:02.365 --> 00:05:04.544
場面で使い分けましょう。

64
00:05:04.544 --> 00:05:06.572
ここからは記事の実例です。

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

66
00:05:13.749 --> 00:05:20.146
中には少し長めの文章を入れて、折り返したときの見え方も確認できるようにしています。

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

68
00:05:25.606 --> 00:05:29.195
今回比べたいのは、箱の外側の間隔そのものです。

69
00:05:29.195 --> 00:05:33.485
文章や内側の余白といった土台を固定してから、外側の余白だけを差し替えると、

70
00:05:33.485 --> 00:05:37.775
距離の変化だけを純粋に観察できます。

71
00:05:37.775 --> 00:05:42.924
この考え方は、ほかのプロパティを学ぶときにも役立つ比較の基本です。

72
00:05:42.924 --> 00:05:44.771
土台のシーエスエスです。

73
00:05:44.771 --> 00:05:52.314
全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。

74
00:05:52.314 --> 00:05:57.086
デモの箱には濃い緑の枠線と薄い緑の背景、そして内側の余白を用意し、最後の行でマージンに、

75
00:05:57.086 --> 00:06:01.859
上下一レム、左右二レムを指定します。

76
00:06:01.859 --> 00:06:04.168
これが周囲から離れた状態です。

77
00:06:04.168 --> 00:06:08.324
次に最後の行だけをゼロへ置き換えて再読み込みすると、箱がステージの内側へくっつき、

78
00:06:08.324 --> 00:06:12.480
外側の間隔だけが消えます。

79
00:06:12.480 --> 00:06:15.251
枠と文章の内側の距離は変わりません。

80
00:06:15.251 --> 00:06:23.872
効かないときは、読み込み、セレクターの一致、上書きの有無を順に調べ、コンピューテッドで最終値を確認してください。

81
00:06:23.872 --> 00:06:25.716
最後に互換性とまとめです。

82
00:06:25.716 --> 00:06:31.956
記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、

83
00:06:31.956 --> 00:06:38.196
ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。

84
00:06:38.196 --> 00:06:39.047
まとめます。

85
00:06:39.047 --> 00:06:42.593
マージンは枠線の外側の余白で、値は一つから四つまで書け、通常は継承せず、

86
00:06:42.593 --> 00:06:46.138
オートと負の値も使えました。

87
00:06:46.138 --> 00:06:48.833
縦の余白では相殺にも注意が必要でした。

88
00:06:48.833 --> 00:06:55.924
練習として、一レム二レムとゼロの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。

89
00:06:55.924 --> 00:07:01.456
関連するパディングやボーダーも学ぶと、余白の調整が一通りできるようになります。

90
00:07:01.456 --> 00:07:02.732
お疲れさまでした。