サイズ単位の種類
CSSではサイズを指定する時は、要素に合わせてさまざまな単位を使い分けることができます。
サイズには大きく分けて「絶対単位」と「相対単位」があり以下の特徴があります。
- 絶対単位：固定サイズなので同じ値なら常に同じサイズになります。
- 相対単位：他の要素のサイズに連動するので同じ値を指定しても常に同じサイズになるとは限らない
単位の一覧
単位は以下のものがあります。
px、emが特に使用されますので、最低限この２つは押さえておきましょう。
| 単位 | 分類 | 解説 | 1単位換算 |
|---|---|---|---|
| px | 絶対 | モニターの1ドットに対応した単位で、 1px = 1ドットになります。 読みは「ピクセル」です。 CSSでは最もよく使われる単位です。 |
1px = 1ドット |
| in | 絶対 | １インチ（2.54センチ）を基準にした単位で、 1in = 96pxになります。 |
1in = 96px |
| cm | 絶対 | １センチを基準にした単位で、 1cm = 約37.8pxになります。 |
1cm = 約37.8px |
| mm | 絶対 | １ミリを基準にした単位で、 1mm = 約3.78pxになります。 |
1mm = 約3.78px |
| pt | 絶対 | １ポイント（1/72インチ）を基準にした単位で、 1pt = 約1.33pxになります。 |
1pt = 約1.33px |
| pc | 絶対 | １パイカ（12ポイント）を基準にした単位で、 1pc = 約16pxになります。 |
1pc = 約16px |
| q | 絶対 | 1/4ミリを基準にした単位で、 1q = 約0.95pxになります。 （CSS3以降で追加された単位です。） |
1q = 約0.95px |
| em | 相対 | フォントサイズを基準にした単位で、 1em = font-sizeで定義されたサイズです。 なので、font-size値によってサイズが変わります。 デフォルトのフォントサイズだと、 1em = 16pxになります。 |
1em = デフォルト フォントサイズ |
| ex | 相対 | x（小文字のX）の高さを基準にした単位です。 なので、font-size値によってサイズが変わります。 |
1ex = 小文字xの高さ |
| ch | 相対 | 0（数値のゼロ）の幅を基準にした単位です。 なので、font-size値によってサイズが変わります。 （CSS3以降で追加された単位です。） |
1ch = 数値0の幅 |
| vw | 相対 | ビューポート幅の1/100を基準にした単位です。 なので、ビューポートによってサイズが変わります。 （CSS3以降で追加された単位です。） |
1vw = viewport幅 の1/100 |
| vh | 相対 | ビューポートの高さの1/100を基準にした単位です。 なので、ビューポートによってサイズが変わります。 （CSS3以降で追加された単位です。） |
1vh = viewport 高さの1/100 |
| vmin | 相対 | ビューポートの短い方のサイズの 1/100を基準にした単位です。 なので、ビューポートによってサイズが変わります。 （CSS3以降で追加された単位です。） |
1vmin = viewportの 短い方のサイズ の1/100 |
| vmax | 相対 | ビューポートの長い方のサイズの 1/100を基準にした単位です。 なので、ビューポートによってサイズが変わります。 （CSS3以降で追加された単位です。） |
1vmax = viewportの 長い方のサイズ の1/100 |
| rem | 相対 | ルート要素のフォントサイズを基準とした単位です。 1rem = ルート要素のフォントサイズです。 親要素のフォントサイズに影響を受けたくない時 に使用します。 例えば、em指定だと親要素のフォントサイズに 引きずられてしまいますが、 remを使えば親要素のフォントサイズに影響を 受けることがなくなります。 （CSS3以降で追加された単位です。） |
1rem = ルート要素 のフォントサイズ |
サンプル
width:200px height:100px
この文字は1em
この文字は1.5em
この文字は2em
width:10cm height:1cm
