CSSで指定する単位の種類ってどれくらいあるんだろうか 公開：2019.08.03 更新：2019.09.10
こんにちは、木彫り猫です。
実は私もプログラムを初めて日が浅いので、CSSで指定する各パラメータの単位がどれくらいあるのか気になりました。今回は表も使ってみて、まず自分から(笑)覚えていこうと思います。
CSSで指定できる単位
調べたところ、指定できる単位には基準となる対象が別にある「相対単位」と自身だけで大きさが決まる「絶対単位」があるようです。
| 単位 | 詳細 |
|---|---|
| 以下↓相対単位 | |
| px | 使用されるディスプレイの解像度を参照した数値 |
| em | 親要素のフォントサイズに対応した数値。1emなら親要素の100%の値 |
| ex | 使用するフォントの小文字の「x」の高さに対応した数値 |
| ch | 使用するフォントの「0」の文字幅に対応した数値 |
| vw | ビューポートの幅1%に対応した数値。 |
| vh | ビューポートの高さ1%に対応した数値。 |
| vmin | ビューポートの短辺の長さの1%を参照する。 |
| vmax | ビューポートの長辺の長さの1%を参照する。 |
| 以下↓絶対単位 | |
| cm | センチメートルを参照した数値 |
| mm | ミリメートルを参照した数値 |
| in | インチを参照した数値 |
| pt | 1ポイント(1/72インチ)を参照した数値 |
| pc | 1パイカ(12ポイント)を参照した数値 |
今回調べた際に知りましたが、詳細文にもある「ビューポート」というのはユーザーのブラウザの表示領域のサイズを表す単語だそうです。個人的にはこれが一番収穫ですね。超便利そうです。
他には相対単位の「rem」というものがありましたが、よく分からなかったので書いていません。(申し訳ない)
ですが、上から二番目の「em」に関してはよく見かける割に、今までよく意味が分からなかったので良かったです。親要素を参考にするとなると、たしかに色々便利な点があるかもしれませんね。
角度と時間の単位
まだまだ単位はありますが使うかもしれないのは角度と時間でしょう。こちらは数が少ないので全て書いていきます。
| 単位 | 詳細 |
|---|---|
| 以下↓角度単位 | |
| deg | 度数法を参照。有効範囲→0〜360 |
| grad | グラード法を参照。有効範囲 → 0〜400 |
| rad | ラジアン数を参照。有効範囲0〜2π |
| turn | 1ターンを円一周とした単位。有効範囲0〜1.0 |
| 以下↓時間単位 | |
| s | 秒を参照した数値 |
| ms | ミリ秒(1/1000 s)を参照した数値 |
こちらはさすがに知っているものが多いですね。あまり使う機会も無いかもしれませんが、常識と同じと覚えておけば良いものと思われます。
まとめ
今回はCSSで使う単位についてまとめてみました。調べてみると自分の知らない単位がたくさんあって、自分の未熟さを痛感しました……..。
これからも勉強を絶やさずにどんどん知識を付けていきたいと思った記事でした。書いてる側がこんなんで良いのかと思うことも多々あります。いずれにせよまだまだ勉強する余地はたくさんありますね！
