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

CSS 長さの単位(CSS Length Units)

 長さの設定が必要なプロパティにはwidth, length, margin, paddingなどがあり単位を必要とすることがあります。

 0の場合のみ単位を省略できます。

 長さの単位には大きく、絶対長(Absolute Lengths)と相対長(Relative Lengths)の2種類があります。

絶対長(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%。
%親エレメントが基準。

Example

 ブラウザの標準的な文字の大きさは16pxが多いです。googleでは、最小フォントサイズは10pxとされています。

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

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