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

max-heightプロパティは、要素の最大高さを指定する値を保持するプロパティです。このプロパティを使用すると、要素の実際の高さが、ここで設定された値を超えて拡大することを制限できます。例えば、コンテンツの量が非常に多い場合でも、その要素が縦方向に過度に長くなり、ページ全体のレイアウトを崩してしまうのを防ぐ目的で利用されます。

指定できる値には、ピクセル（px）やem、remといった具体的な長さを示す単位の他に、ビューポートの高さに対する割合（vh）やパーセンテージ（%）があります。noneというキーワードを指定した場合は、高さに制限が設けられないデフォルトの状態に戻ります。

このプロパティは、しばしばheightプロパティと組み合わせて使用されます。もしheightプロパティで指定された値がmax-heightプロパティで指定された値よりも大きい場合、実際に要素に適用される高さはmax-heightの値によって制限されます。これにより、要素は指定された最大高さを超えることはありません。逆に、heightプロパティの値がmax-heightよりも小さい場合は、heightの値が優先され、要素は指定された高さになります。コンテンツがmax-heightを超えた場合は、コンテンツが要素からはみ出したり、overflowプロパティの設定に応じてスクロールバーが表示されたりする挙動となります。

特に、スマートフォンやタブレットなど様々な画面サイズに対応するレスポンシブデザインを実装する際に非常に有用です。画像や動画、テキストコンテナなどの要素が、画面の大きさに応じて適切に高さが調整され、レイアウトの崩れを防ぎながらユーザーインターフェースの整合性を保つために不可欠なプロパティです。

Copy
1selector {
2  max-height: 200px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません