CSS 長さの単位（CSS Length Units）
CSS における長さの単位について解説します。
長さの単位には大きく分けて、絶対長（Absolute Lengths） と 相対長（Relative Lengths） の２種類があります。
長さを指定する width, height, margin, padding, border といったプロパティには、単位を必要とすることがあります。
さらに、プロパティにおける長さの指定には inch、cm といった絶対長（Absolute Lengths） による指定か、もしくは基準となる文字の大きさやウィンドウの大きさによる 相対長（Relative Lengths） による指定があります。
0の場合のみ単位を省略できます。
- ad -
絶対長（Absolute Lengths）
絶対長は設定した長さで表示されます。
画面出力では px などの単位を使いますが、使用するデバイスによって大きさが変わることに注意が必要です。
印刷レイアウトなどの長さが一定の場合は同じように出力されます。印刷レイアウトでは cm、mm, in を使った方がよいかもしれません。
| Unit | 説明 |
|---|---|
| cm | センチメートル |
| mm | ミリメートル |
| in | inches、インチ。 |
| px | pixels。ピクセル、画像出力の単位に使われる。 |
| pt | points |
| pc | picas |
相対長（Relative Lengths）
相対長は基準の長さとの相対の長さになります。
| Unit | 説明 |
|---|---|
| em | フォント分の長さ。エレメントの文字サイズが基準。 |
| ex | フォントのx-heightが基準。(あまり使われません。) |
| ch | フォント0の幅が基準。 |
| rem | rootエレメントの文字サイズが基準。 |
| vw | Viewport（ブラウザウィンドウのサイズ）の幅の1%、単位はピクセルが基準 |
| vh | Viewport（ブラウザウィンドウのサイズ）の高さの1%、単位はピクセルが基準 |
| vmin | Viewportの小さい方の長さの1%。 |
| vmax | Viewportの大きい方の長さの1%。 |
| % | 親エレメントが基準。 |
- ad -
Example
ブラウザの標準的な文字の大きさは16pxが多いですが絶対とは言えません。文字の大きさは12px以上、行間は1.4〜1.6が多いようです。
googleでは、最小フォントサイズは10pxとされています。見やすさは、行間と文字サイズによりますので調整してみる必要があるでしょう。
画面表示ではpxが標準的な長さの単位でしたが、今はデバイスの画面の大きさに応じて文字の大きさを随時変える、レスポンシブに変化するスタイル設定が求められています。
画面の大きさにレスポンシブに対応した長さの単位は、rem、vw、vmax があります。しかしながら、エレメントの横幅を固定した場合には、相対的な長さを使うとレイアウトが崩れる傾向にあることに注意が必要です。
- ad -