【CSS Modules】min-heightプロパティの使い方

min-heightプロパティは、WebページのHTML要素の最小の高さを設定するために使用されるプロパティです。このプロパティを使用することで、要素の高さが指定された値よりも小さくなることを防ぎ、常に一定以上の高さを保つことができます。

例えば、コンテンツの量が少ない場合でも、要素が予期せず小さく表示されてしまったり、レイアウトが崩れてしまったりするのを防ぐ目的で利用されます。もし要素内部のコンテンツの量がmin-heightで指定した値よりも多い場合は、そのコンテンツをすべて表示できるように、要素の高さは自動的に拡張されます。したがって、重要な情報が途中で切れてしまう心配はありません。

このプロパティは、要素の具体的な高さを設定するheightプロパティや、要素の最大の高さを設定するmax-heightプロパティと組み合わせて使用することが一般的です。min-heightは、heightプロパティに設定された値よりも優先され、要素の高さの絶対的な下限を定義します。つまり、min-heightで設定された値より要素の高さが低くなることはありません。この3つのプロパティが連携することで、要素の高さはmin-height <= height <= max-heightという範囲内で柔軟に調整されます。

値としては、px（ピクセル）、%（親要素の高さに対するパーセンテージ）、em（現在のフォントサイズに基づく相対単位）、vh（ビューポート、つまり表示領域の高さに対する相対単位）など、様々な長さの単位を指定できます。これにより、固定的な高さだけでなく、画面サイズに応じて変化するレスポンシブな高さの設定も可能です。Webデザインにおいて、安定したレイアウトを維持するために非常に重要なプロパティの一つです。

Copy
1selector {
2  min-height: 100px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません