CSSのheightで要素の高さを指定し、レイアウトを調整する方法をわかりやすく解説

2024.09.14
スポンサーリンク

CSSのheightプロパティは、要素の高さを指定するためのプロパティです。このプロパティを使用することで、固定の高さや、コンテナの高さに対する割合など、様々な形で要素の高さを制御できます。以下に、主要な値とその効果をリストでまとめ、その後に各値の表示例を詳しく解説します。

スポンサーリンク

heightプロパティの値とその効果の一覧

  • height: 100px – 要素の高さを100pxに固定します。
  • height: 50% – 親要素の高さの50%を指定します。
  • height: auto – 要素の内容に応じて高さを自動的に調整します。デフォルトの値。
  • height: 50vh – ビューポート（画面）の高さの50%を指定します。

注意点や関連情報

heightプロパティを使用する際は、親要素の高さに依存する場合があるため、親要素に高さが指定されていない場合は正しく機能しないことがあります。また、パーセンテージやvh（ビューポート高さ）などの相対単位を使用する場合、画面サイズやコンテナのサイズに影響を受けるため、レイアウトが変動する可能性があります。

heightプロパティが効かない時の原因と対策

要素がインライン要素である

heightプロパティは、ブロックレベルの要素に対して有効ですが、spanやaのようなインライン要素には適用されません。インライン要素の高さは、その内容に依存します。
対策: インライン要素にheightを適用したい場合は、display: inline-block;やdisplay: block;を指定して、インライン要素をブロックレベルの要素に変換しましょう。例えば、span { display: inline-block; height: 100px; }のように指定します。

ボックスモデルの影響で高さが無視されている

heightプロパティを指定しても、paddingやborderが追加されている場合、これらの要素が合計の高さに含まれ、要素が意図したサイズよりも大きくなることがあります。
対策: ボックスモデルを適切に管理するために、box-sizing: border-box;を指定し、paddingやborderが高さに含まれるようにします。例えば、box-sizing: border-box; height: 200px;のように指定すると、paddingやborderが高さに影響しません。

要素がposition: absolute;やposition: fixed;を使用している

position: absolute;やposition: fixed;を使用している要素の場合、親要素やコンテナに依存せずに高さが計算されることがあります。これにより、heightプロパティの指定が無視されることがあります。
対策: 絶対位置や固定位置を使用している場合は、要素のtop、bottom、heightの指定が適切に行われているか確認し、意図した高さが反映されているか確認してください。

フレックスボックスやグリッドレイアウトが影響している

フレックスボックス（display: flex;）やグリッド（display: grid;）を使用している要素では、親要素のレイアウトルールに従って子要素の高さが調整されるため、heightプロパティが予想通りに動作しないことがあります。
対策: フレックスボックスやグリッドレイアウトで使用されている場合は、align-itemsやjustify-content、grid-template-rowsなどのレイアウト設定を確認し、必要に応じて調整します。例えば、flex: 1;やgrid-auto-rowsを指定して、要素の高さを調整します。

共通するCSSコード

<style>
    .css-sample-container {
      width: 100%;
      background-color: #f9f9f9;
      padding: 20px;
      border: 1px solid #ccc;
    }

    .css-sample-item {
      background-color: #cce7ff;
      border: 1px solid #99ccff;
      padding: 20px;
      text-align: center;
      width: 200px;
      margin: 10px auto;
    }
  </style>

height: 100px

この値は、要素の高さを100pxに固定します。高さが固定されるため、コンテンツが要素を超えるとオーバーフローが発生します。

HTMLコード

<div class="css-sample-container css-sample-height-100px">
    <div class="css-sample-item">100px Height</div>
  </div>

CSSコード

<style>
    .css-sample-height-100px {
      height: 100px;
    }
  </style>

表示結果

100px Height

height: 50%

この値は、親要素の高さの50%を指定します。親要素の高さが明確に定義されていない場合、期待通りに機能しないことがあります。

HTMLコード

<div class="css-sample-container css-sample-height-50%">
    <div class="css-sample-item">50% Height</div>
  </div>

CSSコード

<style>
    .css-sample-height-50% {
      height: 50%;
    }
  </style>

表示結果

50% Height

height: auto

この値は、要素の内容に基づいて高さを自動的に調整します。通常、ブロック要素にはデフォルトでこの値が設定されています。

HTMLコード

<div class="css-sample-container css-sample-height-auto">
    <div class="css-sample-item">Auto Height</div>
  </div>

CSSコード

<style>
    .css-sample-height-auto {
      height: auto;
    }
  </style>

表示結果

Auto Height

height: 50vh

この値は、ビューポート（画面）の高さの50%を指定します。レスポンシブデザインにおいて、ビューポートに基づいたレイアウトを作成するのに役立ちます。

HTMLコード

<div class="css-sample-container css-sample-height-vh">
    <div class="css-sample-item">50vh Height</div>
  </div>

CSSコード

<style>
    .css-sample-height-vh {
      height: 50vh;
    }
  </style>

表示結果

50vh Height

まとめ

  • heightプロパティは、要素の高さを指定するために使用されます。
  • 固定値、パーセンテージ、ビューポート基準の高さなど、さまざまな値を指定できます。
  • 親要素の高さに依存する値（パーセンテージ）は、親要素の高さが明確に定義されていない場合に問題を引き起こす可能性があります。
  • vh単位はビューポートの高さに依存するため、画面サイズの変化に応じてレイアウトが変動します。
スポンサーリンク