CSSで使える単位が増えてたので改めて学び直し #css

CSSで使える単位が増えてたので改めて学び直し #css

CSSだけでwebページをバウンド表示させる方法(q-az)という記事を見てたら、vhなんていう単位が出ていました。しばらく離れてるうちにCSS界隈もいろいろ変わってきてたんだなぁと感慨深く思う一方で、CSS3で使えるようになった新しい単位を、そういえばしっかりと確認していなかったことを思い出しました。

そんなわけで久しぶりの記事は、CSS3で新しく使えるようになった単位について改めて学び直ししたことについてです。

<html>で指定した文字サイズの幅を基準にする単位「rem」

似たような単位でemというのは前からありました。emは文字サイズをどんどん継承していくのに対し、remは<html>の文字サイズを基準にする、そんな単位です。

と、文字で書いてもいまいちわかりにくいので実際に試してみることにします。

テスト用のhtmlはこんなんで。

cssはこんなんで。

こんなかんじで入れ子にして文字サイズがどう変化していくかを検証してみました。

親の文字サイズを継承するemの変化

上のようなソースを使う場合、親の文字サイズを継承するem単位ならば、文字サイズ1~3は順々に大きくなっていきます。

結果はこちら。

文字サイズ1(16px * 1.25 =  20px)

文字サイズ2(16px * 1.25 * 1.25 = 25px)

文字サイズ3(16px * 1.25 * 1.25 * 1.25 = 31.25px)

見事に文字がどんどん大きくなっていってますね。今回は1.25emというサイズにしていますので文字サイズは親の1emに対して、どんどん1.25倍していく形になりました。最終的には3乗することになったので、かなりの大きさになります。親の文字サイズを継承していくということで、親の文字サイズがどんな値になってきているのかを常に把握していないと、大変なことになるのがem単位でした。

<html>で指定した文字サイズの幅を基準にするremの変化

さて、次はremを使った場合です。remはemと同様に文字サイズを基準にはするものの継承型ではなくてhtml基準型です。

文字サイズ1(16px * 1.25 = 20px)

文字サイズ2(16px * 1.25 = 20px)

文字サイズ3(16px * 1.25 = 20px)

結果はどう変わったか、一目瞭然ですね。

どんなに親子関係を構築しても文字サイズはhtml基準になっているので変化しません。文字サイズを考えるときに、常にhtml基準だけでよくなるのは、継承型のemにはない魅力です。もちろん文字サイズの指定だけではなく、ボックスのサイズやブロックのサイズにも使えるので文字サイズを元に組み上げたい人にはいいかもしれません。

viewportを基準にする単位「vw」と「vh」

レスポンシブデザインをする上で大事なるviewport。(余談ですが、viewportと書いておきながらviewpointって読んでいた時期があります。壮大な勘違いです。)そのviewportを基準にしてサイズを決めていくのが「vw」と「vh」です。

「vw」「vh」ともにviewportのサイズの100分の1を1単位として計算します。device-widthがいろいろある昨今において、こうした相対的な単位が出てくるのはとてもうれしいことですね。「%」で考えるよりも、いっそう気軽に組み立てられるメリットがあります。

たとえば、iPhone 6 Plus は w414 * h736のviewportになってるので、1vwは 414 / 100 の 4.14px、1vhは 736 / 100 の 7.36pxだということがわかります。

ということをいちいち考えずとも、スマホの画面を縦横それぞれ100分割して考えればOKくらいに思っておいてもいいかもしれません。

viewport

イメージとしては上のイラストのように思ってよいと想います。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top