CSSでのサイズ指定で使える単位を紹介します。
| 単位 | 説明 | 例 |
|---|---|---|
| em | 親要素のフォントの高さ("M"の高さを基準)を1とする単位 | font-size:2em |
| ex | 親要素の小文字の"x"のフォントサイズの高さを1とする単位 | font-size:3ex |
| rem | ルート(body)のフォントの高さ("M"の高さを基準)を1とする単位 | font-size:2em |
| ic | 親要素の"水"の文字幅を1とする単位 | font-size:1.5ic |
| ch | 親要素の"0"の文字幅を1とする単位 | font-size:3.6ch |
| cap | 親要素の"ap-height" の値を1とする単位 | font-size:1.2cap |
| lh | 親要素のline-heightプロパティの値を1とする単位 | font-size:1.2lh |
| rlh | ルート(body)のline-heightプロパティの値を1とする単位 | font-size:1.2lh |
| 単位 | 説明 | 例 |
|---|---|---|
| cm | センチメートル | margin:1cm |
| mm | ミリメートル | margin:2mm |
| in | インチ (1in = 2.54cm) | margin:1in |
| pt | ポイント (1pt = 1/72in) | margin:1pt |
| pc | パイカ (1pc = 12pt) | margin:1pc |
| px | ピクセル数 | font-size:14px |
| 単位 | 説明 | 例 |
|---|---|---|
| % | 親要素の幅、高さを100%として%で指定します | width:75% |
| 単位 | 説明 | 例 |
|---|---|---|
| vw | ブラウザのビューポートの幅を100として割合で指定します (1vw=ビューポートの幅の1%) | width:2vw |
| vh | ブラウザのビューポートの高さを100として割合で指定します (1vh=ビューポートの高さの1%) | width:1.5vh |
| vmin | ブラウザのビューポートの幅、高さのうち小さいほうを100%として割合で指定します (1vmin=ビューポートの幅または高さの1%) | width:3vmin |
| vmax | ブラウザのビューポートの幅、高さのうち大きいほうを100%として割合で指定します (1vmax=ビューポートの幅または高さの1%) | width:2vmin |
