Width プロパティ

最終更新：2026-09-13

width Width プロパティ

width プロパティは要素のコンテンツ領域の幅を設定し、CSS ボックスモデルで最もよく使われるサイズ指定プロパティの一つです。このプロパティは非置換要素（non-replaced elements）にのみ影響し、初期値の auto では、ブラウザーが包含ブロックに基づいて幅を自動計算します。実際のレイアウトでは、width はよく max-width や min-width と組み合わせてレスポンシブデザインを実現するために使われます。

カテゴリ
初期値	auto
継承	いいえ
適用対象	non-replaced
アニメーションタイプ	length
CSS バージョン	CSS1
状態	標準

📝 構文

width: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>);

⚙️ 値

値	タイプ	説明
`auto`	キーワード	ブラウザーが幅を自動的に計算します。
`<length>`	タイプ	固定された長さの値（16px や 2em など）。
`<percentage>`	タイプ	包含ブロックの幅に対するパーセンテージ。
`max-content \| min-content \| fit-content`	キーワード	コンテンツから幅を計算するキーワード。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
width	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： 既定の width:auto では、ブロックレベル要素は親コンテナの幅いっぱいに広がり、インラインレベル要素はコンテンツに合わせて縮みます。

注意： width には padding や border は含まれません。box-sizing:border-box を設定しない限り含まれません。

❓ よくある質問

Qwidth:100% と width:auto の違いは何ですか？

Awidth:100% はコンテンツ領域を親コンテナの幅とぴったり同じにするため、padding や border を追加すると要素の全体幅が親を超えてしまいます。一方 width:auto は padding や border を自動的に差し引き、要素を親ちょうどに収めます。つまり、100% はコンテンツ領域を固定し、auto は全体幅を適応させます。その違いは padding を持つボックスで最もよく現れます。

Q要素の幅をコンテンツに合わせて自動調整するにはどうすればよいですか？

Aコンテンツ主導のキーワードを使います。width:max-content はコンテンツが折り返さないときの最大幅に、width:min-content は最長の単語や最小単位の幅に設定します。width:fit-content はその中間で、空間に余裕があればコンテンツに合わせ、なければ縮みます。これらのキーワードはブラウザーの対応が必要で、古いモバイルブラウザーによっては接頭辞やフォールバックが必要になる点に注意してください。

Qwidth のパーセンテージは何に対するものですか？

Aパーセンテージは包含ブロックのコンテンツ領域の幅に対して計算されます。通常フローの要素では包含ブロックは親のコンテンツ領域です。絶対配置の要素では、最も近い配置済み祖先の padding box です。fixed 要素ではビューポートです。したがって子要素の width:100% は親のコンテンツ領域を指し、外側全体のサイズではありません。

Q画像をコンテナからはみ出さずにレスポンシブ対応にするにはどうすればよいですか？

A標準的な書き方は img { max-width:100%; height:auto; } です。max-width:100% はコンテナが狭くなるにつれて画像を比率を保って縮小するため、はみ出すことはありません。height:auto は元の縦横比から高さを再計算して歪みを防ぎます。これは小さな画像を無理に引き伸ばしてぼやけさせる width:100% 単独よりも安全です。この書き方をすべてのメディア要素に適用すれば、画像も動画もどんなレイアウト内でも安全にスケーリングします。