CSSの高さと幅の指定方法について
CSSheightとwidthプロパティは要素の高さと幅を設定するために使用されます。
CSSmax-widthプロパティは要素の最大幅を設定するために使用されます。
CSS 高さと幅の設定
heightとwidthプロパティは要素の高さと幅を設定するために使用されます。
高さと幅のプロパティには、padding、border、またはmarginは含まれません。要素のpadding、border、margin内の領域の高さ/幅を設定します。
CSS 高さと幅の値
heightとwidthプロパティには次の値が含まれる場合があります。
auto- これはデフォルトです。ブラウザが高さと幅を計算しますlength- height/widthをpx、cmなどで定義します。%- ブロックのheight/widthを%で定義します。initial- height/widthをデフォルト値に設定します。inherit- height/widthは親の値から継承されます。
CSS 高さと幅の例
この要素の高さは200px、幅は50%です。
この要素の高さは100px、幅は500pxです。
注：覚えておいてください。heightとwidthプロパティにはpadding、border、marginは含まれません。要素のpadding、border、margin内の領域のheight/widthを設定します。
最大幅の設定
max-widthプロパティは要素の最大幅を設定するために使用されます。
max-widthは、px、cmなどの長さの値、または含まれるブロックのパーセント(%)で指定するか、またはnoneに設定することができます(これはデフォルトです。最大幅がないことを意味します)。
上記の<div>に関する問題は、ブラウザウィンドウが要素の幅(500px)より小さい場合に発生します。次に、ブラウザは水平スクロールバーをページに追加します。
この状況では、代わりにmax-widthを使用すると、ブラウザによる小さなウィンドウの処理が改善されます。
ヒント：ブラウザウィンドウを幅500px未満にドラッグして、2つのdivの違いを確認してください。
この要素の高さは100px、最大幅は500pxです。
注：何らかの理由で、同じ要素でwidthプロパティとmax-widthプロパティの両方を使用し、widthプロパティの値がmax-widthプロパティよりも大きい場合。max-widthプロパティが使用されます(widthプロパティは無視されます)。
例
この<div>要素の高さは100px、最大幅は500pxです。
自分で試してみる - 例
要素の高さと幅を設定する
この例では、さまざまな要素の高さと幅を設定する方法を示します。
パーセントを使用して画像の高さと幅を設定します
この例では、パーセント値を使用して画像の高さと幅を設定する方法を示します。
要素の最小幅と最大幅を設定する
この例では、ピクセル値を使用して要素の最小幅と最大幅を設定する方法を示します。
要素の最小高さと最大高さを設定する
この例では、ピクセル値を使用して要素の最小高さと最大高さを設定する方法を示します。
すべてのCSSディメンション プロパティ
|
プロパティ |
説明 |
|---|---|
| height | 要素の高さを設定します |
| max-height | 要素の最大高さを設定します |
| max-width | 要素の最大幅を設定します |
| min-height | 要素の最小の高さを設定します |
| min-width | 要素の最小幅を設定します |
| widht | 要素の幅を設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。