TECH I.S.

CSS 高さ、幅、最大幅


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

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


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

自分で試してみる »


CSS 高さと幅の設定

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

高さと幅のプロパティには、パディング、境界線、またはマージンは含まれません。要素のパディング、ボーダー、マージン内の領域の高さ/幅を設定します。


CSS 高さと幅の値

heightwidthプロパティには次の値が含まれる場合があります。
  • auto- これはデフォルトです。ブラウザ高さと幅を計算します
  • length- 高さ/幅をピクセル、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; }

自分で試してみる »

ノート:覚えておいてください。heightwidthプロパティにはパディング、ボーダー、マージンは含まれません。要素のパディング、ボーダー、マージン内の領域の高さ/幅を設定します。


最大幅の設定

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

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

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

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

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

ノート:何らかの理由で、同じ要素でwidthプロパティとmax-widthプロパティの両方を使用し、widthプロパティの値がmax-widthプロパティよりも大きい場合。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 要素の最小幅を設定します
widht 要素の幅を設定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細