今回はheightについて紹介します。
widthに比べたら、そんなに使わないのでね…
ただ、どういうふうに高さが決まるかを知ってたら、ちょっと楽しいですよ。
height
heightの値
heightはpxや%、またはvhやvwなどで値を決めることができます。
今回はpxと%をのちほど使います。
要素の高さの決まり方
まず、要素の高さを見てみましょうか。
<p>に背景色をつけてます。
<p>ホホホホ</p>p {
background-color: aliceblue; /* うすい青色 */
}ホホホホ
という具合になりました。
文字ぶんの高さになりましたね。
これがheightを指定していない時の挙動です。
heightの初期値
heightを指定してないということは、初期値が使われています。
※初期値…プロパティが指定されていない時、はじめから与えられている値
で、heightの初期値はautoです。
autoだと、文字の大きさぶんの高さになるというわけですね。
高さを指定する
今度はheigthを指定しましょうか。
ここではpxを使います。
<p>ホホホホ</p>p {
background-color: aliceblue; /* うすい青色 */
height: 100px;
}ホホホホ
これも大丈夫ですよね？
この時、「ホホホホ」は上にあります。
あくまで、上から下に配置されていくってのが目の付けどころだったりします。
1番下に置くにはどうすればいいんだろう？って考えるのもアリです。
まあ、これを解説すると本題から外れそうなので、こちらをご覧ください。
「高さのある、要素の中の文字を下に置く」もしかしたら役立つかもなのcss指定
※クリックすると該当箇所にジャンプします。
親要素に囲まれている場合
先ほどの<p>を<div>で囲ってみましょう。
- 親：<div>
- 子：<p>
<div>
<p>ホホホホ</p>
</div>div {
border: solid 1px #000000;
}
p {
background-color: aliceblue; /* うすい青色 */
}
<div>には枠線を付けています。
ですので、heightを指定しないと、「親要素の高さ＝子要素の高さ」となります。
今度は<div>に高さを指定しましょう。
<div>
<p>ホホホホ</p>
</div>div {
border: solid 1px #000000;
height: 100px;
}
p {
background-color: aliceblue; /* うすい青色 */
}
<p>は<div>の最上段にあります。
こうなると、「<div>の高さ ≠ <p>の高さ」になります。
次は<p>に高さを指定。
<div>
<p>ホホホホ</p>
</div>div {
border: solid 1px #000000;
}
p {
background-color: aliceblue; /* うすい青色 */
height: 100px;
}
「<div>の高さ ＝ <p>の高さ」となりました。
%で指定
ここでは、親である<div>にheight: 100px。
子である<p>にはheight: 50%と指定します。
<div>
<p>ホホホホ</p>
</div>div {
border: solid 1px #000000;
height: 100px;
}
p {
background-color: aliceblue; /* うすい青色 */
height: 50%;
}
<p>は<div>の半分の高さになっているのが分かりますね。
じゃあ、<div>にheight: 100pxを指定しなかったらどうでしょうか。
<div>
<p>ホホホホ</p>
</div>div {
border: solid 1px #000000;
height: 100px;
}
p {
background-color: aliceblue; /* うすい青色 */
height: 50%;
}
「<div>の高さ ＝ <p>」の高さとなってしまいました。
heightの場合は、このように親にpx値で指定してあげないと上記のようなことになるんですね。
widthの場合だと、わざわざ親要素にpx値を指定しないのとは対照的です。
以下は、<p>にwidth: 50%と指定。
親の<div>には幅を指定していません。
<div>
<p>ホホホホ</p>
</div>div {
border: solid 1px #000000;
height: 100px;
}
p {
background-color: aliceblue; /* うすい青色 */
width: 50%;
}
なぜ、幅と高さで%のあつかいが違うのか
なぜ、幅と高さで%のあつかいが違うのかといえば、widthとheightの初期値であるautoに違いがあるからです。
width: autoは親要素いっぱいに広がります。
先ほどの<div>と<p>のコードの1番外には<body>がありますよね。
<body>
<div>
<p>ホホホホ</p>
</div>
</body>div {
border: solid 1px #000000;
width: auto;
}
p {
background-color: aliceblue; /* うすい青色 */
width: 50%;
}で、<div>にwidth: atuoが指定されていると、<body>いっぱいに広がります。
<body>とは何かというと、画面幅のことです。
もう少し正確にいうと、開いているブラウザの幅です。
ブラウザ…Google ChromeやSafariのこと。
とすれば、画面幅は決まってますよね。
スマホなら400pxなら、<body>も<div>も幅は400px。
そして、<div>の子である<p>はwidth: 50%なら幅200pxになります。
一方、height: autoは上で見たとおり、子の中身の高さにしかならないわけですね。
「親要素の高さ ＝ 子要素」です。
なので、子要素にwidth: 50%と指定しても、効かないわけです。
すみません、ちょっと分かりにくいですよね…
いずれ、もう少し分かりやすいように書き直します。
親の中に要素を2つ入れる
こういう場合はどうでしょう？
<div>
<h2>ホホホホ</h2>
<p>もうもう</p>
</div>div {
border: solid 1px #000000;
}
この場合、<div>の高さ ＝ <h2> ＋ <p> となります。
<div>の高さを指定していないと、こうなるのが普通なんですね。
子にposition: absoluteを指定すると…
じゃあ、唐突ですがposition: absoluteを<p>に指定しちゃいます。
親要素<div>にはposition: relativeを。
<div>
<h2>ホホホホ</h2>
<p>もうもう</p>
</div>div {
border: solid 1px #000000;
position: relative;
}
p {
position: absolute;
}
<p>の「もうもう」が<div>の枠線の外に出されてしまいました。
この時、「<div>の高さ ＝ <h2>」となっています。
つまり<p>にabsoluteと指定すれば、<div>の高さから除外されるんですね。
ちなみに、position: fixedも同じです。
これまで説明してきたように、高さの決まり方が分かれば、このpositionの話も理解しやすくなると思います。
今述べたことは、positionにほんの少しくわしく書いてるので、ご覧ください。
指定した高さを越えるテキスト量がある場合
次の指定をご覧ください。
<p>ホホホホ<br>ホホホホ<br>ホホホホ</p>p {
background-color: aliceblue; /* うすい青色 */
}ホホホホ
ホホホホ
ホホホホ
<p>にheightは指定してません。
「ホホホホ」が3段になってますが、<p>は文字ぶんの高さとなっています。
今度は、<p>にheight: 40pxと指定しました。
<p>ホホホホ<br>ホホホホ<br>ホホホホ</p>p {
background-color: aliceblue; /* うすい青色 */
height: 40px;
}ホホホホ
ホホホホ
ホホホホ
文字がはみ出ましたね。
3行ぶんある文字の高さを無視して、<p>は高さを40pxに指定したことになります。
そのはみ出た<p>にoverflow: hiddenと指定。
<p>ホホホホ<br>ホホホホ<br>ホホホホ</p>p {
background-color: aliceblue; /* うすい青色 */
height: 40px;
overflow: hidden;
}ホホホホ
ホホホホ
ホホホホ
すると、はみ出たぶんの文字が隠されます。
参考サイト
「height」は、CSS3をもとに紹介しました。
CSS3とは、cssのルールブックみたいなもので、最新バージョンです。
まとめ
heightも知ればわりとおもしろく感じます。
分かるまでは、苦痛かもですが…
要素の高さにパディングを含めて計算するかどうかは、box-sizingをご覧ください。
heightとline-heigtの関係は、こちらをどうぞ。
