CSS の高さと幅

CSSの height および width プロパティは、要素の高さと幅を設定するために使用されます。

CSSの max-width プロパティは、要素の最大幅を設定するために使用されます。

1. CSS の高さと幅の設定 (CSS Height and Width)

height プロパティと width プロパティは、要素のサイズを定義するために使用されます。

これらのプロパティには、パディング（padding）、ボーダー（border）、またはマージン（margin）は含まれません。これらは、要素のパディング、ボーダー、マージンの内側にあるコンテンツ領域のサイズを設定します。

1.1 プロパティの値

height および width プロパティには、以下の値を設定できます：

• auto: デフォルト値。ブラウザが高さと幅を自動的に計算します。
• length: px, cm, etc. などの単位でサイズを定義します。
• %: 包含要素（親要素）に対するパーセンテージでサイズを定義します。
• initial: プロパティをデフォルト値に設定します。
• inherit: 親要素から値を継承します。

1.2 height と width の基本的な実装例

以下の例では、<div> 要素の高さと幅を設定しています。

div {
  height: 200px;
  width: 500px;
  background-color: powderblue;
}

       注意: すべてのプロパティ（高さと幅を含む）が、すべてのブラウザで期待通りに動作するわけではありません。古いブラウザでの互換性については常に留意が必要です。

もう一つの例を見てみましょう。

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

2. 最大幅の設定 (Setting max-width)

max-width プロパティは、要素の最大幅を指定するために使用されます。

幅を特定のサイズ（例：width: 500px;）に固定設定した場合、ブラウザのウィンドウがその要素の幅よりも狭くなると、ブラウザはページに水平スクロールバーを追加します。

このような状況では、代わりに max-width を使用することで、ブラウザの小さなウィンドウでの処理を改善できます。

2.1 max-width の利点

max-width を使用すると、ウィンドウが要素の幅よりも小さい場合に、要素が自動的にリサイズされます（これはレスポンシブデザインにおいて非常に重要です）。

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

3. CSS の寸法関連プロパティ一覧

4. 実践的なアドバイス

モダンなWeb開発においては、固定の width よりも max-width: 100% や width: 100% といった相対的な指定を組み合わせる手法が一般的です。これにより、デスクトップからモバイルまで柔軟に対応できるフルレスポンシブなレイアウトが実現可能になります。