CSSで知らない単位が出てきても気後れしないために。
大きさ
相対単位と絶対単位
大きさの単位には相対単位と絶対単位があります。
相対単位
ブラウザの表示領域や他の要素サイズとの関係で算出される相対的なサイズ指定。
ブラウザの操作によって変化する柔軟な単位で、文字サイズの指定などに適します。
絶対単位
ブラウザの表示領域や他の要素サイズに依存しません。
大きさの単位の紹介
%(パーセント)
親要素の領域や初期値を基準として相対的にサイズを指定します。
ピクセル換算：相対
em(エム)
基準：要素のフォントサイズ
文字の高さを 1em とした単位です。
※印刷の分野では文字“M”の幅だったためe"m"
例：その時点の文字サイズが14ptの場合
1em = 14pt
2em = 28pt
0.5em = 7pt
ピクセル換算：相対
ex(エックス、エックスハイト)
もとは小文字xの高さを１とすると言われてたが、実際は「emの2分の1」になっているそうです。
タイポグラフィ的な微調整に使われることがほとんどのようです。
ピクセル換算：相対
in(インチ)
2.54センチメートル(1in=2.54cm)
ピクセル換算：96px
cm(センチメートル)
ピクセル換算：約37.80px
mm(ミリメートル)
ピクセル換算：約3.78px
pt(ポイント)
1/72インチ相当(1pt=1/72in)
ピクセル換算：約1.33px
pc(パイカ)
12ポイント相当(1pc=12pt)
ピクセル換算：16px
px(ピクセル)
画面解像度に依存します。
例：72dpiの場合 72pxが2.54cm
96dpiの場合 96pxが2.54cm
本来は相対的な単位ですが、実際は絶対的な単位として使用されているようです。
ピクセル換算：1px
ch(キャラクターユニット、シーエイチ)
基準：要素の「0」の幅
基本的には等幅フォントが対象
例：要素にwidth: 40ch と指定した場合 40文字入る幅が設定される
ピクセル換算：相対
rem(ルートエム、レム)
基準：ルート要素のフォントサイズ
ピクセル換算：相対
vw(ビューポートウィズ、ブイダブリュー)
基準：ビューポート幅の1/100
ピクセル換算：相対
vh(ビューポートハイト、ブイエイチ)
基準：ビューポートの高さの1/100
ピクセル換算：相対
vmin(ビューポートミン、ブイミン)
基準：ビューポートの短い辺の1/100
ピクセル換算：相対
vmax(ビューポートマックス、ブイマックス)
基準：ビューポートの長い辺の1/100
ピクセル換算：相対
q(キュー、クオーターミリメートル)
基準：1/4ミリメートル(1q = (1÷40)cm)
ピクセル換算：約0.95px
rem詳細
remはemに似た単位です。
emの基準は親要素のフォントサイズですが、remはrootのフォントサイズが基準です。
remを使うと、下記のようなemで指定した要素内でさらにemを指定すると、値の継承が繰り返されて計算が複雑になったり、小数点以下がたくさん発生してしまう事象を回避できます。
html { font-size: 14px; }
div { font-size: 1.2em; }
<body><!-- 14px -->
<div>
xxxx <!-- 14 * 1.2 = 16.8px -->
<div>
xxxx <!-- 16.8 * 1.2 = 20.16px -->
<div>
xxxx <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
mixinでremを使いやすくする
SCSSなどmixinが使える場合、remの指定をしやすくできます。
@mixin font-size($size, $base:16) {
font-size: $size / $base + rem;
}
.text {
@include font-size(20);
}
↓コンパイル
.text {
font-size: 1.25rem;
}
vhとvw
vhとvw はそれぞれ画面の幅、高さを1/100にしたものを単位にするので、画面幅に対して常に一定の大きさになります。
例：320 x 480 の場合 1w = 3.2px, 1vh = 4.8px
背景を敷き詰める場合は、height:100vh;width:100vw;にすると簡単になります。
rem は元がフォントサイズなので固定幅になり、様々な解像度のデバイスに対応するレスポンシブWebデザインには適用しにくい場合があります。
vh、vwと%の違い
| 単位 | 基準 |
|---|---|
| % | 親要素 |
| vh,vw | ビューポート |
vminとvmax
vmin、vmax は幅、高さに関係なく、それぞれビューポートの最小値の1/100と最大値の1/100になる単位です。
例：幅が1100px、高さが700pxの場合
1vmin = 7px, 1 vmax = 11px
※vh, vwは縦置きと横置きで値が変わりますが、vmin, vmaxは値が変わらないので、正方形など、異なる画面サイズで幅と高さの比率を変えたくない要素に使えます。
角度
deg(ディグリー)
一般的に使用する角度
360°=360deg
grad(グラード)
直角(90°)を100とする単位
360°=400grad
rad(ラジアン)
360°=2nrad
turn(ターン)
1ターン=1周
360°=1turn