[CSS]長さの単位

More than 3 years have passed since last update.


CSSで使う長さの単位

単位
説明
ピクセル換算1

em
相対単位。基準は要素のフォントサイズ
-

ex
相対単位。基準は要素のx-height (小文字xの高さ)
-

in
絶対単位。インチ。2.54センチメートル
96px

cm
絶対単位。センチメートル。10ミリメートル
約37.80px

mm
絶対単位。ミリメートル
約3.78px

pt
絶対単位。ポイント。1/72インチ相当
約1.33px

pc
絶対単位。パイカ。12ポイント相当
16px

px
絶対単位。ピクセル
1px

実際によく使う単位は em ,px の2種類でしょう。

デザイナーさんによってはptで指定がくることもありますが、ピクセルで割り切れず厳密に同じ長さにならないためpxで指定いただくようお願いしています。

またCSS3では更に下記単位が追加されることになっています。

このうち rem は非常に扱いやすい単位です(詳しくは後述)。

単位
説明
ピクセル換算1

ch
相対単位。基準は要素の「0」の幅
-

rem
相対単位。基準はルート要素のフォントサイズ
-

vw
相対単位。ビューポート幅の1/100。
-

vh
相対単位。ビューポート高さの1/100
-

vmin
相対単位。ビューポートの短い辺の1/100
-

vmax
相対単位。ビューポートの長い辺の1/100
-

q
絶対単位。級。1/4ミリメートル
約0.95px


新しい単位 rem

remはCSS3で追加される新しい単位です。

emに似ていますが、remは親要素ではなくルート要素のフォントサイズを元に計算されます。

root emでremです。


ネストのフォントサイズ指定が楽に

<ul>

<li>果物
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
</li>
<li>野菜</li>
</ul>

li{

font-size: 1.2rem;
}

よくあるリストの入れ子ですが、ここで単位にemを使うとりんごとみかんの文字デカ:scream:!となります(1.2x1.2=1.44)。

remなら面倒な計算は不要で、ルートのフォントサイズを把握しておけばOKです。


対応ブラウザ

http://caniuse.com/#feat=rem

IEは11以上ですが、主要ブラウザはカバーしているので問題ないでしょう。

IE9/10でもショートハンドプロパティを使用せず、font-size: 1.2rem;等と指定すれば大丈夫です。


ビューポート単位の使いどころ

レスポンシブサイトの高さ指定で活躍します。

(詳しくは参考サイトへ)


例)ファーストビューで画像めいっぱい見せたい!

<body>

<div class="eyecatch">
<img src="hoge.jpg" alt="hoge" />
</div>
<p>ほげほげほげほげ</p>
</body>

.eyecatch{

width: 100%;
overflow: hidden;
}
.eyecatch img{
height: 100vh;
}


対応ブラウザ

http://caniuse.com/#feat=viewport-units

vhに関してはIE9以上で対応しています。


参考サイト





  1. 四捨五入で小数第2位まで記載