WEBVTT

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

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

3
00:00:03.816 --> 00:00:06.995
今回のテーマは、ボックスサイジングです。

4
00:00:06.995 --> 00:00:12.242
これは、ウィドスやハイトで指定したサイズに、内側の余白であるパディングと、

5
00:00:12.242 --> 00:00:17.488
枠線であるボーダーを含めるかどうかを決めるプロパティです。

6
00:00:17.488 --> 00:00:24.960
幅を指定したはずなのに、余白や枠線の分だけ箱が大きくなってしまった、という経験はありませんか。

7
00:00:24.960 --> 00:00:27.981
その原因の多くが、この設定にあります。

8
00:00:27.981 --> 00:00:33.068
この動画では、二つの値の違いを数字で比べながら、なぜボーダーボックスが寸法を管理しやすいのか、

9
00:00:33.068 --> 00:00:38.156
実例と注意点まで順番に解説します。

10
00:00:38.156 --> 00:00:45.628
幅と高さの両方に効く設定なので、最初に押さえておくと、後のレイアウト学習がぐっと楽になります。

11
00:00:45.628 --> 00:00:47.144
まず基本の書き方です。

12
00:00:47.144 --> 00:00:53.620
セレクターを書いたら、ボックスサイジングと書き、コロンのあとに値、最後にセミコロンを付けます。

13
00:00:53.620 --> 00:00:57.202
スライドの例では、ボーダーボックスを指定しています。

14
00:00:57.202 --> 00:01:04.368
これで、この要素ではウィドスやハイトの指定が、パディングとボーダーを含んだ外側の大きさとして扱われます。

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

16
00:01:13.324 --> 00:01:18.560
まずはこの一行を書いて、箱の大きさの測り方がどう変わるか確かめてみましょう。

17
00:01:18.560 --> 00:01:20.953
次に、指定できる値を確認します。

18
00:01:20.953 --> 00:01:22.299
主な値は二つです。

19
00:01:22.299 --> 00:01:27.683
コンテンツボックスは、ウィドスやハイトの対象が内容の領域だけになります。

20
00:01:27.683 --> 00:01:34.114
パディングとボーダーは、その外側に足し算されるので、箱全体は指定値より大きくなります。

21
00:01:34.114 --> 00:01:39.797
一方、ボーダーボックスは、パディングとボーダーを含めた領域が対象になります。

22
00:01:39.797 --> 00:01:45.780
指定した幅の中に余白と枠線が収まるので、箱全体の大きさは指定値どおりになります。

23
00:01:45.780 --> 00:01:52.510
名前の違いではなく、サイズをどこまで含めて測るか、という測り方の違いとして覚えてください。

24
00:01:52.510 --> 00:01:59.988
高さについても考え方はまったく同じで、ハイトにパディングとボーダーを含めるかどうかが切り替わります。

25
00:01:59.988 --> 00:02:02.418
初期値と継承について整理します。

26
00:02:02.418 --> 00:02:06.517
ボックスサイジングの初期値は、コンテンツボックスです。

27
00:02:06.517 --> 00:02:11.832
つまり、何も指定しなければ、余白と枠線は指定した幅の外側に足されます。

28
00:02:11.832 --> 00:02:15.628
そして、このプロパティは親から通常は継承しません。

29
00:02:15.628 --> 00:02:21.702
親にボーダーボックスを指定しても、子要素に自動では伝わらないので注意が必要です。

30
00:02:21.702 --> 00:02:26.257
また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、

31
00:02:26.257 --> 00:02:30.813
普段は二つの値を直接書くことがほとんどです。

32
00:02:30.813 --> 00:02:35.368
継承しない点が、後で紹介する全体への適用方法につながります。

33
00:02:35.368 --> 00:02:38.011
記事の比較を、数字で確かめます。

34
00:02:38.011 --> 00:02:44.453
横幅を十四レム、パディングを二レム、枠線の太さを八ピクセルとした箱を考えます。

35
00:02:44.453 --> 00:02:48.913
ボーダーボックスなら、箱全体の幅は十四レムのままです。

36
00:02:48.913 --> 00:02:51.886
余白と枠線は、その内側に収まります。

37
00:02:51.886 --> 00:02:58.493
一方、コンテンツボックスでは、内容の十四レムに、左右のパディング合計四レムと、

38
00:02:58.493 --> 00:03:05.100
左右の枠線合計十六ピクセルが外側へ足され、全体は十八レムと十六ピクセルになります。

39
00:03:05.100 --> 00:03:09.395
同じウィドスでも、全体の大きさがこれだけ違うのです。

40
00:03:09.395 --> 00:03:12.368
数字で追うと、違いがはっきりします。

41
00:03:12.368 --> 00:03:19.471
逆に言えば、ボーダーボックスでは内容を表示できる幅が、余白と枠線の分だけ狭くなります。

42
00:03:19.471 --> 00:03:22.940
その点も合わせてイメージしておきましょう。

43
00:03:22.940 --> 00:03:26.739
では、なぜボーダーボックスが便利なのでしょうか。

44
00:03:26.739 --> 00:03:31.014
理由は、指定した幅がそのまま見た目の幅になるからです。

45
00:03:31.014 --> 00:03:36.792
たとえば幅五十パーセントの箱を二つ横に並べたいとき、コンテンツボックスではパディングの分だけ合計が百パーセントを超え、

46
00:03:36.792 --> 00:03:42.570
並びが崩れることがあります。

47
00:03:42.570 --> 00:03:49.220
ボーダーボックスなら、余白は幅の内側に収まるので、合計は百パーセントのまま保てます。

48
00:03:49.220 --> 00:03:55.235
幅百パーセントにパディングを付けても、親からはみ出しにくいのも同じ理由です。

49
00:03:55.235 --> 00:03:59.193
レイアウトの計算が単純になるのが、最大の利点です。

50
00:03:59.193 --> 00:04:06.792
フォームの入力欄でも、幅いっぱいにパディング付きで表示できるので、親からはみ出す心配が減ります。

51
00:04:06.792 --> 00:04:08.606
ここからは記事の実例です。

52
00:04:08.606 --> 00:04:14.744
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。

53
00:04:14.744 --> 00:04:22.138
その中には、ハロー、シーエスエスから始まる文章を入れ、文章を増やして折り返しも確認できるようにしています。

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

55
00:04:27.021 --> 00:04:31.485
親と子の入れ子構造が、そのまま後のシーエスエスの対象になります。

56
00:04:31.485 --> 00:04:37.066
比べたいのはボックスサイジングだけなので、文章などの土台は固定したままにします。

57
00:04:37.066 --> 00:04:43.204
ステージという親を用意することで、子の大きさの変化が、親との対比で分かりやすくなります。

58
00:04:43.204 --> 00:04:44.990
土台のシーエスエスです。

59
00:04:44.990 --> 00:04:51.240
ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意します。

60
00:04:51.240 --> 00:04:58.234
さらに幅を十四レム、パディングを二レム、枠線を八ピクセルにして、違いが大きく出るようにします。

61
00:04:58.234 --> 00:05:04.634
最後の行でボックスサイジングをボーダーボックスにすると、箱全体は十四レムに保たれます。

62
00:05:04.634 --> 00:05:08.503
次に最後の行だけをコンテンツボックスへ置き換えると、余白と枠線が外側に足され、

63
00:05:08.503 --> 00:05:12.372
箱が一回り大きくなります。

64
00:05:12.372 --> 00:05:15.348
この一行の違いが実例の比較ポイントです。

65
00:05:15.348 --> 00:05:19.664
保存して再読み込みし、箱の外側の大きさに注目してください。

66
00:05:19.664 --> 00:05:21.641
活用場面を考えてみましょう。

67
00:05:21.641 --> 00:05:27.008
実務でよく使われるのが、すべての要素にボーダーボックスを指定する書き方です。

68
00:05:27.008 --> 00:05:33.928
アスタリスクで全要素を選び、最初にまとめて指定しておくと、ページ内のどの箱も同じ測り方で扱えます。

69
00:05:33.928 --> 00:05:40.849
ボックスサイジングは継承しないため、要素ごとに書くより、全体へ一度に適用する方が漏れがありません。

70
00:05:40.849 --> 00:05:44.945
カードの幅をそろえたり、入力欄にパディングを付けても幅が変わらないようにしたりと、

71
00:05:44.945 --> 00:05:49.040
部品づくりの土台として活躍します。

72
00:05:49.040 --> 00:05:53.277
新しいページを作るときの最初の数行として覚えておきましょう。

73
00:05:53.277 --> 00:05:58.644
ライブラリーやフレームワークの多くも、この全体指定を前提に設計されています。

74
00:05:58.644 --> 00:06:01.221
効かないと感じたときの注意点です。

75
00:06:01.221 --> 00:06:05.922
まず最も間違えやすいのは、外側の余白であるマージンの扱いです。

76
00:06:05.922 --> 00:06:09.864
マージンは、ボーダーボックスでも幅には含まれません。

77
00:06:09.864 --> 00:06:14.867
含まれるのはパディングとボーダーまでで、マージンは常に対象外です。

78
00:06:14.867 --> 00:06:21.538
次に、一部の要素だけ指定が漏れていると、箱ごとに測り方がそろわず、大きさがばらつきます。

79
00:06:21.538 --> 00:06:24.722
そのうえで、開発者ツールで順番に調べます。

80
00:06:24.722 --> 00:06:29.877
ネットワークでスタイルシートの取得、エレメンツでクラスの一致、スタイルズで上書きの有無、

81
00:06:29.877 --> 00:06:35.032
コンピューテッドで最終的な値を確認してください。

82
00:06:35.032 --> 00:06:40.641
固定幅とパディングを組み合わせたときは、全体の寸法も数値で確かめましょう。

83
00:06:40.641 --> 00:06:47.464
最後に、三百二十ピクセル程度の狭い画面幅でも、内容がはみ出さずに読めるかを確認しましょう。

84
00:06:47.464 --> 00:06:49.484
最後に互換性とまとめです。

85
00:06:49.484 --> 00:06:55.389
記事が参照するエムディーエヌの記録では、プロパティ本体はクローム十以降、

86
00:06:55.389 --> 00:07:01.294
エッジ十二以降、ファイアフォックス二十九以降、サファリ五点一以降などで対応が示され、

87
00:07:01.294 --> 00:07:07.199
二つの値自体はさらに古い版から使えるため、安心して使えるプロパティです。

88
00:07:07.199 --> 00:07:08.131
まとめます。

89
00:07:08.131 --> 00:07:13.414
ボックスサイジングは、ウィドスやハイトにパディングとボーダーを含めるかを決める設定で、

90
00:07:13.414 --> 00:07:18.698
初期値はコンテンツボックス、継承はしませんでした。

91
00:07:18.698 --> 00:07:25.690
練習として、二つの値の違いを数字で説明し、値を一つずつだけ変えて結果を比べてみてください。

92
00:07:25.690 --> 00:07:30.973
関連するウィドスやハイトも学ぶと、サイズの制御がより正確になります。

93
00:07:30.973 --> 00:07:32.372
お疲れさまでした。