width横方向の寸法
要素の優先する横幅を指定します。初期値のautoではブラウザーが幅を計算します。
width
要素の横幅を決めるプロパティ。親要素の中で箱が広がったり縮んだりする様子を確かめます。
遊んでみよう
親要素の中で横幅を変更
width
CSS
.element width: 160px;
値のパターン
widthの構成要素
<length> | <percentage>長さと割合
pxなどの長さは固定値、%は親となる包含ブロックの幅を基準にします。
box-sizingどこまでを幅に含めるか
content-boxでは内容領域、border-boxではpaddingとborderまでを指定幅に含めます。
早見表
まずはauto・px・%の違いを押さえます。内容に合わせるときはfit-contentも便利です。
01
autoブラウザーが計算初期値02
240px長さで固定絶対的な幅03
50%親幅の半分相対的な幅04
fit-content内容に合わせる使える幅が上限よくある使い方
01
フォーム部品を親幅へ広げる
入力欄やボタンを親要素と同じ幅にしたいときは、paddingとborderを幅へ含めて100%を指定します。
box-sizing: border-box; width: 100%;02
固定サイズのアイコンを作る
正方形のアイコンなど、用途上の寸法が決まっている要素はpxで幅を揃えます。
width: 48px;03
内容に合うラベルを作る
内容に合わせつつ使える空間を超えない箱には、fit-contentを使えます。
width: fit-content;ポイント
固定幅だけに頼ると、内容が収まらないことがある。
文字を拡大したときや画面が狭いとき、固定したwidthから内容があふれる場合があります。必要に応じてmax-width: 100%などを組み合わせます。min-widthとmax-widthはwidthより優先され、置換要素ではないinline要素にはwidthが適用されません。widthは通常、子要素へ継承されません。
関連するCSSも見てみよう。
width と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。