“width”プロパティ:横幅

概要

“width”プロパティは要素の横幅、水平方向の大きさを指定するプロパティです。

“width”プロパティは要素の好ましい横幅を指定します。“min-width”プロパティや“max-width”プロパティなどによる制約がなければ“width”プロパティで指定された横幅で表示されます。

“width”プロパティは既定ではコンテント・ボックスの横幅を指定します。“width”プロパティで指定した横幅をボーダー・ボックスの横幅としたい場合は“box-sizing: border-box;”を適用します。

サンプルコード

値

値	説明
キーワード値
auto	要素の既定のレイアウト方法に合わせてユーザー・エージェントが横幅を計算します
min-content	【横書きの場合】コンテンツをはみ出さずに内包できる最小の横幅 (許容される箇所ですべて折り返した時にコンテンツを内包できる最小の横幅)
	【縦書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが横幅を計算します
max-content	【横書きの場合】要素の理想的な横幅 (コンテンツを折り返さずに内包できる最小の横幅)
	【縦書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが横幅を計算します
stretch	マージン・ボックスの横幅が使用可能な領域の横幅をすべて占有するように横幅を計算 (左右のマージンは折りたたまれず、“auto”の場合は“0”として扱われます。)
fit-content	“min-content”と“stretch”のうちの大きい方と“max-content”を比べた時の小さい方の値と同じ
contain	アスペクト比が指定されていればその制約の中でマージン・ボックスの横幅が使用可能な領域の横幅をできる限り占有するように横幅を計算 (アスペクト比が指定されていなければ“stretch”と同じです。)
“<length-percentage>”値
<length>	“px”、“vw”などで横幅を指定
<percentage>	内包される包括ブロックの横幅を“100%”として横幅を指定
他の値
fit-content()	“fit-content()”関数で横幅を指定
共通キーワード

仕様書

定義されている仕様書

width

<length>
<percentage>
auto
min-content
max-content
fit-content()
stretch
fit-content
contain

デフォルトの横幅

横書きの場合

div {

width: auto;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

縦書きの場合

div {

width: auto;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

横幅を内容に合わせる

横書きの場合

div {

width: min-content;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

div {

width: max-content;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

縦書きの場合

div {

width: min-content;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

div {

width: max-content;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

横幅を内包される領域に合わせる

div {

margin: 10px;
width: stretch;

}

In spring, dawn is the most beautiful moment.

div {

margin: 10px;
width: fit-content;

}

In spring, dawn is the most beautiful moment.

div {

aspect-ratio: 1/1;
margin: 10px;
width: contain;

}

In spring, dawn is the most beautiful moment.

“<length>”値で指定する

div { width: 200px;}


In spring, dawn is the most beautiful moment.

“<percentage>”値で指定する

div { width: 50%;}


In spring, dawn is the most beautiful moment.

“fit-content”関数で指定する

div { width: fit-content(200px);}


In spring, dawn is the most beautiful moment.