CSS ボックスモデルは Web 上のレイアウトの基盤です。各要素は長方形のボックスとして表され、ボックスの内容、余白、境界線、余白は玉ねぎの層のように互いに重なっています。 ブラウザが Web ページのレイアウトをレンダリングするときに、各ボックスのコンテンツに適用されるスタイル、周囲のタマネギ層の大きさ、およびボックス同士の位置関係がわかります。CSS レイアウトを作成する方法を理解する前に、ボックスモデルを理解する必要があります - これがこの記事で見ることになるものです。

前提条件: 基本的なコンピュータリテラシー、基本的なソフトウェアのインストールファイル操作の基本的な知識、HTMLの基本 (HTML の概要)、およびCSS の機能の考え方 (このモジュールの以前の記事を調べてください)
目的: CSS ボックスモデルがどのように機能するのか、そして個々の要素がどのようにページ上にレイアウトされるのかを学ぶ。

ボックスのプロパティ

ドキュメント内のすべての要素は、ドキュメントレイアウト内の長方形のボックスとして構造化されています。サイズと「玉ねぎレイヤー」は、特定の CSS プロパティを使用して調整できます。関連するプロパティは次のとおりです。

width and height

width および height プロパティはコンテンツボックスの幅と高さを設定します。これは、ボックスのコンテンツが表示される領域です。テキストコンテンツはボックス内に設定され、他のボックスはネストされた子要素を表します。

メモ: コンテンツボックスのサイズを処理するためのより微妙な方法、つまり絶対サイズではなくサイズの制限を設定することを可能にする他のプロパティが存在します。 これは、プロパティmin-widthmax-widthmin-height および max-height を使用して実行できます。

padding
Padding とは CSS ボックスの内側の余白、つまりコンテンツボックスの外側の端と境界の内側の端の間の余白のことです。このレイヤのサイズは padding 短縮プロパティを使用して一度に4辺すべてに設定することも、padding-toppadding-rightpadding-bottompadding-left の各プロパティを使用して一度に1辺ずつに設定することもできます。
border
CSS ボックスの border は、padding の外側の端とマージンの内側の端の間にあります。デフォルトでは境界線のサイズは0で、見えないようになっていますが、境界線の太さ、スタイル、色を設定して表示させることができます。border 短縮プロパティを使用すると、四辺すべてにこれらすべてを一度に設定できます (例:border: 1px solid black)。より具体的なスタイリングが必要なときのために、多くの異なる手書きの性質に分けることができます:
margin

margin は CSS ボックスを囲み、レイアウト内の他の CSS ボックスを押し上げます。padding のように動作します。省略形のプロパティは margin で、個々のプロパティは margin-topmargin-rightmargin-left です。

メモ: マージンにはマージンの相殺と呼ばれる特殊な動作があります。2つのボックスが互いに接触している場合、それらの間の距離は、2つの接触しているマージンの最大値であり、合計ではありません。

アクティブラーニング: ボックスで遊ぶ

ここでアクティブラーニングセクションに飛び込んで、上で説明したボックスモデルの詳細のいくつかを説明するために演習を実行しましょう。以下のライブエディタでこれらの演習を試すことができますが、別々の HTML ファイルと CSS ファイルをローカルで作成して代わりに別々のブラウザウィンドウで試すと、効果の一部が見やすくなります。サンプルコードは Github にあります

間違えた場合は、リセットボタンを使用していつでもリセットできます。本当に動かなくなったら、Show solution ボタンを押して答えを確認してください。

以下の編集可能なサンプルでは、3つのボックスのセットがあります。すべてのボックスにテキストコンテンツが含まれており、ボディの幅全体に広がるようにスタイルが設定されています。それらはマークアップの <header><main>、および <footer> の各要素で表されます。下の3つの CSS ルール、つまり各ボックスを個別にターゲットとするルールに集中して、次のことを試してください。

  • ブラウザの開発者ツールを開き、DOM インスペクタで要素をクリックして、ページ上の個々の要素のボックスモデルを確認します。この方法については、ブラウザ開発者ツールの探索を参照してください。各ブラウザにはボックスモデルビューアがあり、各ボックスに適用される余白、境界線、余白、コンテンツボックスの大きさ、および要素が占める総スペースを正確に表示します
  • <main> 要素に margin-bottom を20 px と設定します。<footer> 要素に15 px と margin-top を設定しましょう。これらのアクションのうち2番目のアクションがレイアウトに影響を及ぼさないことに注意してください。これは、アクションでマージンが崩れていることを示しています。小さい方の余白の有効幅は0に減り、大きい方の余白だけが残ります
  • <main> 要素の各辺に30 px の margin と30 px の padding を設定します。要素 (margin) とボーダーとコンテンツの間のスペース (padding) が両方とも増加し、実際のコンテンツのスペース使用量が少なくなります。繰り返しますが、ブラウザの開発者ツールでこれを確認してください
  • <main> 要素のすべての側面に40 px というより大きな境界線を設定します。これにより、margin や padding ではなくコンテンツからスペースが奪われることが分かります。これを行うには border プロパティを使用して幅、スタイル、および色の新しい一連の値を設定します。60pxは赤の破線ですが、プロパティは前のルールですでに設定されているので、新しい border-width を設定するだけで済みます
  • デフォルトでは、コンテンツの width は (margin、border、padding が共有された後) の利用可能なスペースの100%に設定されています - ブラウザウィンドウの幅を変更すると、ボックスはサンプル出力ウィンドウ内に収まるように拡大および縮小します。コンテンツの height は、デフォルトではコンテンツ内のコンテンツの高さになります。
  • <main> 要素に新しい幅と高さを設定して - 例えば幅 400px、高さ 200px から始めて - みましょう。そして効果を観察してください。ブラウザウィンドウのサイズが変更されても幅が変わらないことがわかります
  • 代わりに <main> 要素にパーセンテージ幅 - 例えば 60% 幅 - を設定し、効果を観察してください。ブラウザウィンドウのサイズを変更すると、幅が再び変わることが分かります。今度は <main> 要素の height 設定を削除してみましょう
  • <main> 要素の padding と margin をすべての辺で 5% に設定して結果を確認してください。ブラウザの開発者ツールを使用して出力例ウィンドウの幅を調べ、それを margin/padding の幅と比較すると、この5%が「包含要素の幅の5%」を意味することがわかります。そのため、出力ウィンドウ例のサイズが大きくなるにつれて、padding/margin も大きくなります
  • margin は負の値を入れることができ、それを使用して要素ボックスを重ね合わせることができます。<main> 要素に margin-top: -50px; を設定して効果を確認してください
  • 実験してください!

いくつかのヒントとアイデア:

  • デフォルトだと、background-color/background-image は境界の端まで伸びます。この振る舞いは background-clip プロパティを使用して変更できます。これについては Background_clip セクションで学びます
  • コンテンツボックスが出力ウィンドウの例よりも大きくなると、ウィンドウの外側にオーバーフローし、ボックスをスクロールしてウィンドウの残りの部分を表示できるようになります。 あなたは overflow プロパティでオーバーフローを制御することができます - 以下の Overflow セクションも見てください
  • ボックスの高さはパーセントの長さを守っていません。ボックスの高さは、特定の絶対的な高さが設定されていない限り、常にボックスの内容の高さを採用します (ピクセルや ems など)。これは、ページ上の各ボックスの高さよりもデフォルトでビューポートの高さの100%になります
  • border はパーセント幅の設定も無視します
  • 「ボックスの合計幅」は widthpadding-rightpadding-left{cssxref("border-right")}}、および border-left の各プロパティの合計であることに気付いたはずです。場合によっては面倒です (たとえば、幅50% の枠で border を設定し、padding をピクセルで表したい場合はどうしますか)。このような問題を回避するために、box-sizing というプロパティでボックスモデルを微調整することが可能です。border-box の値を使用すると、ボックスモデルはこの新しいモデルに変更されます

高度なボックスの操作

ボックスの幅、高さ、境界線、padding、margin の設定以外にも、それらの動作を変更するために使用できるその他のプロパティがいくつかあります。 このセクションではこれらの他のプロパティについて説明します。

オーバーフロー

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

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

これらの設定がどのように機能するかを示す簡単な例を示します。

まず、HTML です:

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

そして今度は HTML に適用する CSS です:

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

上記のコードは次のような結果になります。

背景クリップ

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

例を見て、これがどのように機能するのかを見てみましょう。 まず、HTML です:

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

今度は CSS です:

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

上記のコードは次のような結果になります。

アウトライン

大事なことを言い忘れましたが、ボックスの outline は枠のように見えますがボックスモデルの一部ではありません。境界線のように動作しますが、ボックスのサイズを変更せずにボックスの上に描画されます (具体的には、枠線の外側、余白領域の内側に輪郭が描画されます)。

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

CSS ボックスの種類

これまでに述べたことはすべて、ブロックレベルの要素を表すボックスにも当てはまります。ただし、CSS には他の種類のボックスがあり、動作が異なります。要素に適用されるボックスの種類は display プロパティで指定されます。display にはさまざまな値がありますが、この記事では最も一般的な3つの値、つまり blockinline、および inline-block に焦点を当てます。

  • block ボックスは、他のボックスの上に積み重ねられたボックスとして定義され (ボックスの前後に別の行に表示されるコンテンツ)、幅と高さを設定できます。上記の全体のボックスモデルは block ボックスに適用されます
  • inline ボックスは block ボックスとは反対です。ドキュメントのテキストと一緒に流れます (つまり、周囲のテキストや他のインライン要素と同じ行に表示され、その内容はテキスト行のようにテキストの流れと共に壊れます)。幅と高さの設定は inline  ボックスには影響しません。inline ボックスに設定されたpadding、margin、border は周囲のテキストの位置を更新しますが、周囲の block ボックスの位置には影響しません
  • inline-block ボックスは最初の2つの間にあります。block ボックスのように前後に改行を入れずに周囲のテキストや他のインライン要素と一緒に流れますが、幅と高さを使用してサイズを変更でき、ブロックの整合性を維持します。block ボックス inline ボックスのように段落行をまたいで分割されることはありません。以下の例では、inline-block ボックスは最初の行に十分なスペースがないのでボックスの形状を保ちながら2行目のテキストに移動しますが、十分なスペースがない場合は inline ボックスは複数行に分割されます。つまり箱の形を失います

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

現時点ではこれは少し混乱を招くかもしれません。今は簡単な例を見てみましょう。

まず HTML です:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

それでは、CSS を追加しましょう。

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  border  : 1px solid green;
  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

上記のコードはこの結果を示しています。これは表示タイプの異なる効果を示しています。

次は何ですか?

この時点で、あなたは CSS ボックスとそれらがどのように働くかについていくらか知識があるはずです。この記事のすべてを完全に理解していなくても心配しないでください - 理解を深めるためにこの記事を読み直してもかまいません。また、コースの後半でもっと実用的な例を読み始めると、よりよく理解できるようになります。次に CSS のデバッグを見ていきます。

あわせて参照

このモジュール

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

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