Webデザインにおいて、要素の高さを調整することは重要です。CSSのheightプロパティを使えば、ボックスの高さを自由に設定できます。本記事では、heightの基本的な使い方から応用テクニックまでを詳しく解説します。
Contents
heightプロパティの基本構文
CSSでheightを指定する基本構文は以下の通りです。
selector {
height: 値;
}例えば、以下のコードはdivの高さを200pxに設定します。
div {
height: 200px;
background-color: lightblue;
}
heightの指定方法
heightには様々な指定方法があります。
固定値（px, em, remなど）
div {
height: 150px; /* 高さ150px */
}固定サイズで指定すると、要素の高さが変わらない。
パーセンテージ（%）
div {
height: 50%; /* 親要素の50%の高さ */
}親要素の高さに対して相対的に決まる。
auto（デフォルト）
div {
height: auto; /* コンテンツの高さに合わせる */
}コンテンツ量に応じて高さが変わる。
vh（ビューポート高さ）
div {
height: 100vh; /* 画面の高さいっぱいに */
}100vh でデバイスの画面高いっぱいに。
min-height / max-height（最小・最大高さ）
div {
min-height: 100px; /* 最小100px */
max-height: 300px; /* 最大300px */
}要素の高さを制限し、レスポンシブ対応しやすい。
heightを使う際の注意点
- 親要素が高さを持っていないと
height: %は機能しない overflowプロパティを使うとスクロール制御が可能- レスポンシブ対応には
vhやmin-heightを活用
まとめ
heightを使えば要素の高さを自由に調整可能。- 固定値（px）、パーセンテージ（%）、ビューポート単位（vh）など、用途に応じて指定できる。
min-heightやmax-heightを使うと、柔軟なレイアウト設計が可能。
適切なheightの指定方法を選び、使いやすいレイアウトを実現しましょう！
widthについてはこちらへ
コメント