はじめに
CSS3の長さの単位のまとめ。
備忘録用
分類
CSS3で長さを表す単位は下記に分類できる。
- 相対的な長さを表す単位
- フォントに対する相対的な長さを表す単位
- ビューポートにに対する％で表す単位
- 絶対的な長さを表す単位
※ビューポートとは？
Webページを表示する領域のこと。
PCブラウザであればウィンドウの表示領域全体のこと。
SPであれば画面の表示領域全体のこと。
フォントに対する相対的な長さを表す単位
em
要素のフォントサイズを1とする単位
rem
html要素のフォントサイズを1とする単位
→root要素のem
ex
要素のフォントのx-heightを1とする単位
x-heightとは?
→アルファベットの基準となる高さの1つで小文字「x」の高さ
ch
要素のフォントの0の幅を1とする単位
chはcharacterの略
ビューポートに対する%で表す単位 viewport
vw
ビューポートの幅の1%を1とする単位
※使用機器の縦置き、横置きで変化
vh
ビューポートの高さの1%を1とする単位
※使用機器の縦置き、横置きで変化
vmin
ビューポートの幅と高さのうち、短い方の1%を1とする単位
vmax
ビューポートの幅と高さのうち、長い方の1%を1とする単位
絶対的な長さを表す単位
px ピクセル
1/96インチを1とする単位
pt ポイント
1/72インチを1とする単位
pc パイカ
12ポイントを1とする単位
in インチ
2.54センチメートルを1とする単位
cm センチメートル
mm ミリメートル
q クォーターミリメートル
1/4ミリメートルを1とする単位