CSS ボックスモデルの基本については、CSS 入門のモジュールで調べました。 この記事は復習を提供し、主題に関するいくつかのさらなる詳細に飛び込むでしょう。

前提知識: HTML の基礎(HTML 入門を学ぶ)、および CSS の機能の考え方(CSS 入門を学ぶ)。
学習目標: CSS ボックスモデルの基本を復習し、さらに詳細をいくつか追加します。

ボックスのプロパティ

間違いなくご存じのとおり、ドキュメント内のすべての要素は、ドキュメントレイアウト内の長方形のボックスとして構造化されており、そのプロパティは次のように変更できます。

  • widthheight は、コンテンツボックス(content box)の幅と高さを設定します。
  • padding プロパティのファミリーは、パディングの幅を設定します(一度に一つずつ設定できる padding-bottom のような個別指定プロパティを忘れないでください)。
  • border プロパティのファミリーは、ボーダー(境界線)の幅、スタイル、色を設定します(利用可能な多くの個別指定のボーダープロパティがあります)。
  • margin プロパティのファミリーは、マージン(CSS ボックスを囲む外側の領域)の幅を設定し、レイアウト内の他の CSS ボックスを押し上げます(ここでも、margin-bottom のような個別指定プロパティが利用可能です)。

他にも次のようなことは、覚えておく価値があります。

  • ボックスの高さはパーセントの長さを守りません。 ボックスの高さは、(ピクセルや em など)特定の絶対的な高さが設定されていない限り、常にボックスのコンテンツの高さを採用します。 これは、ページ上のすべてのボックスの高さのデフォルトをビューポートの高さの 100% にするよりも便利です。
  • ボーダーはパーセントの幅の設定も無視します。
  • マージンにはマージンの相殺(margin collapsing)という特定のふるまいがあります。 2つのボックスが互いに接触している場合、それらの間の距離は、2つの接触しているマージンのうち最大のもので、合計ではありません。

: より完全な概要と例については、ボックスモデルの記事のボックスのプロパティのセクションを参照してください。

オーバーフロー

ボックスのサイズを(固定ピクセルの幅や高さなど)絶対値で設定すると、コンテンツが許容サイズ内に収まらないことがあります。 その場合、コンテンツがボックスからあふれます。 そのような場合に起こることを制御するために、overflow プロパティを使用することができます。 可能な値はいくつかありますが、最も一般的なものは次のとおりです。

  • auto: コンテンツが多すぎると、あふれているコンテンツは隠され、スクロールバーが表示されてユーザーはすべてのコンテンツをスクロールして見ることができます。
  • hidden: コンテンツが多すぎると、あふれているコンテンツは隠されます。
  • visible: コンテンツが多すぎると、あふれているコンテンツがボックスの外側に表示されます(これは通常デフォルトのふるまいです)。

: より完全な概要と例については、ボックスモデルの記事のオーバーフローのセクションを参照してください。

背景クリップ

ボックスの背景は色と画像で構成され、互いに重なり合っています(background-colorbackground-image)。 それらはボックスに適用され、そのボックスの下に描画されます。 デフォルトでは、背景はボーダーの外側の端まで広がります。 多くの場合これで問題ありませんが、場合によっては面倒なことがあります(コンテンツの端までしか広げたくないタイル状の背景画像がある場合はどうしますか?)。 このふるまいは、ボックスの background-clip プロパティを設定することで調整できます。

: 例については、ボックスモデルの記事の背景クリップのセクションを参照してください。

アウトライン

ボックスのアウトライン(outline、輪郭線)は、ボーダー(境界線)のように見えますが、ボックスモデルの一部ではありません。 ボーダーのようにふるまいますが、ボックスのサイズを変更せずにボックスの上に描画されます(具体的には、ボーダーボックスの外側、マージン領域の内側にアウトラインが描画されます)。

: outline プロパティを使用するときは注意してください。 ユーザーがクリックしたときにリンクなどのウェブページのアクティブ部分を強調表示するために、アクセシビリティ上の理由から使用されることがあります。 あなたがアウトラインの利用法を見いだした場合、ユーザーを混乱させる可能性があるので、リンクの強調表示のように見せないようにしてください。

高度なボックスのプロパティ

これで簡単に復習しました。 役に立つと思われるいくつかのより高度なボックスのプロパティを見てみましょう。

幅と高さの制約を設定する

絶対サイズではなくサイズの制約を設定することで、コンテンツボックスのサイズをより柔軟に処理できるようにする他のプロパティもあります。 これは、プロパティ min-widthmax-widthmin-heightmax-height を使用して行えます。

レイアウトの幅を柔軟にしたい場合の明らかな使用法は、外側のコンテナの幅をパーセントで設定しますが、レイアウトの見栄えが悪くなるため、幅が広すぎたり狭すぎたりしないようにしたい場合もあります。 ここでの選択肢の1つは、(後で説明する)レスポンシブウェブデザインのテクニックを使用することですが、もっと簡単な方法は、レイアウトに最大幅と最小幅の制約を設定することです。

width: 70%;
max-width: 1280px;
min-width: 480px;

次のラインと組み合わせることもできます。 これは、適用先のコンテナをその親の内側の中央に配置します。

margin: 0 auto;

0 を指定すると上下のマージンは 0 になり、auto は(この場合)コンテナの左右のマージンの間で利用可能なスペースを共有して、コンテナを中央に配置します。 その結果、コンテナが最小幅と最大幅の制約内に収まると、ビューポートの幅いっぱいに表示されます。 幅が  1280px を超えると、レイアウトは 1280px 幅のままになり、利用可能なスペースの中央に配置され始めます。 幅が 480px を下回ると、ビューポートはコンテナよりも小さくなり、すべて見るにはスクロールする必要があります。

上の例を min-max-container.html でライブで見ることができます(ソースコードを参照)。

max-width の別の良い用途は、メディア(例えば画像や動画)をコンテナ内に制約し続けることです。 上の例に戻ると、画像は問題を引き起こします — コンテナが画像よりも狭くなるまでは問題ないように見えますが、(固定幅であるため)この時点で画像はコンテナをオーバーフローし始めます。 この画像を解決するために、次のように宣言することができます。

display: block;
margin: 0 auto;
max-width: 100%;

最初の2つは、それをブロック要素のようにふるまわせ、それを親コンテナの中央に配置します。 しかし、本当の魔法は3番目のものにあります。 画像の max-width を 100% に設定すると、画像の幅をコンテナの幅より小さく制約します。 したがって、コンテナが縮小されて画像の幅より小さくなると、画像もそれに合わせて縮小されます。

min-max-image-container.html でこの修正された例を試すことができます(ソースコードを参照)。

: このテクニックは Internet Explorer 7 までさかのぼって機能するので、クロスブラウザーでうまく機能します。

ボックスモデルを完全に変更する

ボックスの全幅は、widthpadding-rightpadding-leftborder-rightborder-left の各プロパティの合計です。 場合によってはこれは面倒です(例えば、ピクセルで表現されたボーダーとパディングの 50% の全幅のボックスを持ちたい場合はどうしますか?)。 このような問題を回避するために、box-sizing プロパティを使ってボックスモデルを微調整することができます。 値 border-box を使用すると、ボックスモデルは次のような新しいモデルに変更されます。

実例を見てみましょう。 2つの同じ <div> 要素を設定し、それぞれに同じ幅、ボーダー、パディングを与えます。 また、JavaScript を使用して、各ボックスの幅の計算値(ピクセル単位の最終的な画面上の値)を出力します。 唯一の違いは、下のボックスに box-sizing: border-box を指定したことですが、上のボックスはデフォルトのふるまいのままにしています。

まず、HTML です。

<div class="one"></div>
<div class="two"></div>

そして、CSS です。

html {
  font-family: sans-serif;
  background: #ccc;
}

.one, .two {
  background: red;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px auto;
}

.two {
  box-sizing: border-box;
}

最後に、全体を計算した幅を測定するための小さな JavaScript です。

var one = document.querySelector('.one');
var two = document.querySelector('.two');

function outputWH(box) {
  var width = box.offsetWidth;
  var height = box.offsetHeight;
  box.textContent = 'Width: ' + width + 'px, Height: ' + height + 'px.';
}

outputWH(one);
outputWH(two);

これにより、次のような結果が得られます。

それで、ここで何が起こったのでしょうか? ご想像のとおり、最初のボックスの幅と高さは、コンテンツ + パディング + ボーダーに等しくなります。 2番目のボックスの幅と高さは、CSS でコンテンツに設定した幅と高さと同じです。 パディングとボーダーは、幅と高さの合計に加算されていません。 代わりに、コンテンツのスペースをいくらか占有して、コンテンツを小さくし、全体の寸法を同じに保っています。

この例を box-sizing-example.html でライブで見ることができます(ソースコードを参照)。

ボックスの display の種類

これまでに述べたことはすべて、ブロックレベル要素を表すボックスにも当てはまります。 ただし、CSS には他の種類のボックスがあり、ふるまいが異なります。 要素に適用されるボックスの種類は display プロパティで指定されます。

一般的な display の種類

display に使用できる値はたくさんありますが、最も一般的な3つの値は blockinlineinline-block です。

  • ブロック(block)ボックスは、他のボックスの上に重ねられたボックスとして定義され(つまり、ボックスの前後のコンテンツが別のラインに表示され)、幅と高さを設定できます。 上記のボックスモデル全体はブロックボックスに適用されます。
  • インライン(inline)ボックスはブロックボックスの反対です。 ドキュメントのテキストと一緒に流れます(つまり、周囲のテキストや他のインライン要素と同じラインに表示され、そのコンテンツは段落内のテキストのラインのようにテキストの流れに合わせて分割されます)。 幅と高さの設定は、インラインボックスには影響しません。 インラインボックスに設定されたパディング、マージン、ボーダーは周囲のテキストの位置を変更しますが、周囲のブロックボックスの位置には影響しません。
  • インラインブロックボックス(inline-block)は、最初の2つの間にあります。 インラインボックスのように前後に改行を入れずに周囲のテキストと一緒に流れますが、幅と高さを使用してサイズ変更でき、ブロックボックスのようにブロックの完全性を維持できます — 段落のラインにまたがって分割されることはありません(1ライン目に十分なスペースがないためテキストのラインをオーバーフローするインラインブロックボックスは、2ライン目にドロップダウンされ、2つのラインにまたがることはありません)。

デフォルトでは、ブロックレベル要素には display: block; が設定され、インライン要素には display: inline; が設定されています。

: より完全な概要と例については、ボックスモデルの記事の CSS ボックスの種類のセクションを参照してください。

珍しい display の種類

あなたの旅で出くわすことになる display プロパティには、あまり一般的ではない値もあります。 これらのうちのいくつかはしばらく前から出回っており、かなりよくサポートされていますが、他のものはより新しく、あまりサポートされていません。 これらの値は大体において、ウェブページやウェブアプリのレイアウトを簡単に作成できるようにするために作成されました。 最も興味深いものは次のとおりです。

  • display: table — 表の HTML を悪用することなく、表以外の要素を使用して表レイアウトをエミュレートすることができます。 これについてもっと読むためには、表レイアウトを見てください。
  • display: flex — 一連のコンテナを柔軟な等幅の列に配置したり、コンテンツを縦方向に中央寄せしたりするなど、長い間 CSS を苦しめてきた多くの古典的なレイアウトの問題を解決できます。 詳しくは、フレックスボックスを参照してください。
  • display: grid — CSS にグリッドシステムを簡単に実装するためのネイティブな方法を提供しますが、伝統的には、ハックっぽい CSS グリッドフレームワークに依存してきました。 CSS グリッドの記事では、ネイティブの CSS グリッドの使い方を説明し、伝統的な CSS グリッドフレームワークを覗き見します。

次は何ですか?

簡単に復習した後、ボックスを操作するための CSS のいくつかのより高度な機能を見て、いくつかの高度なレイアウト機能に触れることによって終わりました。 これらすべてが背後にあるので、今度は背景を見ていきます。

このモジュール内の文書

ドキュメントのタグと貢献者

このページの貢献者: Wind1808, mdnwebdocs-bot
最終更新者: Wind1808,