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インチを参照した数値
pt1ポイント(1/72インチ)を参照した数値
pc1パイカ(12ポイント)を参照した数値

今回調べた際に知りましたが、詳細文にもある「ビューポート」というのはユーザーのブラウザの表示領域のサイズを表す単語だそうです。個人的にはこれが一番収穫ですね。超便利そうです。

他には相対単位の「rem」というものがありましたが、よく分からなかったので書いていません。(申し訳ない)

ですが、上から二番目の「em」に関してはよく見かける割に、今までよく意味が分からなかったので良かったです。親要素を参考にするとなると、たしかに色々便利な点があるかもしれませんね。

角度と時間の単位

まだまだ単位はありますが使うかもしれないのは角度と時間でしょう。こちらは数が少ないので全て書いていきます。

単位詳細
以下↓角度単位
deg度数法を参照。有効範囲→0〜360
gradグラード法を参照。有効範囲 → 0〜400
radラジアン数を参照。有効範囲0〜2π
turn1ターンを円一周とした単位。有効範囲0〜1.0
以下↓時間単位
s秒を参照した数値
msミリ秒(1/1000 s)を参照した数値

こちらはさすがに知っているものが多いですね。あまり使う機会も無いかもしれませんが、常識と同じと覚えておけば良いものと思われます。

まとめ

今回はCSSで使う単位についてまとめてみました。調べてみると自分の知らない単位がたくさんあって、自分の未熟さを痛感しました……..。

これからも勉強を絶やさずにどんどん知識を付けていきたいと思った記事でした。書いてる側がこんなんで良いのかと思うことも多々あります。いずれにせよまだまだ勉強する余地はたくさんありますね!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。