単位を学ぶ
CSSには様々な単位があります。使い方によってコーディングが楽になりますので、単位の種類を覚えましょう。
絶対単位
外部に影響を受けない、そのもので完了する値で指定したいときに使う単位です。
| 単位 | 説明 |
|---|---|
| px | ピクセル。デジタル画像の最小単位で指定 |
| in | インチ。 1in = 96px |
| pt | ポイント。1/72インチ相当でピクセルの約1.33倍の大きさ |
| pc | 印刷に使用される単位であるパイカ。1pc = 12pt |
| mm | ミリメートル。ピクセルの約3.78倍 |
| ㎝ | センチメートル。mm の10倍 |
| Q | キュー。mm の1/4の大きさ |
では実際にサイズの違いを見てましょう。
font-size:10px;
font-size:1in;
font-size:10pt;
font-size:1pc;
font-size:10mm;
font-size:1cm;
font-size:10Q;10px
1in
10pt
1pc
10mm
1cm
10Q
表示サイズの都合上すべてを同じ数値にすることができませんが、それぞれのサイズの違いを認識できたかと思います。
相対単位
他の長さや設定によって値が変化する単位です。レスポンシブデザイン等で活躍します。
文字サイズに関する相対単位
文字プロパティfontに関する相対単位を紹介します。
| 単位 | 説明 |
|---|---|
| em | 要素のフォントサイズを基準とした単位 |
| rem | ルート要素（）のフォントサイズを基準とした単位 |
| ch | 要素に0があった場合、その0の幅を基準とした単位です。 |
| ex | 要素に小文字xがあった場合、そのxの高さを基準とした単位です。 |
| cap | その要素の大文字の高さを基準とした単位です。 |
| lh | その要素のline-heightプロパティの計算値を基準にした単位です。 |
| rlh | ルート要素のline-heightプロパティの計算値を基準にした単位です。 |
参考までに当サイトで上記の単位を使用した例を下記に表示します。
5em
5rem
5ch
5ex
5cap
5lh
5rlh
viewportに関する相対単位
viewport（ビューポート）によって値が変化する単位をご紹介します。
| 単位 | 説明 |
|---|---|
| vw | ブラウザ幅の1/100を基準とした単位。 |
| vh | ブラウザ高さの1/100を基準とした単位。 |
| vmin | vwとvhの小さいほうを基準とした単位 |
| vmax | vwとvhの大きいほうを基準とした単位 |
まずは使ってみよう
今回の記事ではcssで使用できる単位について紹介しました。文字で説明されてもなかなかピンときにくい概念ですので、まずは使用してみてその使い勝手を試してみるといいでしょう。
- CSS
- 単位を学ぶ