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分の１秒。1000ms = 1s |
%やemなどの相対的な単位は、様々なデバイス向けに便利な単位でもあるのですが、基準が親要素となるなど、HTMLの構造に依存してしまう面もあり、使いどころによっては厄介な単位でもあります。
%よりも環境にやさしい？viewport関連単位
最近良く目にするようになった、vw/vhといった単位は、viewportを基準とした単位のため、親要素の幅などをすっとばして指定することができ、便利です。
たとえば、%で画面いっぱいの表現を取りたい場合は、position: fixed などでの配置やJavaScriptでの配置がこれまでの主な指定方法でしたが、
width: 100vw; height: 100vh;のようにviewport基準の単位を用いれば、簡単に実装できます。
android端末やタブレットなど、ディスプレイサイズが多様になり、
どの要素をどのくらいの盤面率でユーザーさんに見てもらうかは、とても重要なデザイン上の判断基準になっていくと思います。
android4.4～、など、利用できる環境は多少縛られると思いますが、
レスポンシブ対応の際や、SPA作る際には、とても有効な単位だと思いました。
