cssにおける単位の指定方法

Css

cssでの単位の指定方法、普段「px」や「rem」などが多い私ですが、もっとたくさん選択肢がありました!
自分用にメモしておきます。

長さや大きさの単位系

利用できる単位には、基準となる対象を持つ「相対単位」と、指定した値で大きさが決まる「絶対単位」が存在する。

相対単位

相対単位として指定できるサイズ単位は以下の通り。

  • px
    • 1ピクセルに対応した単位。cssの仕様では絶対単位に分類されているが、閲覧者のディスプレイの解像度によって指定した値で表示されるサイズは変化する。
  • em
    • 要素のフォントサイズに対応した単位。親要素のフォントサイズが16pxであれば1emは16pxと同じ大きさである。
  • ex
    • 要素のフォントの小文字エックス(x)の高さに対応した単位。
  • rem
    • ルート要素(html要素)のフォントサイズに対応した単位。多くのブラウザでは標準のフォントサイズが16pxのため、1remは16pxと同じサイズである。
  • ch
    • 要素のフォントのゼロ(0)の文字幅に対応した単位。
  • vw
    • ビューポート幅の1%に対応した単位。
  • vh
    • ビューポートの高さの1%に対応した単位。
  • vmin
    • ビューポートの短辺の長さの1%に対応した単位。
  • vmax
    • ビューポートの長辺の長さの1%に対応した単位。

ビューポート」とは、閲覧者のブラウザーの表示領域の幅・高さを表す。スマートフォンなど、ブラウザーの表示領域を閲覧者が変更できない場合に対して、最適なサイズを指定するのに利用が可能。

絶対単位

絶対単位として指定できるサイズ単位は以下の通りです。

  • cm
    • 1センチメートルに対応した単位。
  • mm
    • 1ミリメートルに対応した単位。
  • in
    • 1インチ(2.54cm)に対応した単位。
  • pt
    • 1ポイント(1インチの1/72)に対応した単位。
  • pc
    • 1パイカ(12ポイント)に対応した単位。

角度の単位系

グラデーション関数やトランスフォーム系プロパティなどで指定できる角度の単位は以下の通り。

  • deg
    • 度数法。0~360までの数値にdegをつけて角度を表す。90degが右向き。
  • grad
    • グラード法。0~400までの数値にgradをつけて角度を表す。100gradが右向き。
  • rad
    • ラジアン数。正円1周分を2nとした数値で角度を指定する。
  • turn
    • 正円1周分を1ターンとした数値にturmをつけて角度を表す。0.25turmが右向き。

時間の単位系

トランジション系プロパティやアニメーション系プロパティで指定できる時間の単位は以下の通り。なお、時間を指定するプロパティには既定の上限が設けられており、指定した時間が上限を超えている場合は無効となる。

  • s
    • 1秒に対応した単位。
  • grad
    • 1/1000秒に対応した単位。

css3になって、角度や時間の単位も追加されたので、一応まとめてみました。
すべて覚える必要じゃないと思いますが、「こういう単位があるんだ」と頭の片隅に置いておいたほうがいいかもしれませんね…。

コメント