概要

width は、HTML要素の横幅を指定するためのCSSプロパティです。 ピクセル・パーセンテージ・em・vwなど、さまざまな単位で指定することができ、要素のレイアウトやレスポンシブ対応に欠かせません。

基本的な使い方

See the Pen widthについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* 固定幅（ピクセル） */
width: 300px;

/* 親要素に対する割合（%） */
width: 80%;

/* ビューポート幅に対する割合 */
width: 100vw;

/* 最小・最大幅と組み合わせる */
min-width: 200px;
max-width: 600px;

width を指定することで、要素の横幅を明確に制御できます。 パーセンテージ指定はレスポンシブ対応によく使われ、ビューポート単位やem指定など柔軟な指定方法も可能です。

出力される内容の例

<div style="width: 80%;">
  このボックスは親要素の80%の幅を持ちます。
</div>

<div style="width: 100vw;">
  このボックスは画面全体の幅を占めます。
</div>

役割とメリット（定義リスト形式）

要素サイズの明示

意図した幅を指定することで、デザインの再現性が高まります。

レスポンシブ対応

パーセンテージやvwなどの単位を用いれば、画面サイズに応じた柔軟なレイアウトが可能です。

デザインの制御

グリッドやフレックスレイアウトでの幅調整に不可欠です。

最小・最大制限

min-width や max-width と組み合わせれば、予期せぬレイアウト崩れを防げます。

注意点

• box-sizing の設定により、width に padding や border が含まれるかどうかが変わります。
• 子要素の合計幅が親要素のwidthを超えると、はみ出すことがあります（オーバーフローに注意）。
• テキストや画像の内容に応じて、widthを固定しすぎるとレイアウト崩れを起こす可能性があります。

まとめ

width プロパティは、要素の横幅を調整するための基本かつ重要なCSSプロパティです。 固定幅や割合指定、ビューポート単位など多様な指定方法があり、レイアウト設計の基盤になります。
min-width・max-width、box-sizingと併用することで、より柔軟で安定したデザインが可能になります。