More than 5 years have passed since last update.

[CSS]長さの単位

Last updated at 2016-02-10Posted at 2016-02-10

##CSSで使う長さの単位

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

またCSS3では更に下記単位が追加されることになっています。
このうち rem は非常に扱いやすい単位です（詳しくは後述）。

##新しい単位 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を使うとりんごとみかんの文字デカ！となります（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以上で対応しています。

##参考サイト

112