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

CSSのmax-heightプロパティとは？使い方と指定方法を解説

CSSのmax-heightプロパティは、要素（ボックス）が取りうる高さの最大値を設定するために使用されます。このプロパティを指定することで、中身のコンテンツがどれだけ多くても、要素の高さが設定した値を超えることはありません。

max-heightプロパティに指定できる値

max-heightプロパティの値には、以下のいずれかを指定できます。

  • 数値・長さ：px、em、rem などの絶対値または相対値
  • パーセンテージ：親要素の高さに対する割合（%）
  • none：最大高さの制限を設けない（デフォルト値）

使用例

以下の例では、幅400pxの段落に対して max-height を10pxに設定しています。テキスト量が多くても、段落の高さは10pxを超えません。

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

このコードをブラウザで表示すると、段落の高さが10pxに制限され、はみ出したテキストは要素の外に表示されることが確認できます。なお、はみ出したコンテンツを非表示にしたい場合は、overflowプロパティを「hidden」に設定すると効果的です。

まとめ

max-heightプロパティは、レスポンシブデザインやレイアウト調整において、要素の高さを制御するために便利なプロパティです。min-heightプロパティと組み合わせることで、高さの範囲を柔軟に管理できます。

  1. CSSでheight（高さ）プロパティをアニメーションさせる方法

    CSSで要素のheight（高さ）プロパティをアニメーションさせたい場合は、@keyframesルールとanimationプロパティを組み合わせて使います。以下のサンプルコードを実行すると、div要素の高さが一定間隔で滑らかに変化するアニメーションを確認できます。 サンプルコード <!DOCTYPE html> <html>   <head>     <style>       div {    &

  2. CSSのmax-heightプロパティとは？使い方と実例をわかりやすく解説

    max-heightプロパティとは？CSSのmax-heightプロパティを使用すると、要素のコンテンツボックスに固定の最大高さを定義できます。このプロパティが適用された要素は、実際の高さがmax-heightの値よりも大きい場合でも、コンテンツボックスがそれ以上高くなることはありません。特にoverflow: hidden;と組み合わせることで、はみ出したコンテンツを非表示にし、レイアウトをすっきりと整えることができます。構文CSS max-heightプロパティの構文は以下のとおりです。Selector {    max-height: /*値*/ }max-heigh