width

スペーシング・サイズ

要素の横幅を指定するプロパティです。px、%、vw、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの特殊な値も使用でき、レスポンシブデザインの基礎となります。

構文

Syntax
width: <length> | <percentage> | auto | min-content | max-content | fit-content
🎮

インタラクティブデモ

コントロール

200px
50px500px

プレビュー

生成されたCSS

.element { width: 200px; }

コード例

1

width: 100px;
実行結果
width: 120px
固定幅(120px)

幅を100pxに固定

2

width: 50%;
実行結果
width: 50%
親要素の50%(親要素幅240px)

親要素の50%の幅

3

width: fit-content;

内容に合わせて幅を自動調整

💡 TIPS

autoはデフォルト値。fit-contentやmin/max-contentはモダンなレイアウトで便利。

⚠️ よくある間違い

親要素の幅に依存する場合、意図しないレイアウトになることがある。

関連プロパティ

ブラウザサポート

全ブラウザ対応