CSSでWebサイトのレイアウトを調整する際に、要素の幅を指定するプロパティとしてよく使われるのがwidthとmax-widthです。この2つの違いを知ることで、レイアウトの自由度やレスポンシブデザインがぐっとしやすくなります。本記事では、それぞれのプロパティの基本的な違いと使い分け方について解説します。
widthとは？ ～ 幅を固定するプロパティ
widthは要素の幅をピクセルやパーセンテージで固定するプロパティです。widthを使うと、指定した幅で要素が常に表示されます。
例:
.container {
width: 500px;
background-color: lightblue;
}
この例では、.containerという要素の幅が500pxで固定されます。画面幅が狭くても広くても、この要素は500pxの幅で表示されるため、狭い画面（500px以下）でははみ出して横にスクロールできるサイトになってしまいます。
widthが使える場面
- 固定サイズのデザインが必要なとき（たとえば、ボタンやカードなど）
- レスポンシブ対応が不要な部分
- デザインの中で幅を厳密にコントロールしたい場合
max-widthとは？ ～ 最大幅を指定するプロパティ
一方、max-widthは要素の「最大幅」を設定するプロパティです。指定されたサイズまで広がりますが、画面サイズに応じてそれ以下にも縮小される柔軟なプロパティです。
現在デバイスの種類は多岐に渡り、どのサイズの画面サイズでユーザーがひらくかは不明ですので、こちらのプロパティはとても役に立ちます。
例:
.container {
max-width: 500px;
background-color: lightcoral;
}
上記のように指定すると、.containerの要素は500pxを超えませんが、画面が狭くなるとそれに合わせて自動的に縮小されます。この性質から、レスポンシブデザインに向いています。
max-widthが使える場面
- 画面のサイズに応じて要素の幅を調整したいとき
- Webページ全体のレイアウトで、可変幅のコンテンツが必要なとき
- モバイルファーストなデザインやレスポンシブ対応が必要な部分
widthとmax-widthの違いまとめ
| プロパティ | 動作 | 画面サイズに応じた変動 |
|---|---|---|
width | 固定幅 | 変わらない |
max-width | 最大幅を制限 | 画面幅に合わせて自動的に縮小 |
widthは固定された幅で表示されるため、幅が大きい場合には横スクロールが発生することがあります。一方、max-widthは画面幅が狭くなるとそれに応じて縮小されるため、レスポンシブデザインに適しています。
使い分けのポイント
- 画面幅を超えないように調整したい要素には
max-widthを使用 - 固定サイズが必要な要素や部品には
widthを使用 - レスポンシブ対応が重要な箇所では
max-widthを使うことで、画面サイズに応じたレイアウトが可能になる
実際の例で学ぶ
たとえば、ブログの本文の幅を設定する場合は、max-widthを使うと読者の画面サイズに応じて読みやすい幅に調整されます。以下のようなコードで指定できます。
.blog-content {
max-width: 800px;
margin: 0 auto;
}
このコードにより、本文が画面中央に配置され、最大幅800pxまで広がるようになります。小さい画面では800px以下に自動で調整されるため、レスポンシブデザインに最適です。
まとめ
widthとmax-widthはどちらも要素の幅をコントロールするために使われますが、使い方によってレイアウトの柔軟性が大きく変わります。画面サイズやデザインの意図に合わせて使い分け、より美しく見やすいWebページを作りましょう！
