単位を知れば百戦危うからず

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を指定すると、値の継承が繰り返されて計算が複雑になったり、小数点以下がたくさん発生してしまう事象を回避できます。

```CSS
html { font-size: 14px; } 
div { font-size: 1.2em; }
```

```html
<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の指定をしやすくできます。

```:scss
@mixin font-size($size, $base:16) {
    font-size: $size / $base + rem;
}

.text {
    @include font-size(20);
}
```
↓コンパイル

```:css
.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|ビューポート|


##### アドレスバーやタブバーなどへの対応
vhはアドレスバーやタブバーなどが用意されているモバイルデバイスへの対応が難しい場合がありました。

|単位|意味|
|---|---|
|lvh(lはlarge viewport)|アドレスバーやタブバーなどの要素を含まないビューポートサイズを使う|
|svh(sはsmall viewport)|アドレスバーやタブバーなどの要素を含むビューポートサイズを使う|
|dvh(dはdynamic viewport)|要素の表示/非表示に合わせてlarge viewportとsmall viewportを切り替える|


#### vminとvmax
vmin、vmax は幅、高さに関係なく、それぞれビューポートの最小値の1/100と最大値の1/100になる単位です。

例：幅が1100px、高さが700pxの場合
1vmin = 7px, 1 vmax = 11px

※vh, vwは縦置きと横置きで値が変わりますが、vmin, vmaxは値が変わらないので、正方形など、異なる画面サイズで幅と高さの比率を変えたくない要素に使えます。

* * *

#### vbとvi 

vbとviはWebページ全体の幅、高さを1/100にしたものを単位にします。


例：
Webページの高さが100000pxの場合、1vbは100000pxの1%(=1000px)になります。
Webページの幅が1920pxの場合、1viは1920pxの1%(=19.2px)になります。



## 角度


#### deg(ディグリー)
一般的に使用する角度
360°=360deg

* * *

#### grad(グラード)
直角(90°)を100とする単位
360°=400grad

* * *

#### rad(ラジアン)
360°=2nrad

* * *

#### turn(ターン)
1ターン=1周
360°=1turn


## 所要時間

#### s
秒

* * *

#### ms
ミリ秒
1sは1000ms



## 周波数の単位

##### Hz
ヘルツ
1秒あたりの周波数



* * *

#### kHz
キロヘルツ
1kHz=1000Hz


* * *


## 解像度の単位

#### dpi
1インチあたりのドット数

#### dpcm

1センチメートルあたりのドット数


#### dppx,x
ディスプレイの1pxあたりのドット数