Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
91
Help us understand the problem. What is going on with this article?
@anchoor

[CSS]長さの単位

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

91
Help us understand the problem. What is going on with this article?
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
anchoor
HTMLとCSSが好きです:)

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
91
Help us understand the problem. What is going on with this article?