CSS 高さと幅

この要素の幅は100％です。

CSS で高さと幅を設定

height および width 属性は要素の高さと幅を設定するために使用されます。

height と width 属性はインデント、ボーダーやマージンを含まない。それらは要素のインデント、ボーダーやマージン内のエリアの高さまたは幅を設定します。

CSS 高さと幅の値

height および width 属性は以下の値を設定できます：

  • auto - デフォルト。ブラウザが高さと幅を計算します。
  • length - px、cm などの長さで高さ/幅を定義します。
  • % - 包含ブロックのパーセンテージで高さ/幅を定義します。
  • initial - 高さ/幅をデフォルト値に設定します。
  • inherit - 親の値から高さ/幅を継承します。

CSS 高さと幅の例

この要素の高さは 200 ピクセル、幅は 50％です。

例

<div> 要素の高さと幅を設定：

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

自分で試してみてください

この要素の高さは 100 ピクセル、幅は 500 ピクセルです。

例

別の <div> 要素の高さと幅を設定：

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

自分で試してみてください

注意：覚えておいてください。height および width 属性はインデント、ボーダーやマージンを含まない！それらは要素のインデント、ボーダーやマージン内のエリアの高さ/幅を設定します。

max-width を設定

max-width 属性は要素の最大幅を設定するために使用されます。

を長さ値（例えば px、cm など）または含むブロックのパーセンテージ（%）で指定することもできます。また、none（デフォルト値）に設定することもできます。それは最大幅がないことを意味します。

ブラウザのウィンドウが要素の幅（500px）より小さい場合、先ほどの <div> の問題が発生しました。その後、ブラウザはページに水平スクロールバーを追加します。

この場合、 max-width ブラウザが小さなウィンドウの処理を改善できます。

ヒント：ブラウザのウィンドウを 500px 未満の幅にドラッグして、2つの div 之间的違いを確認してください！

この要素の高さは 100 ピクセル、最大幅は 500 ピクセルです。

この要素の高さは 100 ピクセル、最大幅は 500 ピクセルです。

注釈：max-width 属性の値は上書きされます width（幅）。

例

この <div> 要素の高さは 100 ピクセル、最大幅は 500 ピクセルです：

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

自分で試してみてください

さらに多くの例

要素の高さと幅を設定
この例では、異なる要素の高さと幅を設定する方法を示します。
パーセンテージで画像の高さと幅を設定
この例では、パーセンテージ値を使用して画像の高さと幅を設定する方法を示します。
要素の最小幅と最大幅を設定
この例では、ピクセル値を使用して要素の最小幅と最大幅を設定する方法を示します。
要素の最小高さと最大高さを設定します
この例では、ピクセル値を使用して要素の最小高さと最大高さを設定する方法を示します。

CSS サイズ属性を設定する

属性 説明
height 要素の高さを設定します。
max-height 要素の最大高さを設定します。
max-width 要素の最大幅を設定します。
min-height 要素の最小高さを設定します。
min-width 要素の最小幅を設定します。
width 要素の幅を設定します。