CSSで使える単位をまとめてみました
とあるきっかけでCSSで使用できる単位について調べました。
ちなみにきっかけは以下のツイート。
要素の横幅を2cm大きくしてくれ、っていう修正指示がきた
— Sato Daiki (@Satoh_D) 2014, 8月 14出来るわけ無いだろJKと思ってたら「cm指定できるよ！」という返信が。
マジかよ...と思い調べてみたら本当にあるじゃないですか。
しかもcm以外に色々な単位があったので、まとめてみることにします。
指定できる単位の種類
CSSで使用出来る単位は大きく分けて次の6種類となっています。
- 相対単位
- 絶対単位
- 角度の単位
- 時間長の単位
- 周波数の単位
- 解像度の単位
それぞれの単位について見ていきましょう。
相対単位
ある基準の相対的な大きさを表します。
基準は次の2種類があります。
- フォントに相対的な単位
- 表示域の百分率による単位
環境が変わっても縮尺は変わらないので、基本的にこちらの単位を使うと良いでしょう。
フォントに相対的な長さ単位
| 単位 | 要約 |
|---|---|
| em | 適用されるフォントサイズを1とした時の大きさ。 継承されたフォントサイズが12pxの時、1.5emと指定すると18pxになります。 |
| ex | 要素のフォントに利用されている小文字の"x"の高さ。 計測が不可能もしくは実用できでない場合、1ex = 0.5emとなります。 |
| ch | 要素のフォントに利用されている数値の"0"の左端から次の文字の左端までの距離。 計測が不可能もしくは実用できでない場合、1ch = 0.5emとなります。 |
| rem | ルート要素(html要素)のフォントサイズを1とした時の大きさ。 |
ex, chは初めて聞きました。
ex, chは使う機会があるんでしょうか...。
表示域の百分率による単位
初期包含ブロックのサイズによってサイズが決まる単位です。
初期包含ブロックの縦幅/横幅が変化すれば、これらのサイズも変化します。
これらのサイズは、表示域のスクロールバーの有無に影響されます。
| 単位 | 要約 |
|---|---|
| vw | 初期包含ブロックの横幅の1/100。 初期包含ブロックの横幅が2000pxの場合、1vw = 20pxとなります。 |
| vh | 初期包含ブロックの横幅の1/100。 |
| vmin | vwとvhの小さい方の値が適用されます。 初期包含ブロックの横幅が1000px、縦幅が500pxの時、1vminは5pxとなります。 |
| vmax | vwとvhの大きい方の値が適用されます。 初期包含ブロックの横幅が1000px、縦幅が500pxの時、1vmaxは10pxとなります。 |
vwやvhは最近ちらほら聞きますね。
ex, chなどに比べたら全然使い道がありそうですね。
絶対単位
大きさが固定されている単位です。
普段定規で測るようなときに使用するものがあったりします。
| 単位 | 要約 |
|---|---|
| cm | センチメートル。1cm = (96/2.54)px |
| mm | ミリメートル。1mm = (1/10)cm |
| q | 四分ミリメートル。1q = (1/40)cm |
| in | インチ。1in = 2.54cm = 96px |
| pc | パイカ。1pc = (1/6)in = 12pt |
| pt | ポイント。1pt = (1/72)in |
| px | ピクセル。1px = (1/96)in |
ここで出ましたcm。
本当に指定できるとは...！
絶対単位の使い道って何があるんだと思ったらプリンタ等で出力するコンテンツ等に使うんですね。
あとパイカて初めて聞きました。印刷用の単位らしいです。
角度の単位
| 単位 | 要約 |
|---|---|
| deg | 度。 1度 = 1degで、1周 = 360degとなります。 |
| grad | グラジアン。"gon(ゴン)"または"grade(グラード)"とも。1周 = 400gradとなります。 |
| rad | ラジアン。1周 = 2πラジアンとなります。 |
| turn | 回転数。1周 = 1turnとなります。 |
degはtransform: rotate()のCSS3で最近聞くようになりました。
gradとかradとかturnって使い道あるんでしょうか...。
ちなみに直角はそれぞれ 90deg, 100grad, 約1.57rad, 0.25turn で表します。
時間長の単位
| 単位 | 要約 |
|---|---|
| s | 秒。1s = 1000msとなります。 |
| ms | ミリ秒。1000ms = 1sとなります。 |
時間もちゃんと仕様で定義されています。
CSS3のtransitionなどのアニメーション関係でよく目にしますね。
周波数の単位
| 単位 | 要約 |
|---|---|
| Hz | ヘルツ。1秒あたりの周波数を表します。 |
| kHz | キロヘルツ。1kHz = 1000Hzとなります。 |
周波数...？
使い道あるのかと思って調べたところ、今のところは無いみたいですね。
解像度の単位
| 単位 | 要約 |
|---|---|
| dpi | 1インチあたりのドット数を表す。 |
| dpcm | 1センチメートルあたりのドット数を表す。 |
| dppx | 1ピクセルあたりのドット数を表す。 |
Dots Per ○○の単位です。
使い道としては、メディアクエリのブレークポイントや
CSS Image Values and Replaced Content Module Level 3の「image-resolution」プロパティがあるらしいです。
image-resolution...また知らないプロパティが...。
最後に
ふとしたきっかけで調べてみた単位ですが、色々あるんですね。
侮ってましたが、結構奥が深いです...！
あと冒頭の問題ですがちゃんと算出して設定させていただきました。
助言をしていただいた方々、ありがとうございました！ｗ
