CSSの単位まとめ pxからvm/vh/vmin/vmaxまで
- 2015/11/17
- 近藤
こんにちは。制作部の近藤です。
今日は、CSSで扱う単位の話しをまとめてみたいと思います。
CSSでなぜ単位が必要か?
伝えるべき/伝えたい内容を伝わりやすいデザインにするためには、
様々な手法があると思いますが、もしここで単位が無かったらとても大変ですね。
主観的な基準しかなかったら、
依頼主:「ここ、めちぇくちゃでかめ、で表示したいです」
作り手:「めちゃくちゃでかめ、でやってみました」
依頼主:「めちゃくちゃでかすぎですね。ちょいでかめよりちょいでかいくらいかな??」
などのやりとりが多発し、大変困りそうです。
ブラウザに、「ちょいでかめ」と指示を出すのは難しそう・・。
単位があれば、上記すべて解決できるわけではありませんが、
ブラウザに指示を出しやすくなります。
CSSで使える単位一覧
CSSで指定できる主な単位には、以下があります。
単位 | 概要 | 基準 |
---|---|---|
px | ディスプレイの画像解像度に応じた相対的なブレにくい単位。 | ディスプレイの画像解像度 |
% | 基準値に対しての割合を指定する単位。 | 要素による。大概は親要素の値を基準とする。 |
em/ex/ch | 文字のサイズに応じた単位。 | 適用要素の文字サイズ(指定が無い場合は親要素)などを基準とする。 em:適用要素のフォントサイズを1とした単位。 ex:適用要素の英小文字「x」の高さを1とした単位。 ch:適用要素の「0」の幅を1とした単位。 |
vw/vh/vmin/vmax | ビューポート基準のサイズ。 | ビューポートのサイズ |
mm/cm/in/pt/pc/ | ディスプレイ外を対象とした絶対単位 | 絶対値のため、これ自体が基準(なのでデバイスに応じて~~という表現が不得意)。 mm:1ミリメートル cm:1センチメートル=10mm in:1インチ=約2.54cm=96px pt:1ポイント=1/72in=約1.33px pc:1パイカ=12pt=16px |
deg/grad/rad/tunr | 角度などを指定する単位 | 絶対値。 deg:よく使う、度。360degで1周。 grad:グラディアン(gradian) 。直角(90°)を 100 とする単位。 rad:ラジアン。1周は 2π ラジアン tunr:ターン。1ターン=1周。 |
s/m | アニメーションなどの時間を指定する単位。 | 絶対値。 s:秒。1s = 1秒 m:ミリ秒。1000分の1秒。1000ms = 1s |
%やemなどの相対的な単位は、様々なデバイス向けに便利な単位でもあるのですが、基準が親要素となるなど、HTMLの構造に依存してしまう面もあり、使いどころによっては厄介な単位でもあります。
%よりも環境にやさしい?viewport関連単位
最近良く目にするようになった、vw/vhといった単位は、viewportを基準とした単位のため、親要素の幅などをすっとばして指定することができ、便利です。
たとえば、%で画面いっぱいの表現を取りたい場合は、position: fixed などでの配置やJavaScriptでの配置がこれまでの主な指定方法でしたが、
width: 100vw; height: 100vh;のようにviewport基準の単位を用いれば、簡単に実装できます。
android端末やタブレットなど、ディスプレイサイズが多様になり、
どの要素をどのくらいの盤面率でユーザーさんに見てもらうかは、とても重要なデザイン上の判断基準になっていくと思います。
android4.4~、など、利用できる環境は多少縛られると思いますが、
レスポンシブ対応の際や、SPA作る際には、とても有効な単位だと思いました。