CSSのwidthとmax-widthプロパティ：幅の指定方法とその違いを解説

CSSのwidthとmax-widthプロパティは、要素の幅を指定するために使用される基本的なプロパティです。
この2つのプロパティを適切に使い分けることで、柔軟でレスポンシブなデザインを実現できます。
本記事では、widthとmax-widthの基本的な使い方から応用例までを詳しく解説します。

widthプロパティとは？

widthプロパティは、要素の幅を指定するために使用されます。
固定幅や相対的な幅を指定することができます。

基本構文

selector {
  width: value;
}

指定可能な値

• 固定値（例：200px）: 正確な幅をピクセルで指定。
• 割合（例：50%）: 親要素の幅に対する割合を指定。
• キーワード（例：auto）: デフォルトの自動調整。

max-widthプロパティとは？

max-widthプロパティは、要素の最大幅を指定するために使用されます。
要素の幅が指定された最大値を超えることはありません。

基本構文

selector {
  max-width: value;
}

指定可能な値

• 固定値（例：600px）: 最大幅をピクセルで指定。
• 割合（例：80%）: 親要素の幅に対する最大割合。
• キーワード（例：none）: 制限なし。

widthとmax-widthの違い

特性	width	max-width
幅の制限	固定幅または相対幅を指定。	最大幅を指定し、それ以下で調整可能。
レスポンシブ	柔軟性に欠ける場合がある。	より柔軟でレスポンシブデザイン向き。
優先順位	max-widthと一緒に使用する場合、max-widthが優先。	widthを超えない範囲で調整。

基本的な使い方

固定幅の指定（width）

widthを使用して、要素の幅を200pxに固定します。

コード例

div {
  width: 200px;
  background-color: lightblue;
}

最大幅の指定（max-width）

max-widthを使用して、要素が600pxを超えないように制限します。

コード例

div {
  max-width: 600px;
  background-color: lightgreen;
}

widthとmax-widthの組み合わせ

widthで幅を指定しつつ、max-widthで最大幅を制限します。

コード例

div {
  width: 80%;
  max-width: 500px;
  background-color: lightcoral;
}

結果

画面幅が広い場合、要素の幅は500pxに制限されます。狭い場合、80%に調整されます。

実用例

レスポンシブな画像

画像が親要素を超えないようにmax-widthを使用します。

コード例

img {
  max-width: 100%;
  height: auto;
}

結果

画像は親要素の幅に収まり、比率を保ちながらリサイズされます。

コンテナの中央寄せ

max-widthを使用して幅を制限し、中央寄せにします。

コード例

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: lightgray;
}

ポイント

margin: 0 auto;で左右の余白を自動設定し、中央寄せを実現。

フルスクリーンデザイン

幅を画面全体に広げつつ、最大幅を制限します。

コード例

div {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: lightblue;
}

結果

要素は画面幅に応じて広がりますが、最大幅は1200pxに制限されます。

min-widthとの比較

min-widthを使用すると、要素の最小幅を指定できます。widthやmax-widthと組み合わせることで、より柔軟なデザインが可能です。

コード例

div {
  width: 50%;
  min-width: 300px;
  max-width: 800px;
  background-color: lightyellow;
}

結果

• 幅は50%。
• 最小幅は300px、最大幅は800pxに制限されます。

ベストプラクティス

レスポンシブデザインを優先

固定幅のwidthよりもmax-widthを活用することで、柔軟なデザインを実現します。

画像には必ずmax-widthを設定

親要素を超えないようにすることで、レイアウト崩れを防ぎます。

中央寄せのコンテナにはmax-widthを使用

コンテンツの幅を制限し、読みやすいデザインを作成します。

よくある質問

Q1. widthとmax-widthを同時に使用するとどうなりますか？

両方を指定した場合、要素の幅はwidthの値を基準にしつつ、max-widthが優先されます。

例

div {
  width: 500px;
  max-width: 300px;
}

この場合、要素の幅は300pxに制限されます。

Q2. デバイスに応じて幅を変えるには？

@mediaルールと組み合わせて、デバイスに応じた幅を指定できます。

コード例

div {
  max-width: 800px;
}

@media (max-width: 600px) {
  div {
    max-width: 100%;
  }
}

まとめ

CSSのwidthとmax-widthプロパティを適切に使い分けることで、
柔軟でレスポンシブなデザインを実現できます。
特に、固定幅ではなくmax-widthを活用することで、幅広いデバイスに対応したデザインを構築できます。

本記事で紹介した例を参考にして、デザインの幅を広げてみてください！

Favorite