CSSで使える単位
CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)で使える単位がいろいろあるようなので、 まとめておきます。
レスポンシブなデザインをする時にも単位の考え方は必要となると思います。
長さ
font-sizeプロパティ,widthプロパティ,heightプロパティ,marginプロパティ,paddingプロパティなど、 セレクタに関する様々なサイズを指定する際に「0」の場合を除き、必ず単位をともなう数値を使って指定します。 使われる単位は「絶対単位」と「相対単位」の2種類に大別され、また一部のプロパティでは長さとは別にパーセンテージ「%」を指定することもできます。
相対単位
| 単位 | 特徴 |
|---|---|
| em | 適用要素のfont-sizeを1としたその倍率となる。例えば、htmlのfont-sizeを100%(font-size:100%)とした場合、 ブラウザのデフォルトフォントサイズ16px(pt)を基準として計算されます。子要素にfont-size:0.75emと指定した場合、 16*0.75と計算され12px(pt)と換算されます。 |
| rem | root要素のfont-size（例えばhtml要素のfont-size）を1としたその倍率となる。 emの場合、親要素のfont-sizeが基準となるが、孫・ひ孫であってもroot要素のfont-sizeを基準として計算されます。 |
| ex | 適用要素のfontが持つ文字「x」(小文字)の高さを1としたその倍率となる。 |
絶対単位
| 単位 | 特徴 |
|---|---|
| px | ピクセル数。ユーザのディスプレイ解像度に依存するが実質的には絶対的な単位とみなされている。 とりあえず絶対単位に分類。 |
| mm | ミリメートル(10mm = 1cm) |
| cm | センチメートル(1cm = 10mm) |
| in | インチ(1in = 2.54cm) |
| pt | ポイント(1pt = 1/72in = 0.3528mm) |
| pc | パイカ(1pc = 12pt) |
パーセンテージ
| 記号 | 特徴 |
|---|---|
| % | パーセンテージ(%)による割合。基準値は各プロパティによって異なります。 |
| vh | ビューポートの高さを1/100。例えば、ビューポートの高さが320pxの場合、10vhは32pxとなる。 |
| vw | ビューポートの幅を1/100。 |
| vmin | ビューポートの高さまたは幅の、最小値を1/100。 |
| vmax | ビューポートの高さまたは幅の、最大値を1/100。 |