CSS width

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

書式

width: width

属性値

width
要素の幅を指定する。
width
値意味
auto自動的に調整
inherit継承

要素の幅を数値で指定する場合は、次の単位を利用できる。

単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント
vw viewport width ビューポートの幅の1/100
vmin minimum viewport ビューポートの幅または高さで小さい方の1/100
vmax maximum viewport ビューポートの幅または高さで大きい方の1/100

px

要素の幅をピクセル単位で指定するサンプルを次に示す。

<p style="width: 8px; background-color: aquamarine>8</p>
<p style="width: 16px; background-color: aquamarine>16</p>
<p style="width: 32px; background-color: aquamarine>32</p>
<p style="width: 64x; background-color: aquamarine>64</p>

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

8

16

32

64

em

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

<p style="width: 1em; background-color: aquamarine">1</p>
<p style="width: 2em; background-color: aquamarine">2</p>
<p style="width: 4em; background-color: aquamarine">4</p>
<p style="width: 8em; background-color: aquamarine">8</p>

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

1

2

4

8

<div style="font-size: x-small;">
  <p style="width: 1em; background-color: aquamarine">1</p>
  <p style="width: 2em; background-color: aquamarine">2</p>
  <p style="width: 4em; background-color: aquamarine">4</p>
  <p style="width: 8em; background-color: aquamarine">8</p>
</div>

1

2

4

8

rem

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

<p style="width: 1rem; background-color: aquamarine">1</p>
<p style="width: 2rem; background-color: aquamarine">2</p>
<p style="width: 4rem; background-color: aquamarine">4</p>
<p style="width: 8rem; background-color: aquamarine">8</p>

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

1

2

4

8

<div style="font-size: x-small;">
  <p style="width: 1rem; background-color: aquamarine">1</p>
  <p style="width: 2rem; background-color: aquamarine">2</p>
  <p style="width: 4rem; background-color: aquamarine">4</p>
  <p style="width: 8rem; background-color: aquamarine">8</p>
</div>

1

2

4

8

%

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

<p style="width: 25%; background-color: aquamarine">25%</p>
<p style="width: 50%; background-color: aquamarine">50%</p>
<p style="width: 75%; background-color: aquamarine">75%</p>
<p style="width: 100%; background-color: aquamarine">100%</p>

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

25%

50%

75%

100%

<div style="width: 50%</div>
  <p style="width: 10%; background-color: aquamarine">10%</p>
  <p style="width: 50%; background-color: aquamarine">50%</p>
  <p style="width: 75%; background-color: aquamarine">75%</p>
  <p style="width: 100%; background-color: aquamarine">100%</p>
</div>

25%

50%

75%

100%

vw

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

<p style="width: 25vw; background-color: aquamarine">25vw</p>
<p style="width: 50vw; background-color: aquamarine">50vw</p>
<p style="width: 75vw; background-color: aquamarine">75vw</p>
<p style="width: 100vw; background-color: aquamarine">100vw</p>

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

25vw

50vw

75vw

100vw

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継承

要素の幅を数値で指定する場合は、次の単位を利用できる。

単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント

参考文献

World Wide Web Consortium (2021) CSS Box Sizing Module Level 3

World Wide Web Consortium (2021) CSS Values and Units Module Level 4