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

CSSのmin-heightプロパティでボックスの最小高さを設定する方法

CSSの min-height（最小高さ）プロパティは、ボックスがそれ以下に縮まないよう高さの下限を設定するために使われます。コンテンツ量が少なくても指定した高さを確保しつつ、内容が増えた場合は自動的にボックスが拡張されるため、レイアウト崩れを防ぎながら柔軟なデザインを実現できます。

min-heightで指定できる値

  • 長さ（px、em、remなど）：固定の最小高さを指定します（例：150px）
  • パーセンテージ（%）：親要素の高さに対する割合で指定します

使用例

<html>
   <head>
   </head>
   <body>
      <p style = "width:400px; min-height:150px; border:1px solid blue; padding:5px; margin:10px;">
         この段落は幅400px・最小高さ150pxに設定されています。
         この段落は幅400px・最小高さ150pxに設定されています。
         この段落は幅400px・最小高さ150pxに設定されています。
         この段落は幅400px・最小高さ150pxに設定されています。
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "100" height = "100" />
   </body>
</html>

コードの解説

上記の例では、width:400px で幅を400pxに固定し、min-height:150px で最小高さを150pxに設定しています。さらに border（青色の1px枠線）、padding（内側の余白5px）、margin（外側の余白10px）を組み合わせることで、視覚的に分かりやすいボックスを作成しています。

heightとの違い

height を使うと高さが固定されるため、コンテンツがあふれた場合にはみ出す可能性があります。一方、min-height なら「最低でもこの高さ」を保証しながら、内容に応じてボックスが伸びるため、可変コンテンツを扱う際に便利です。

  1. CSSで画像の上にボタンを配置する方法

    Web制作では、画像の上にボタンを重ねて表示したい場面がよくあります。たとえば、バナー画像の中央に「詳しく見る」ボタンを置いたり、サムネイル画像に再生ボタンを重ねたりするケースです。CSSのpositionプロパティを使えば、簡単に実現できます。 画像の上にボタンを重ねる基本の仕組み 画像の上にボタンを配置するには、次の2つの指定がポイントになります。 画像を包む親要素（コンテナ）にposition: relative;を指定する ボタンにposition: absolute;を指定し、親要素を基準とした位置を決める さらにtop: 50%・left: 50%とtransform: tr

  2. CSSのuser-selectプロパティでテキスト選択の可否を設定する方法

    CSSでは、user-selectプロパティを使用することで、要素内のテキストがユーザーによって選択可能かどうかを制御できます。例えば、ボタンやコピーライト表記など、ユーザーに選択されたくないテキストに対してuser-select: none;を指定すると、ドラッグしてもテキストが選択されなくなります。基本的な使い方以下の例では、div要素にuser-select: none;を適用しています。このスタイルが設定された要素内のテキストは、マウスやタッチ操作でも選択できません。サンプルコード<!DOCTYPE html> <html> <head>