• Home
  • Web制作
  • 要素の高さを自由自在に！CSS heightプロパティを使いこなす

要素の高さを自由自在に！CSS heightプロパティを使いこなす

schedule update
Tags: CSS

CSS で要素の高さを指定する方法【 決定版 】！レスポンシブ対応や注意すべき値も！

Webページのレイアウトにおいて、要素の高さをコントロールすることは非常に重要です。CSSには、要素の高さを指定するための様々なプロパティや値が存在します。

この記事では、CSSで要素の高さを指定する方法を網羅的に解説します。初心者の方にも分かりやすく、 height プロパティの基本的な使い方から、より高度なレスポンシブ対応、注意すべき値まで、具体的なコード例を交えながら詳しく説明します。

この記事を読めば、CSSでの高さ指定をマスターできること間違いなしです！

こんな疑問を解決します

  • height プロパティの使い方
  • パーセンテージで高さを指定する方法
  • レスポンシブ対応で高さを調整する方法
  • min-height や max-height との違い
  • 注意すべき値 auto や inherit とは
あわせて読みたい
【CSS入門】Webページを彩るスタイルシートの基本から応用まで徹底解説！

1. height プロパティの基本

height プロパティは、要素の高さを指定するために使用します。

構文

.要素名 {
  height: 値;
}

1-1. ピクセル値で指定

最も一般的なのが、ピクセル値で高さを指定する方法です。

.box {
  height: 100px; /* 高さ100px */
}

1-2. パーセンテージ値で指定

親要素に対する相対的な高さで指定したい場合は、パーセンテージ値を使用します。

.parent {
  height: 200px;
}

.child {
  height: 50%; /* 親要素の高さの50% */
}

2. レスポンシブな高さ指定

画面サイズが異なるデバイスに対応するため、レスポンシブな高さ指定は必須です。

2-1. vw , vh を使う

vw (viewport width) や vh (viewport height) を使うことで、ビューポートの幅と高さに対する相対的な高さで指定できます。

.hero-section {
  height: 50vh; /* ビューポートの高さの50% */
}

2-2. メディアクエリを使う

画面サイズに応じて高さを変更したい場合は、メディアクエリを使用します。

/* スマホサイズ */
@media screen and (max-width: 768px) {
  .header {
    height: 60px; 
  }
}

/* PCサイズ */
@media screen and (min-width: 769px) {
  .header {
    height: 80px; 
  }
}

3. その他の高さ指定

3-1. min-height, max-height

要素に最低限の高さを設定したい場合は min-height 、最大の高さを制限したい場合は max-height を使用します。

.content {
  min-height: 300px; /* 最低でも300pxの高さ */
  max-height: 500px; /* 最大で500pxの高さ */
}
詳しくはこちら
【CSS】高さ指定を使いこなそう！min-heightとmax-heightを徹底解説

3-2. line-height で高さを調整

テキストだけの要素の場合、line-height で行の高さを指定することで、間接的に要素の高さを調整できます。

.button {
  line-height: 40px; /* 高さ40pxのボタン */
}

4. 注意すべき値

4-1. auto

height: auto; は、要素の高さをコンテンツの高さに合わせて自動調整します。これは height プロパティのデフォルト値です。

4-2. inherit

height: inherit; は、親要素の height プロパティの値を継承します。

5. まとめ

この記事では、CSSで要素の高さを指定する方法を解説しました。 height プロパティの基本的な使い方から、レスポンシブ対応、その他のプロパティとの組み合わせ方まで、様々なテクニックを紹介しました。

この記事を参考に、Webページのレイアウトを思い通りにコントロールしましょう！

関連記事