VIDEO LESSON

CSSのbox-sizingの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:32動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、ボックスサイジングです。
0:06これは、ウィドスやハイトで指定したサイズに、内側の余白であるパディングと、
0:12枠線であるボーダーを含めるかどうかを決めるプロパティです。
0:17幅を指定したはずなのに、余白や枠線の分だけ箱が大きくなってしまった、という経験はありませんか。
0:24その原因の多くが、この設定にあります。
0:27この動画では、二つの値の違いを数字で比べながら、なぜボーダーボックスが寸法を管理しやすいのか、
0:33実例と注意点まで順番に解説します。
0:38幅と高さの両方に効く設定なので、最初に押さえておくと、後のレイアウト学習がぐっと楽になります。
0:45まず基本の書き方です。
0:47セレクターを書いたら、ボックスサイジングと書き、コロンのあとに値、最後にセミコロンを付けます。
0:53スライドの例では、ボーダーボックスを指定しています。
0:57これで、この要素ではウィドスやハイトの指定が、パディングとボーダーを含んだ外側の大きさとして扱われます。
1:04エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
1:13まずはこの一行を書いて、箱の大きさの測り方がどう変わるか確かめてみましょう。
1:18次に、指定できる値を確認します。
1:20主な値は二つです。
1:22コンテンツボックスは、ウィドスやハイトの対象が内容の領域だけになります。
1:27パディングとボーダーは、その外側に足し算されるので、箱全体は指定値より大きくなります。
1:34一方、ボーダーボックスは、パディングとボーダーを含めた領域が対象になります。
1:39指定した幅の中に余白と枠線が収まるので、箱全体の大きさは指定値どおりになります。
1:45名前の違いではなく、サイズをどこまで含めて測るか、という測り方の違いとして覚えてください。
1:52高さについても考え方はまったく同じで、ハイトにパディングとボーダーを含めるかどうかが切り替わります。
1:59初期値と継承について整理します。
2:02ボックスサイジングの初期値は、コンテンツボックスです。
2:06つまり、何も指定しなければ、余白と枠線は指定した幅の外側に足されます。
2:11そして、このプロパティは親から通常は継承しません。
2:15親にボーダーボックスを指定しても、子要素に自動では伝わらないので注意が必要です。
2:21また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
2:26普段は二つの値を直接書くことがほとんどです。
2:30継承しない点が、後で紹介する全体への適用方法につながります。
2:35記事の比較を、数字で確かめます。
2:38横幅を十四レム、パディングを二レム、枠線の太さを八ピクセルとした箱を考えます。
2:44ボーダーボックスなら、箱全体の幅は十四レムのままです。
2:48余白と枠線は、その内側に収まります。
2:51一方、コンテンツボックスでは、内容の十四レムに、左右のパディング合計四レムと、
2:58左右の枠線合計十六ピクセルが外側へ足され、全体は十八レムと十六ピクセルになります。
3:05同じウィドスでも、全体の大きさがこれだけ違うのです。
3:09数字で追うと、違いがはっきりします。
3:12逆に言えば、ボーダーボックスでは内容を表示できる幅が、余白と枠線の分だけ狭くなります。
3:19その点も合わせてイメージしておきましょう。
3:22では、なぜボーダーボックスが便利なのでしょうか。
3:26理由は、指定した幅がそのまま見た目の幅になるからです。
3:31たとえば幅五十パーセントの箱を二つ横に並べたいとき、コンテンツボックスではパディングの分だけ合計が百パーセントを超え、
3:36並びが崩れることがあります。
3:42ボーダーボックスなら、余白は幅の内側に収まるので、合計は百パーセントのまま保てます。
3:49幅百パーセントにパディングを付けても、親からはみ出しにくいのも同じ理由です。
3:55レイアウトの計算が単純になるのが、最大の利点です。
3:59フォームの入力欄でも、幅いっぱいにパディング付きで表示できるので、親からはみ出す心配が減ります。
4:06ここからは記事の実例です。
4:08エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。
4:14その中には、ハロー、シーエスエスから始まる文章を入れ、文章を増やして折り返しも確認できるようにしています。
4:22頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
4:27親と子の入れ子構造が、そのまま後のシーエスエスの対象になります。
4:31比べたいのはボックスサイジングだけなので、文章などの土台は固定したままにします。
4:37ステージという親を用意することで、子の大きさの変化が、親との対比で分かりやすくなります。
4:43土台のシーエスエスです。
4:44ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意します。
4:51さらに幅を十四レム、パディングを二レム、枠線を八ピクセルにして、違いが大きく出るようにします。
4:58最後の行でボックスサイジングをボーダーボックスにすると、箱全体は十四レムに保たれます。
5:04次に最後の行だけをコンテンツボックスへ置き換えると、余白と枠線が外側に足され、
5:08箱が一回り大きくなります。
5:12この一行の違いが実例の比較ポイントです。
5:15保存して再読み込みし、箱の外側の大きさに注目してください。
5:19活用場面を考えてみましょう。
5:21実務でよく使われるのが、すべての要素にボーダーボックスを指定する書き方です。
5:27アスタリスクで全要素を選び、最初にまとめて指定しておくと、ページ内のどの箱も同じ測り方で扱えます。
5:33ボックスサイジングは継承しないため、要素ごとに書くより、全体へ一度に適用する方が漏れがありません。
5:40カードの幅をそろえたり、入力欄にパディングを付けても幅が変わらないようにしたりと、
5:44部品づくりの土台として活躍します。
5:49新しいページを作るときの最初の数行として覚えておきましょう。
5:53ライブラリーやフレームワークの多くも、この全体指定を前提に設計されています。
5:58効かないと感じたときの注意点です。
6:01まず最も間違えやすいのは、外側の余白であるマージンの扱いです。
6:05マージンは、ボーダーボックスでも幅には含まれません。
6:09含まれるのはパディングとボーダーまでで、マージンは常に対象外です。
6:14次に、一部の要素だけ指定が漏れていると、箱ごとに測り方がそろわず、大きさがばらつきます。
6:21そのうえで、開発者ツールで順番に調べます。
6:24ネットワークでスタイルシートの取得、エレメンツでクラスの一致、スタイルズで上書きの有無、
6:29コンピューテッドで最終的な値を確認してください。
6:35固定幅とパディングを組み合わせたときは、全体の寸法も数値で確かめましょう。
6:40最後に、三百二十ピクセル程度の狭い画面幅でも、内容がはみ出さずに読めるかを確認しましょう。
6:47最後に互換性とまとめです。
6:49記事が参照するエムディーエヌの記録では、プロパティ本体はクローム十以降、
6:55エッジ十二以降、ファイアフォックス二十九以降、サファリ五点一以降などで対応が示され、
7:01二つの値自体はさらに古い版から使えるため、安心して使えるプロパティです。
7:07まとめます。
7:08ボックスサイジングは、ウィドスやハイトにパディングとボーダーを含めるかを決める設定で、
7:13初期値はコンテンツボックス、継承はしませんでした。
7:18練習として、二つの値の違いを数字で説明し、値を一つずつだけ変えて結果を比べてみてください。
7:25関連するウィドスやハイトも学ぶと、サイズの制御がより正確になります。
7:30お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

box-sizingの役割と主な指定値を解説。同じwidthでも、border-boxの方が外側の幅を指定値に保ちます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのbox-sizingの使い方：指定値・実例・効かない原因とブラウザー互換性 →