width

widthは要素の幅を指定するCSSプロパティである。

書式

width: width

属性値

width
要素の幅を指定する。
width
意味
*px ピクセル単位で幅を指定
*em 親要素のフォントサイズ比で幅を指定
*rem ルート要素のフォントサイズ比で幅を指定
*% 親要素の幅に対するパーセンテージで幅を指定
auto自動的に調整
inherit継承

ピクセル単位で指定

ピクセル単位で要素の幅を指定する。

<div style="width: 300px; border: 1px solid #dadbe0;">300px</div>

上記のHTMLはウェブブラウザで次のように表示される。

300px

親要素のフォントサイズに対する比率で指定

親要素のフォントサイズに対する比率で要素の幅を指定する。

<div style="font-size: xx-large;">
  <div style="width: 8em; border: 1px solid #dadbe0;">8em</div>
</div>

上記のHTMLはウェブブラウザで次のように表示される。

8em

ルート要素のフォントサイズに対する比率で指定

ルート要素(<html>)のフォントサイズに対する比率で要素の幅を指定する。この場合、親要素のフォントサイズに影響を受けない。

<div style="font-size: xx-large;">
  <div style="width: 8rem; border: 1px solid #dadbe0;">8rem</div>
</div>

上記のHTMLはウェブブラウザで次のように表示される。

8rem

親要素の幅に対する比率で指定

親要素の幅に対する比率で要素の幅を指定する。

<div>
  <div style="width: 50%; border: 1px solid #dadbe0;">50%</div>
</div>

上記のHTMLはウェブブラウザで次のように表示される。

50%

max-width

max-widthは要素の最大の幅を指定するCSSプロパティである。

書式

max-width: max

属性値

max
幅の最大の大きさを10pxのように数値と単位で指定するか、以下の値から選択します。
max
意味
*px ピクセル単位で幅を指定
*em 親要素のフォントサイズ比で幅を指定
*rem ルート要素のフォントサイズ比で幅を指定
*% 親要素の幅に対するパーセンテージで幅を指定
inherit継承
none制限なし(規定値)

使用例

<p style="max-width: 640px;">
この段落の最大幅は640ピクセルです。
スマホなど画面の幅が小さい場合は横幅いっぱいに表示されますが、
パソコンなど画面の幅が大きい場合でも横幅は640ピクセルより大きくなりません。
</p>

この段落の最大幅は640ピクセルです。 スマホなど画面の幅が小さい場合は横幅いっぱいに表示されますが、 パソコンなど画面の幅が大きい場合でも横幅は640ピクセルより大きくなりません。

要素に最大幅を指定したうえ、左マージンと右マージンを自動(auto)にすることで、中央揃えにすることができる。

<p style="max-width: 640px; margin-left: auto; margin-right: auto;">
この段落の最大幅は640ピクセルです。
スマホなど画面の幅が小さい場合は横幅いっぱいに表示されますが、
パソコンなど画面の幅が大きい場合でも横幅は640ピクセルより大きくなりません。
画面の幅が640ピクセルより大きい場合は中央揃えで表示されます。
</p>

この段落の最大幅は640ピクセルです。 スマホなど画面の幅が小さい場合は横幅いっぱいに表示されますが、 パソコンなど画面の幅が大きい場合でも横幅は640ピクセルより大きくなりません。 画面の幅が640ピクセルより大きい場合は中央揃えで表示されます。

画面の幅に合わせて画像のサイズを自動調整する(リキッドレイアウト)スタイルシートの例を次に示す。

img {
  max-width: 100%;
  height: auto;
}

max-widthをheightより先に指定する必要がある。順序が逆だと画面の横幅に合わない。

min-width

min-widthは要素の最小の幅を指定するCSSプロパティである。

書式

min-width: min

属性値

min
幅の最小の大きさを10pxのように数値と単位で指定するか、以下の値から選択します。
min
意味
*px ピクセル単位で幅を指定
*em 親要素のフォントサイズ比で幅を指定
*rem ルート要素のフォントサイズ比で幅を指定
*% 親要素の幅に対するパーセンテージで幅を指定
auto自動的に調整
inherit継承

参考文献

W3C. (2021). CSS Box Sizing Module Level 3