max-heightプロパティは何に使用されますか？

max-heightプロパティは、要素の最大高さを指定し、要素がそれ以上の高さにならないように制限するために使用されます。

max-heightプロパティで使用できる主な値は何ですか？

max-heightプロパティで使用できる主な値には、px、%、em、vhなどがあります。

max-heightとheightの違いは何ですか？

heightは要素の高さを固定するのに対し、max-heightは要素の最大高さを制限し、指定した値を超えないようにします。

【CSS】max-heightプロパティの使い方 - 要素の最大高さを制限する方法

概要

CSSのmax-heightプロパティは、要素の高さを制限するために使用されます。heightとは異なり、max-heightは要素の高さを柔軟に調整しつつ、指定された最大値を超えないように制限するため、コンテンツが可変でレスポンシブなデザインに最適です。この記事では、max-heightの使い方、設定方法、レスポンシブデザインでの活用方法、そしてよくある問題とその対策について詳しく解説します。

基本的な使い方

`max-height`の基本構文

.selector {
  max-height: 値;
}

主な値の種類とその説明

px（ピクセル）
要素の最大高さを絶対値で指定します。例えば、max-height: 300px;と設定すると、要素の高さは300ピクセルを超えません。
%（パーセント）
親要素の高さに対する相対値で指定します。例えば、max-height: 100%;とすると、要素の高さは親要素の高さを超えないように制限されます。
emやrem
フォントサイズに基づく相対単位で指定されます。emは現在の要素のフォントサイズ、remはルート要素のフォントサイズに基づきます。例えば、max-height: 20em;とすると、フォントサイズに応じた高さを制限できます。
vh（Viewport Height）
ビューポートの高さに基づいた設定です。max-height: 50vh;と指定すると、画面の高さの50%を最大値として制限できます。

使用例

基本的な使用例 - 固定の最大高さを設定

以下の例では、要素の最大高さを300ピクセルに設定しています。

.box {
  max-height: 300px;
  overflow-y: auto; /* 高さを超えた場合はスクロールバーを表示 */
  background-color: #f0f0f0;
}

この設定により、.boxの高さはコンテンツに応じて変動しますが、300ピクセルを超えるとスクロールバーが表示されます。

親要素に対する最大高さ - `%`指定

高さを親要素の割合で制限する場合は、以下のように設定します。

.container {
  height: 500px;
}
.child {
  max-height: 80%;
  background-color: #c0c0c0;
}

この場合、.childの高さは.containerの高さの80%、つまり400ピクセルを超えないように設定されます。

ビューポートに応じた最大高さ - `vh`指定

ビューポートに基づいた最大高さを設定する場合にはvhを使用します。

.full-height-section {
  max-height: 90vh;
  padding: 20px;
  background-color: #d0d0d0;
}

この設定により、.full-height-sectionの高さは画面の90%を超えず、スクロールを防ぎつつレスポンシブに対応します。

よくある問題と対策

要素が縮小しない場合

max-heightを使用しても要素が縮小しない場合は、要素やその親要素にheightやmin-heightが指定されていないか確認してください。heightが固定されていると、max-heightが無視されることがあります。

/* heightが指定されているためmax-heightが無視される */
.fixed-height {
  height: 600px;
  max-height: 400px;
}

この場合、heightの指定を削除するか、max-heightを優先するためにheightを相対値に変更する必要があります。

スクロールバーの表示

max-heightを設定した要素のコンテンツが制限を超えた場合、要素にoverflow-y: auto;を追加することでスクロールバーを表示し、内容を全て確認できるようにします。

.scrollable {
  max-height: 200px;
  overflow-y: auto;
}

これにより、要素の高さを制限しつつ、内部のコンテンツが見切れないように調整できます。

レスポンシブデザインでの活用

レスポンシブデザインでは、max-heightを使って画面サイズに応じた柔軟な高さ制限を行うことが重要です。メディアクエリを活用して異なるデバイスごとに高さを調整しましょう。

.responsive-box {
  max-height: 80vh;
}
@media (min-width: 768px) {
  .responsive-box {
    max-height: 70vh;
  }
}
@media (min-width: 1200px) {
  .responsive-box {
    max-height: 60vh;
  }
}

このように設定することで、画面サイズに応じて最大高さを調整し、適切な表示を維持できます。

まとめ

max-heightプロパティは、要素の高さを制限しつつ柔軟にレイアウトを調整するための強力なツールです。特にコンテンツが可変な場合や、レスポンシブデザインを実現する際に役立ちます。適切に設定することで、ユーザーにとって見やすく操作しやすいデザインを作成できます。スクロールやレイアウトの問題に直面した際には、max-heightとoverflowの組み合わせを見直して、最適なスタイルを適用しましょう。

参照:

max-height - `CSS` Cascading Style Sheets | MDN

概要