CSS入門 | CSSボックスモデル | サイズ (height/width)

CSSサイズ

CSSを使うと、HTML要素のサイズを自由に設定できる。 CSSでサイズ調整に使用できるプロパティは次のとおりである。

heightとwidthプロパティ

heightとwidthプロパティは、HTML要素の高さと幅をそれぞれ設定する。 これらのプロパティの既定値はautoであり、Webブラウザーが各HTML要素に合わせて高さと幅を自動で設定する。

<style>
    div { height: 200px; width: 500px; }
</style>

max-widthプロパティ

max-widthプロパティは、該当HTML要素が持てる最大幅を設定する。 このプロパティの既定値はnoneであり、該当HTML要素の幅に制限を設けないという意味である。

widthプロパティで幅を設定すると、設定された幅以下にブラウザーのサイズが小さくなると、その要素にスクロールバーが作成される。 しかし、max-widthプロパティで幅を設定すると、より柔軟な結果を得られる。 max-widthで幅を設定すると、小さくなるWebブラウザーのサイズに合わせて、該当HTML要素の幅も自動的に小さくなる。

<style>
    div.maxWidth { max-width: 500px; }
</style>

min-widthプロパティ

min-widthプロパティは、該当HTML要素が持てる最小幅を設定する。 このプロパティの既定値は0であり、該当HTML要素の幅に制限を設けないという意味である。

min-widthプロパティが設定された要素にwidthプロパティ値を別途設定しない場合、初期幅は100%になる。 このときWebブラウザーのサイズが小さくなると、それに合わせてHTML要素の幅も自動的に小さくなる。 しかし、Webブラウザーがmin-widthで設定された幅以下に小さくなると、HTML要素の幅はそれ以上小さくならず、水平スクロールバーが作成される。

<style>
    div.minWidth { min-width: 500px; }
</style>

max-heightプロパティ

max-heightプロパティは、該当HTML要素が持てる最大高さを設定する。 このプロパティの既定値はnoneであり、該当HTML要素のサイズに応じて高さが自動で設定される。

max-heightプロパティで最大高さを設定すると、該当HTML要素の高さは設定された高さ以下に制限される。 もし該当要素の高さが設定された最大高さより大きい場合は、垂直スクロールバーが作成される。

<style>
    p { max-height: 50px; overflow: auto; }
</style>

min-heightプロパティ

min-heightプロパティは、指定されたHTML要素が持てる最小高さを設定する。 このプロパティの既定値は0であり、該当HTML要素の高さに制限を設けないという意味である。

min-heightプロパティを設定すると、該当HTML要素の高さが設定された高さ以下にならないよう制限される。 つまり、heightプロパティ値がmin-heightプロパティ値以下に低くならないようにする。 このmin-heightプロパティ値は、max-heightプロパティ値やheightプロパティ値より先に適用される。

<style>
    p { min-height: 100px; }
</style>