どうも7noteです。要素に高さを持たせる方法を紹介。
HTMLの要素に高さを持たせるならCSSでheightを指定するのが一般的。
ですが、heightを使わなくても高さを指定する方法もあります。
いろいろな高さの設定方法を紹介。
マニアックな高さをもたせる指定方法もあります。
① height
style.css
div {
height: 100px; /* 高さ指定 */
}
まずは通常のheightの指定方法です。
pxやvhなどで指定ができます。
② min-height, max-height
style.css
div {
min-height: 100px; /* 最低高さを指定 */
max-height: 500px; /* 最大高さを指定 */
}
通常のheightの指定とは違い、最低と最大を指定できます。基本的には親要素や子要素に準じますが、指定値を超えようとすれば制限がかかるようにできます。
③ padding
style.css
div {
padding: 30px 0; /* 余白を指定 */
}
余白を上下に取る事で高さを保持できます。
これはボックスモデルというHTMLのルールから高さを持つようになっています。
ボックスモデルでは、borderも高さに含まれるので要注意。
ボックスモデル、詳しくは→https://qiita.com/7note/items/ddce7f23cd075ad9431e
④ line-height
style.css
div {
line-height: 1.5; /* 行間を指定 */
}
line-heightは文字の行間を指定するものです。
文字も高さを持っていますが、さらにこの行間も高さを持っています。
大きい数字を指定すればそれだけ上下に余白(正確には行間)ができ、高さを調整することができます。
ただし行間なので、文章が2行になってしまうところには使えないかも。
⑤ table
index.html
<table>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
</table>
テーブルはヨコ一列同じ高さになるようにできています。
そのため他の横にある1番高い要素に合わせて高さが変わります。
⑥ flexbox
style.css
div {
display: flex; /* 横並びにする */
}
flexboxもテーブルと似たような効果があり、横並びにした場合、要素の高さは1番高いものに揃うようになります。
ただし、align-itemsを指定してしまうと高さが揃う効果が解除されてしまうので注意！
⑦ jsのライブラリなど
jsを使う事で高さを揃えたり、変更したりすることができます。
基本的にはheightの指定をjsで行なっているだけのものが多いかなと思います。
高さを揃えるライブラリなどもありますよ。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
↧