WEBVTT

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

2
00:00:00.974 --> 00:00:05.196
エイチティーエムエル、シーエスエス入門、第五回です。

3
00:00:05.196 --> 00:00:08.931
今回のテーマは、ボックスモデルと優先順位です。

4
00:00:08.931 --> 00:00:16.725
前回、文字の色や背景を変えたページは、まだ文字が画面の端に寄っていて、少し読みにくい状態でした。

5
00:00:16.725 --> 00:00:20.785
今回は、そこに余白を作り、読みやすい幅へ整えます。

6
00:00:20.785 --> 00:00:24.033
そしてもう一つ、大きなテーマがあります。

7
00:00:24.033 --> 00:00:29.554
シーエスエスは、書いた順番だけでは結果が決まらない、ということです。

8
00:00:29.554 --> 00:00:36.536
見た目が予想と違うとき、むやみに値を増やして試す前に、原因を確認できるようになること。

9
00:00:36.536 --> 00:00:38.485
それが今回のゴールです。

10
00:00:38.485 --> 00:00:41.732
元になる記事は、エスイーの部屋の、シーエスエスのボックスモデルと優先順位、

11
00:00:41.732 --> 00:00:44.980
です。

12
00:00:44.980 --> 00:00:47.952
まず、ボックスモデルの考え方です。

13
00:00:47.952 --> 00:00:52.848
エイチティーエムエルの要素は、すべて箱として扱われます。

14
00:00:52.848 --> 00:00:56.520
その箱は、内側から四つの層でできています。

15
00:00:56.520 --> 00:00:59.842
一番内側が、コンテント、内容そのもの。

16
00:00:59.842 --> 00:01:02.989
その外側に、パディング、内側の余白。

17
00:01:02.989 --> 00:01:05.087
次に、ボーダー、境界線。

18
00:01:05.087 --> 00:01:08.410
一番外側が、マージン、外側の余白です。

19
00:01:08.410 --> 00:01:10.158
実例で考えましょう。

20
00:01:10.158 --> 00:01:12.956
カードの中の文字と、枠との距離。

21
00:01:12.956 --> 00:01:15.578
これはパディングで調整します。

22
00:01:15.578 --> 00:01:21.348
隣のカードとの距離は、マージンや、レイアウトのギャップで扱います。

23
00:01:21.348 --> 00:01:23.621
もう一つ、大切な性質です。

24
00:01:23.621 --> 00:01:27.818
背景色は、通常、パディングの範囲まで塗られます。

25
00:01:27.818 --> 00:01:30.091
マージンには塗られません。

26
00:01:30.091 --> 00:01:35.336
色がどこまで広がるかの違いは、この層の理解から説明できます。

27
00:01:35.336 --> 00:01:39.043
幅の計算で、初心者がつまずくポイントを押さえます。

28
00:01:39.043 --> 00:01:45.714
標準の、コンテントボックスという方式では、ウィドゥス、幅の指定は、内容だけの幅を指します。

29
00:01:45.714 --> 00:01:51.274
たとえば、幅三百ピクセルに、左右二十ピクセルのパディングと、左右一ピクセルのボーダーを足すと、

30
00:01:51.274 --> 00:01:56.834
ボーダーまでの実際の幅は、三百四十二ピクセルになります。

31
00:01:56.834 --> 00:02:00.392
指定したはずの三百より、広くなってしまうのです。

32
00:02:00.392 --> 00:02:04.766
これに対して、ボックスサイジング、ボーダーボックスを指定すると、三百ピクセルの中に、

33
00:02:04.766 --> 00:02:09.140
パディングとボーダーが含まれます。

34
00:02:09.140 --> 00:02:14.032
指定した幅が、そのまま箱の幅になるので、予測が立てやすくなります。

35
00:02:14.032 --> 00:02:17.887
なお、マージンは、どちらの方式でも指定幅の外側です。

36
00:02:17.887 --> 00:02:20.556
この違いが、後の計算ミスを防ぎます。

37
00:02:20.556 --> 00:02:23.517
次に、読みやすい最大幅の決め方です。

38
00:02:23.517 --> 00:02:29.110
ページ全体の入れ物、コンテナには、行が長すぎないよう上限を設けます。

39
00:02:29.110 --> 00:02:35.032
ただし、固定の幅だけを指定すると、小さな画面では、はみ出してしまいます。

40
00:02:35.032 --> 00:02:37.499
そこで使うのが、ミン関数です。

41
00:02:37.499 --> 00:02:41.776
千百二十ピクセルと、画面の利用できる幅から四十ピクセルを引いた値、この二つのうち、

42
00:02:41.776 --> 00:02:46.053
小さい方を採用します。

43
00:02:46.053 --> 00:02:53.455
大きな画面では千百二十ピクセルまで、狭い画面では画面に収まる幅になる、という賢い指定です。

44
00:02:53.455 --> 00:03:00.693
あわせて、マージンインライン、オートで、横方向の余白を自動で配分し、箱を中央に置きます。

45
00:03:00.693 --> 00:03:05.874
なお、パディングブロックは、縦書きも含めた論理方向の指定ですが、この日本語の横書きページでは、

46
00:03:05.874 --> 00:03:11.056
上下のパディングとして働きます。

47
00:03:11.056 --> 00:03:14.207
ここから、今回追加するコードを見ていきます。

48
00:03:14.207 --> 00:03:20.224
前回のスタイルズ ドット シーエスエスは残したまま、末尾へ追加していくのが手順です。

49
00:03:20.224 --> 00:03:28.388
最初の一行、アスタリスク、ボックスサイジング、ボーダーボックスは、全ての要素にボーダーボックスを適用する指定です。

50
00:03:28.388 --> 00:03:32.113
先ほどの幅計算が、ページ全体で予測しやすくなります。

51
00:03:32.113 --> 00:03:34.261
次に、コンテナの幅と中央寄せ。

52
00:03:34.261 --> 00:03:37.126
これは前のスライドで解説したとおりです。

53
00:03:37.126 --> 00:03:41.996
そして、セクションとヒーローに、パディングブロック、六十四ピクセル。

54
00:03:41.996 --> 00:03:45.864
章ごとに縦の余白が空き、文章の区切りがはっきりします。

55
00:03:45.864 --> 00:03:51.164
追加するコードは、大きく三つのまとまりに分けて読むと、追いやすくなります。

56
00:03:51.164 --> 00:03:52.811
追加コードの二つ目です。

57
00:03:52.811 --> 00:03:56.929
カードには、パディング二十四ピクセルで内側の余白を作り、ボーダーで細い枠線を引き、

58
00:03:56.929 --> 00:04:01.048
ボーダーレイディアスで角を丸くします。

59
00:04:01.048 --> 00:04:05.578
次に、ドット カード、プラス、ドット カードというセレクターです。

60
00:04:05.578 --> 00:04:11.892
これは、カードの直後にあるカードだけを選ぶ書き方で、マージントップ、十六ピクセルが付きます。

61
00:04:11.892 --> 00:04:17.109
一枚目のカードには付かず、二枚目以降の上にだけ間隔が空く、という仕組みです。

62
00:04:17.109 --> 00:04:18.344
最後に、画像です。

63
00:04:18.344 --> 00:04:24.933
マックスウィドゥス、百パーセントで、親の幅を超えないようにし、ハイト、オートで縦横比を保ちます。

64
00:04:24.933 --> 00:04:27.816
この二行は、画像のはみ出し防止の定番です。

65
00:04:27.816 --> 00:04:31.220
追加コードの三つ目、フォームまわりです。

66
00:04:31.220 --> 00:04:35.816
意外な落とし穴ですが、ブラウザーの標準指定では、フォームの部品の文字設定が、

67
00:04:35.816 --> 00:04:40.412
本文と一致しないことがあります。

68
00:04:40.412 --> 00:04:46.029
ボタンや入力欄だけ、違うフォントや大きさで表示されてしまうのです。

69
00:04:46.029 --> 00:04:52.327
そこで、フォント、インヘリットを指定して、本文の文字設定を引き継がせます。

70
00:04:52.327 --> 00:04:57.433
インヘリットは、親要素の計算済みの値を使う、という指定です。

71
00:04:57.433 --> 00:05:06.114
あわせて、インプットとセレクトは、幅を百パーセントに広げ、パディング十二ピクセルで入力しやすくします。

72
00:05:06.114 --> 00:05:14.284
フィールドというクラスには、マージンブロック、二十ピクセルで、項目どうしの上下の間隔を作ります。

73
00:05:14.284 --> 00:05:17.934
ここから、後半のテーマ、優先順位です。

74
00:05:17.934 --> 00:05:21.392
まず、二つの仕組みを区別しましょう。

75
00:05:21.392 --> 00:05:23.313
一つ目は、継承です。

76
00:05:23.313 --> 00:05:32.150
本文の文字色やフォントのように、親に指定すると、子の要素へ引き継がれるプロパティがあります。

77
00:05:32.150 --> 00:05:38.105
一方で、パディングやボーダーは、通常、そのまま継承されません。

78
00:05:38.105 --> 00:05:40.602
二つ目は、カスケードです。

79
00:05:40.602 --> 00:05:50.784
同じ要素の、同じプロパティに、複数の指定が競合したとき、どの値を採用するかを決める仕組みがカスケードです。

80
00:05:50.784 --> 00:05:56.355
子に値が伝わる話と、競合した指定の勝敗の話は、別の話です。

81
00:05:56.355 --> 00:06:01.542
ここを混同すると、効かない原因の切り分けができません。

82
00:06:01.542 --> 00:06:05.576
まず、この区別をしっかり押さえてください。

83
00:06:05.576 --> 00:06:09.594
カスケードで勝敗を決める中心が、詳細度です。

84
00:06:09.594 --> 00:06:17.631
詳細度は、アイディー、クラス、要素などの組み合わせから計算する、指定の具体性の強さです。

85
00:06:17.631 --> 00:06:23.476
たとえば、ドット カード、ピーは、ピーだけの指定より具体的です。

86
00:06:23.476 --> 00:06:26.398
画面の実験コードを見てください。

87
00:06:26.398 --> 00:06:30.782
カード内の段落を、先に書いたルールでは濃い緑に。

88
00:06:30.782 --> 00:06:36.079
後に書いた、ピーだけのルールでは、別の色に指定しています。

89
00:06:36.079 --> 00:06:39.367
結果は、先に書いた方が採用されます。

90
00:06:39.367 --> 00:06:41.376
詳細度が高いからです。

91
00:06:41.376 --> 00:06:46.673
詳細度も同じ場合に限って、後に書いたルールが優先されます。

92
00:06:46.673 --> 00:06:49.961
後から書けば必ず勝つ、わけではない。

93
00:06:49.961 --> 00:06:52.700
ここが今回一番のポイントです。

94
00:06:52.700 --> 00:06:57.084
実験コードは、確認後に二つとも削除してください。

95
00:06:57.084 --> 00:06:59.802
優先順位を調べる実践的な手順です。

96
00:06:59.802 --> 00:07:04.759
まず注意点として、インポータントを安易に増やさないでください。

97
00:07:04.759 --> 00:07:10.675
強い指定が増えるほど、後の変更が、どこで負けているのか追いにくくなります。

98
00:07:10.675 --> 00:07:14.033
調べ方は、前回も出てきた開発者ツールです。

99
00:07:14.033 --> 00:07:19.789
スタイルズで、どの指定が適用され、どれに打ち消し線が付いているかを見る。

100
00:07:19.789 --> 00:07:23.946
コンピューテッドで、最終的に採用された値を確認する。

101
00:07:23.946 --> 00:07:25.385
この二段構えです。

102
00:07:25.385 --> 00:07:32.741
その際、その値が、親からの継承で来たものか、その要素へ直接指定したものかも区別してください。

103
00:07:32.741 --> 00:07:35.459
もう一つ、レイアウトの注意点です。

104
00:07:35.459 --> 00:07:39.776
上下のマージンは、隣り合うと相殺される場合があります。

105
00:07:39.776 --> 00:07:43.773
二つの余白が、常に足し算になるわけではありません。

106
00:07:43.773 --> 00:07:47.851
部品間の間隔は、次回のフレックスボックスやグリッドのギャップで管理すると、

107
00:07:47.851 --> 00:07:51.928
意図を表現しやすくなります。

108
00:07:51.928 --> 00:07:53.629
最後に、練習問題です。

109
00:07:53.629 --> 00:07:58.347
一つ目、カードのパディングを、二十四ピクセルから、三十二ピクセルに変えて、

110
00:07:58.347 --> 00:08:03.064
文字と枠の距離だけが変わるかを確認してください。

111
00:08:03.064 --> 00:08:11.262
二つ目、ブラウザーの幅を、三百九十ピクセル程度に狭くして、画像がはみ出さずに縮小されるかを調べてください。

112
00:08:11.262 --> 00:08:15.361
もし、はみ出しがある場合は、開発者ツールで、その要素の、コンテント、パディング、

113
00:08:15.361 --> 00:08:19.459
ボーダーを順に確認します。

114
00:08:19.459 --> 00:08:20.387
まとめです。

115
00:08:20.387 --> 00:08:25.956
今日は、ボックスモデルの四つの層、ボーダーボックスの幅計算、画面に合わせて縮む最大幅、

116
00:08:25.956 --> 00:08:31.524
継承とカスケードの区別、そして詳細度と記述順を学びました。

117
00:08:31.524 --> 00:08:36.164
次回は、フレックスボックスとグリッドでレイアウトを作ります。

118
00:08:36.164 --> 00:08:37.556
お疲れさまでした。