CSS

[CSS]長さの単位

More than 2 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位まで記載