CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素の最小高さ（min-height）と最大高さ（max-height）を設定する方法

CSSでは、min-heightプロパティとmax-heightプロパティを使うことで、要素の高さに下限と上限を設定できます。これにより、ブラウザのウィンドウサイズやコンテンツ量が変化しても、レイアウトが崩れにくくなります。

min-heightとmax-heightの基本

min-heightは要素の最小の高さを指定します。コンテンツが少なくても、指定した高さ以下には縮みません。

max-heightは要素の最大の高さを指定します。コンテンツが多くても、指定した高さ以上には伸びません。

コード例

以下のコードでは、div要素に対してmax-height: 550px;とmin-height: 450px;を設定しています。ブラウザのウィンドウサイズを変更すると、高さが450px〜550pxの範囲内で変化する様子を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            max-height: 550px;
            min-height: 450px;
            background-color: red;
         }
      </style>
   </head>
   <body>
      <p>以下は、最大の高さと最小の高さが設定されたdivです。ブラウザのウィンドウサイズを変更して、動作を確認してみてください。</p>
      <div>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
      </div>
   </body>
</html>

ポイント解説

  • min-heightとmax-heightは、heightプロパティと組み合わせて使うこともできます。
  • コンテンツがmax-heightを超える場合、あふれた部分を隠したいときはoverflow: hidden;やoverflow: auto;を併用すると便利です。
  • レスポンシブデザインでは、固定値（px）だけでなく、パーセント（%）やビューポート単位（vh）も活用できます。
  1. CSSのz-indexプロパティを使って要素を重ねて表示する方法

    CSSのz-indexプロパティとは CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。 注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用