length

CSSプロパティの値として、lengthが使える時があります。

本ページでは、lengthで使える数値と単位を説明します。

lengthとは

lengthは、長さを示します。数値と単位を合わせて指定します。

数値は整数、小数点などが扱えます。また、マイナスが使えるプロパティもあります。

単位は、相対的な単位と絶対的な単位があります。

相対的な単位
対象となる値と比較して何倍といったような設定になります。
絶対的な単位
現在どのような値であっても関係なく、結果が同じになる設定です。

単位

以下は、使える単位の例です。

【lengthで使える単位(例)】
区分 単位 説明
相対的 em 対象となる要素のフォントサイズを1とします。
相対的 rem ルート要素(html要素)のフォントサイズを1とします。
相対的 ex 対象となる要素の小文字x(x-height)サイズを1とします。
絶対的 in 1インチ(2.54cm)を1とします。
絶対的 cm 1cm(センチメートル)を1とします。
絶対的 mm 1mm(ミリメートル)を1とします。
絶対的 pt 1ポイント(1/72インチ)を1とします。
絶対的 pc 1パイカ(1/6インチ)を1とします。
絶対的 px 1ピクセルを1とします。

利用例

emの利用例は、以下のとおりです。

【emの利用例】
font-size: 0.9em;

上記により、現在のフォントサイズから0.9倍を指定したことになります。例えば、現在のフォントサイズが16pxだった場合は、14.4px(= 16 × 0.9)になります。

font-sizeでemを使用すると、継承によって親要素の影響を受けます。例えば、親要素で0.9emが指定されていると、0.81倍(= 0.9 × 0.9)になります。

pxの利用例は、以下のとおりです。

【pxの利用例】
font-size: 16px;

上記により、現在のフォントサイズが何であっても16pxになります。これは、親要素からの継承の影響を受けません。

CSSプロパティ一覧」に戻る