備忘録的プログラミングリファレンス

CSS 長さの単位(CSS Length Units)

 CSS における長さの単位について解説します。
 長さの単位には大きく分けて、絶対長(Absolute Lengths)相対長(Relative Lengths) の2種類があります。

 長さを指定する width, height, margin, padding, border といったプロパティには、単位を必要とすることがあります。
 さらに、プロパティにおける長さの指定には inch、cm といった絶対長(Absolute Lengths) による指定か、もしくは基準となる文字の大きさやウィンドウの大きさによる 相対長(Relative Lengths) による指定があります。
 0の場合のみ単位を省略できます。

ページ内 Index

絶対長(Absolute Lengths)

 絶対長は設定した長さで表示されます。

 画面出力では px などの単位を使いますが、使用するデバイスによって大きさが変わることに注意が必要です。

 印刷レイアウトなどの長さが一定の場合は同じように出力されます。印刷レイアウトでは cm、mm, in を使った方がよいかもしれません。

Unit説明
cmセンチメートル
mmミリメートル
ininches、インチ。
pxpixels。ピクセル、画像出力の単位に使われる。
ptpoints
pcpicas

相対長(Relative Lengths)

 相対長は基準の長さとの相対の長さになります。

Unit説明
emフォント分の長さ。エレメントの文字サイズが基準。
exフォントのx-heightが基準。(あまり使われません。)
chフォント0の幅が基準。
remrootエレメントの文字サイズが基準。
vwViewport(ブラウザウィンドウのサイズ)の幅の1%、単位はピクセルが基準
vhViewport(ブラウザウィンドウのサイズ)の高さの1%、単位はピクセルが基準
vminViewportの小さい方の長さの1%。
vmaxViewportの大きい方の長さの1%。
%親エレメントが基準。

角度

 角度は以下のような単位で表す必要があります。

Unit説明
deg度数法(deg)で表した角度。360° は 360deg で表す。90° は 90deg
gradグラードで表した角度。360° は 400grad で表す。90° は 100grad
rad弧度法 (ラジアン、π) で表した角度。360° は 6.2832rad で表す。90° は 1.0708rad
turn回転数で表した角度。360° は 1turn で表す。90° は 0.25turn

 +、- で向きを表すことができ、+ 方向は時計周り、- は半時計回りになります。

Example

 ブラウザの標準的な文字の大きさは16pxが多いですが絶対とは言えません。文字の大きさは12px以上、行間は1.4〜1.6が多いようです。
 googleでは、最小フォントサイズは10pxとされています。見やすさは、行間と文字サイズによりますので調整してみる必要があるでしょう。

 画面表示ではpxが標準的な長さの単位でしたが、今はデバイスの画面の大きさに応じて文字の大きさを随時変える、レスポンシブに変化するスタイル設定が求められています。

 画面の大きさにレスポンシブに対応した長さの単位は、rem、vw、vmax があります。しかしながら、エレメントの横幅を固定した場合には、相対的な長さを使うとレイアウトが崩れる傾向にあることに注意が必要です。