CSS 高さと幅のディメンジョン

CSS ディメンジョン・プロパティ

CSS ディメンジョン・プロパティは、要素の高さと幅のコントロールを可能にします。

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

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

height と width には、 auto (これがデフォルトで、高さと幅はブラウザが計算することを意味します）、または px や cm などの長さや、包含ブロックのパーセンテージ (%) で指定することができます。

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

注:height と width プロパティは、パディング、ボーダー、マージンを含みません；これは、要素のパディングやボーダー、マージンの内側の領域の高さと幅を設定します！

次の例は、高さが 100 ピクセルで、幅が 500 ピクセルの <div> 要素を表示します：

div {
    width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

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

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

ブラウザウィンドウが要素の幅（500px）よりも小さい場合、上の <div> に問題が生じます。その時は、ブラウザがページに横スクロールバーを追加します。

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

チップ: 2 つの div の違いを見るには、幅が 500px より小さなブラウザ・ウィンドウにドラッグします！

この <div> 要素の高さは 100 ピクセルで max-width は 500 ピクセルです。

注:max-width プロパティの値は、width を上書きします。

次の例は、高さが 100 ピクセルで max-width が 500 ピクセルの <div> 要素を表示します：

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

要素の高さと幅の設定
この例は、いろいろな要素の高さと幅の設定方法のデモです。

パーセントを使用した画像の高さと幅の設定
この例は、パーセントを使用した画像の高さと幅の設定方法のデモです。

要素の min-width と max-width の設定
この例は、ピクセルを使用した要素の min-width と max-width の設定方法のデモです。

要素の min-height と max-height の設定
この例は、ピクセルを使用した要素の min-height と max-height の設定する方法のデモです。