CSSの高さと幅の指定方法について
CSSheightとwidthプロパティは要素の高さと幅を設定するために使用されます。
CSSmax-widthプロパティは要素の最大幅を設定するために使用されます。
CSS 高さと幅の設定
heightとwidthプロパティは要素の高さと幅を設定するために使用されます。
高さと幅のプロパティには、パディング、境界線、またはマージンは含まれません。要素のパディング、ボーダー、マージン内の領域の高さ/幅を設定します。
CSS 高さと幅の値
heightとwidthプロパティには次の値が含まれる場合があります。
auto- これはデフォルトです。ブラウザ高さと幅を計算しますlength- 高さ/幅をピクセル、cm、単位で定義します。等%- 高さ/幅をパーセントで定義します。含まれているブロックinitial- 高さ/幅をその値に設定します。デフォルト値inherit- 高さ/幅は次のようになります。親の値から継承される
CSS 高さと幅の例
この要素の高さは200ピクセル、幅は50%です。
この要素の高さは100ピクセル、幅は500ピクセルです。
例
別の <div> 要素の高さと幅を設定します。
ノート：覚えておいてください。heightとwidthプロパティにはパディング、ボーダー、マージンは含まれません。要素のパディング、ボーダー、マージン内の領域の高さ/幅を設定します。
最大幅の設定
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ピクセルです。
自分で試してみる - 例
要素の高さと幅を設定するこの例では、さまざまな要素の高さと幅を設定する方法を示します。
パーセントを使用して画像の高さと幅を設定しますこの例では、パーセント値を使用して画像の高さと幅を設定する方法を示します。
要素の最小幅と最大幅を設定するこの例では、ピクセル値を使用して要素の最小幅と最大幅を設定する方法を示します。
要素の最小高さと最大高さを設定するこの例では、ピクセル値を使用して要素の最小高さと最大高さを設定する方法を示します。
すべてのCSSディメンション プロパティ
|
プロパティ |
説明 |
|---|---|
| height | 要素の高さを設定します |
| max-height | 要素の最大高さを設定します |
| max-width | 要素の最大幅を設定します |
| min-height | 要素の最小の高さを設定します |
| min-width | 要素の最小幅を設定します |
| widht | 要素の幅を設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。