コーススケジュール

CSSの高さと幅

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

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

height 属性と width 属性には、パディング、境界線、マージンは含まれません。要素のパディング、境界線、およびマージン内の領域の高さまたは幅を設定します。

height 属性と width 属性は次の値に設定できます。

この要素の高さは 200px、幅は 200px です。 50% の

<div> 要素の高さと幅を設定します。

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

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

別の <div> 要素の高さと幅を設定します:

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

注: height 属性と width 属性には、パディング、境界線、またはマージンが含まれないことに注意してください。要素のパディング、ボーダー、マージン内の領域の高さ/幅を設定します。

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

max-width (最大幅) は、長さの値 (px、cm など) または含まれるブロックのパーセンテージ (%) で指定することも、none (デフォルト。最大値なしを意味します) に設定することもできます。幅）。

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

この場合、max-width を使用すると、ブラウザによる小さなウィンドウの処理が改善されます。

ヒント: 2 つの div の違いを確認するには、ブラウザウィンドウを幅 500 ピクセル未満にドラッグします。

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

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

注:max-width 属性値は width (幅) をオーバーライドします。

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

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