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

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

CSSの max-height プロパティは、ボックス（要素）が取りうる高さの上限を指定するために使用します。このプロパティを設定すると、内容量が多くてもボックスの高さが指定値を超えることはありません。

max-heightに指定できる値

  • 数値＋単位：px、em、rem などの絶対・相対的な長さ（例：max-height: 200px;）
  • パーセンテージ（%）：親要素（包含ブロック）の高さに対する割合
  • none：高さの上限を設けない（初期値）

なお、内容が max-height の指定値を超えた場合、あふれた部分はそのまま表示されてしまいます。あふれ方を制御したい場合は、overflow プロパティ（hidden、scroll、auto など）と組み合わせて使用するのが一般的です。

コード例

<html>
   <head>
   </head>
   <body>
      <p style = "width:400px; max-height:10px; border:2px solid green; padding:10px; margin:15px;">
         この段落は幅400px、最大高さ10pxに設定されています
         この段落は幅400px、最大高さ10pxに設定されています
         この段落は幅400px、最大高さ10pxに設定されています
         この段落は幅400px、最大高さ10pxに設定されています
      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "210" height = "100" />
   </body>
</html>

この例では、段落に対して width:400px と max-height:10px を指定しています。テキストの量が多いため、実際の表示では高さが10pxに制限され、内容がボックスからあふれて描画されます。あふれた部分を非表示にしたい場合は、overflow:hidden; を追加するとよいでしょう。

まとめ

max-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>