• Home
  • Web制作
  • 【CSS】高さ指定を使いこなそう！min-heightとmax-heightを徹底解説

【CSS】高さ指定を使いこなそう！min-heightとmax-heightを徹底解説

schedule
Tags: CSS

はじめに：CSSで高さ調整を使いこなそう！

Webサイトを制作する上で、要素の高さ調整は避けて通れません。

例えば、

  • ヘッダーの高さを固定したい
  • フッターがコンテンツに重なるのを防ぎたい
  • 画面サイズが変わってもコンテンツが崩れないようにしたい

といった場面は多く存在します。

これらの問題を解決するために、CSSには min-height と max-height というプロパティが用意されています。

これらのプロパティを理解し、適切に使いこなすことで、より柔軟で洗練されたWebサイトの構築が可能になります。

この記事では、min-height と max-height について、具体例を交えながら詳しく解説していきます。

あわせて読みたい
要素の高さを自由自在に！CSS heightプロパティを使いこなす

min-height：最低限の高さを設定する

min-height プロパティは、要素に「最低限これだけの高さは確保する」という指示を出す際に使用します。

例えば、コンテンツ量が少ない場合でも、特定の高さを持つようにヘッダーを設定したい場合などに役立ちます。

min-heightの使い方

min-heightプロパティの記述方法は以下の通りです。

.header {
  min-height: 100px; /* ヘッダーの高さを最低100pxに設定 */
}

上記のように記述すると、.headerクラスが適用された要素は、コンテンツ量が少なくても、最低100pxの高さを持つようになります。

min-heightを使用する際のポイント

  • min-heightで指定した高さよりもコンテンツ量が多い場合は、要素は自動的に伸びてコンテンツ全体を表示します。
  • 単位として、px, %, em, remなど様々なものが使用できます。
  • 初期値はautoで、これは「コンテンツの高さに合わせて自動調整する」という意味です。

max-height：最大の高さを制限する

max-height プロパティは、要素の高さに上限を設けたい場合に使用します。

例えば、画像が大きすぎてレイアウトが崩れるのを防いだり、アコーディオンメニューの展開時の高さを制限したりする際に便利です。

max-heightの使い方

max-heightプロパティの記述方法は以下の通りです。

.image-container {
  max-height: 300px; /* 画像の最大の高さを300pxに制限 */
}

上記のように記述すると、.image-containerクラスが適用された要素は、最大で高さ300pxまでしか表示されなくなります。

max-heightを使用する際のポイント

  • max-heightで指定した高さよりもコンテンツ量が少ない場合は、要素はコンテンツの高さで表示されます。
  • 単位として、px, %, em, remなど様々なものが使用できます。
  • 初期値はnoneで、これは「高さの制限を設けない」という意味です。

min-heightとmax-heightの組み合わせ：より柔軟な高さ制御

min-heightとmax-heightを組み合わせることで、より柔軟な高さ制御が可能になります。

例えば、以下のように記述することで、コンテンツ量は少ない場合は100px、多い場合は最大300pxの高さを持つ要素を作成できます。

.flexible-box {
  min-height: 100px;
  max-height: 300px;
}

まとめ

この記事では、CSSのmin-heightプロパティとmax-heightプロパティについて解説しました。

これらのプロパティを活用することで、要素の高さを柔軟に制御し、思い通りのレイアウトを実現することができます。

ぜひ、今回の内容を踏まえて、Webサイト制作に役立てていただければ幸いです。

関連記事