Help us understand the problem. What is going on with this article?

[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位まで記載 

anchoor
HTMLとCSSが好きです:)
http://codepen.io/anchoor/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした