HTML5/CSS3の授業ノート

CSSでレイアウトをする際には、「ボックスモデル」を理解する必要があります。
CSSの定義するボックスモデルは以下の図のように4つの領域で構成されています。

content（コンテンツ）

テキストや画像など、要素の内容そのものが表示される領域です。width/heightプロパティで指定できます。

padding（パディング）

contentとborderの間にある余白の領域です。要素の内側の余白を取るために使います。paddingプロパティで指定できます。

border（ボーダー）

paddingの外側にある、いわゆる枠線です。初期値では太さ0になっているので見えませんが、存在しています。border-widthプロパティで指定できます。

margin（マージン）

ボックスの一番外側の余白の領域です。marginプロパティで指定することができます。

要素の大きさを設定します。
初期値ではコンテンツ領域のみを含みますが、box-sizing:border-box;の記述をしていた場合にはborderの太さまでの領域を含みます。

幅と高さが持てるのはブロックレベル要素(インラインブロック含む)で、インライン要素には指定できませんので注意が必要です。
指定がうまく反映されない場合、displayプロパティを確認してみてください。

ボックスの幅を指定する

width:幅;

継承

継承しない

適用要素

非置換インライン要素、テーブルの行、行グループを除く全ての要素

値

説明

auto

要素の種類と内容によってブラウザが計算する

(数値)単位

数値と単位で指定する
px/em/vw/vh/vmin/vmaxなど

(数値)%

包含ブロックの幅に対して何%か

min-content

コンテンツに合わせた最小の幅
テキストの場合は最も長い単語、画像、固定幅のコンテンツなどの幅になる
ただし日本語ではうまく機能しないことが多い

max-content

コンテンツに合わせた最大の幅
コンテンツ優先なので親のブロックからはみ出す場合がある

fit-content*

コンテンツをすべて含むことができる最大の幅だが、親要素より大きくならないようにコンテンツが折り返される
*2022年5月現在Firefox用にベンダープレフィックスの記述が必要

*は初期値

ボックスの高さを指定する

height:高さ;

継承

継承しない

適用要素

非置換インライン要素、テーブルの列、列グループを除く全ての要素

値

説明

auto

要素の種類と内容(テキスト/画像/子要素/paddingなど)によってブラウザが計算する

(数値)単位

数値と単位で指定する
px/em/vw/vh/vmin/vmaxなど

(数値)%

包含ブロックの高さに対して何%か
包含ブロックに高さが指定されていない場合は利かない

min-content

コンテンツに合わせた最小の高さ

max-content

コンテンツに合わせた最大の高さ

fit-content*

コンテンツをすべて含むことができる最大の高さだが、親要素より大きくならないようにコンテンツが折り返される
*2022年5月現在Firefox未対応

*は初期値

ボックスの幅の最大幅/最小幅を指定する

max-widthプロパティでは「widthの取ることのできる最大値」を指定します。一定の幅までは画面幅またはコンテンツ幅に合わせて調整され、最大値を超えると固定されます。
widthプロパティと同時に設定することができ、widthで指定した値がmax-widthで指定した値を上回ると固定されます。

min-widthプロパティでは「widthの取ることのできる最小値」を指定します。画面幅が狭まっても一定の幅を保つことができるようになります。widthプロパティと同時に設定することができ、widthで指定した値がmin-widthで指定した値を下回ると固定されます。

max-width:幅の最大値;/min-width:幅の最小値;

継承

継承しない

適用要素

非置換インライン要素、テーブルの行、行グループを除く全ての要素

値

説明

none

幅の最大値/最小値を指定しない

(数値)単位

数値と単位で指定する
px/em/vw/vh/vmin/vmaxなど

(数値)%

包含ブロックの幅に対して最大何%か

min-content

コンテンツに合わせた最小の幅

max-content

コンテンツに合わせた最大の幅

fit-content*

コンテンツをすべて含むことができる最大の幅だが、親要素より大きくならないようにコンテンツが折り返される
**2022年5月現在Firefox用にベンダープレフィックスの記述が必要

*は初期値

ボックスの高さの最大値/最小値を指定する

max-height:高さの最大値;/min-height:高さの最小値;

継承

継承しない

適用要素

非置換インライン要素、テーブルの列、列グループを除く全ての要素

値

説明

none

高さの最大値を指定しない*2022年5月現在Firefox未対応

(数値)単位

数値と単位で指定する
px/em/vw/vh/vmin/vmaxなど

(数値)%

包含ブロックの高さに対して何%か
包含ブロックに高さが指定されていない場合は利かない

min-content

コンテンツに合わせた最小の高さ

max-content

コンテンツに合わせた最大の高さ

fit-content*

コンテンツをすべて含むことができる最大の高さだが、親要素より大きくならないようにコンテンツが折り返される
*2022年5月現在Firefox用にベンダープレフィックスの記述が必要

*は初期値

ボックスの内側の余白(padding)を指定する

パディングの幅は、padding-top(上)、padding-right(右)、padding-bottom(下)、padding-left(左)の各プロパティおよびpaddingプロパティ(一括指定)で指定します。

padding-top:幅; / padding-right:幅; / padding-bottom:幅; / padding-left:幅;

継承

継承しない

適用要素

table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column を除く全ての要素

値

説明

0

余白なし

(数値)単位

数値と単位で指定する
px/em/vw/vh/vmin/vmaxなど

(数値)%

包含ブロックの横幅に対して何%か

*は初期値

padding:幅;(一括指定)

値の数

説明

値

上下左右同じ

値␣値

上下、左右

値␣値␣値

上、左右、下

値␣値␣値␣値

上、右、下、左(時計回り)

ボックスの外側の余白(margin)を指定する

マージンの幅は、margin-top(上)、margin-right(右)、margin-bottom(下)、margin-left(左)の各プロパティおよびmarginプロパティ(一括指定)で指定します。

margin-top:幅; / margin-right:幅; / margin-bottom:幅; / margin-left:幅;

継承

継承しない

適用要素

table,table-caption,inline-table以外の表のdisplay種別を除くすべての要素

値

説明

0

余白なし

(数値)単位

数値と単位で指定する
px/em/vw/vh/vmin/vmaxなど

(数値)%

包含ブロックの横幅に対して何%か

*は初期値

margin:幅;(一括指定)

値

説明

値の数

上下左右同じ

値␣値

上下、左右

値␣値␣値

上、左右、下

値␣値␣値␣値

上、右、下、左(時計回り)