More than 3 years have passed since last update.

height以外の方法も！？高さを指定できる7つの方法

Posted at 2021-04-24

#どうも7noteです。要素に高さを持たせる方法を紹介。

HTMLの要素に高さを持たせるならCSSでheightを指定するのが一般的。
ですが、heightを使わなくても高さを指定する方法もあります。

いろいろな高さの設定方法を紹介。
マニアックな高さをもたせる指定方法もあります。

① height

style.css

div {
  height: 100px; /* 高さ指定 */
}

まずは通常のheightの指定方法です。
pxやvhなどで指定ができます。

style.css

div {
  min-height: 100px; /* 最低高さを指定 */
  max-height: 500px; /* 最大高さを指定 */
}

通常のheightの指定とは違い、最低と最大を指定できます。基本的には親要素や子要素に準じますが、指定値を超えようとすれば制限がかかるようにできます。

style.css

div {
  padding: 30px 0; /* 余白を指定 */
}

余白を上下に取る事で高さを保持できます。
これはボックスモデルというHTMLのルールから高さを持つようになっています。
ボックスモデルでは、borderも高さに含まれるので要注意。

style.css

div {
  line-height: 1.5; /* 行間を指定 */
}

line-heightは文字の行間を指定するものです。
文字も高さを持っていますが、さらにこの行間も高さを持っています。
大きい数字を指定すればそれだけ上下に余白(正確には行間)ができ、高さを調整することができます。
ただし行間なので、文章が2行になってしまうところには使えないかも。

index.html

<table>
  <tr>
    <th></th>
    <td></td>
    <td></td>
  </tr>
</table>

テーブルはヨコ一列同じ高さになるようにできています。
そのため他の横にある1番高い要素に合わせて高さが変わります。

style.css

div {
  display: flex; /* 横並びにする */
}

flexboxもテーブルと似たような効果があり、横並びにした場合、要素の高さは1番高いものに揃うようになります。

ただし、align-itemsを指定してしまうと高さが揃う効果が解除されてしまうので注意！

jsを使う事で高さを揃えたり、変更したりすることができます。
基本的にはheightの指定をjsで行なっているだけのものが多いかなと思います。
高さを揃えるライブラリなどもありますよ。