ロゴ

たまによく分からなくなる「単位」を復習

Webデザイン、レスポンシブデザインの設計の上で非常に重要となる「単位」ですが、たくさんあってよくわからなくなりますよね。今回は、そんな単位の復習をしていきたいと思います。

共通HTML

    
<div class="content"></div>

px(ピクセル)

CSS

    
.content {
      background: royalblue;
      width: 200px;
      height: 200px;
    }

ブラウザでの見え方

pxをつかうと、絶対値を設定することができます。

ただ、相対値に比べてレスポンシブデザインには不向きだと言われやすい単位です。

%(パーセント)

CSS

    
.content {
      background: royalblue;
      width: 70%;
      height: 200px;
    }
/* 高さのパーセント設定も親要素を指定すれば可能 */

ブラウザでの見え方

%は、相対値を設定する単位です。親要素に対する割合で値を設定しますが、親要素に値を設定していない場合は、ブラウザの幅に対する割合が適用されます。

em(rem)

CSS

    
.content {
      background: royalblue;
      width: 7em;
      height: 6rem;
    }

ブラウザでの見え方

emは、1文字分(→デフォルトで16px)の大きさを示しています。remは「root em」で、親要素を基準にサイズが決定します。

vw, vh

CSS

    
.content {
      background: royalblue;
      width: 100vw;
      height: 100vh;
    }

ブラウザでの見え方

vw, vhはビューポート単位と言われるもので、デバイスの幅、高さをそれぞれ100vw, 100vhとした単位です。デバイスの幅を利用できるので、多く使用されています。

ビューポート単位には他に、svw・svh, lvw・lvh, dvw・dvhがあります。

おまけ

cm, mm(メートル法)

CSS

    
.content {
      background: royalblue;
      width: 5cm;
      height: 15mm;
    }

ブラウザでの見え方

もちろん普段使うメートルのような単位も使えますが、まあスタイルシートで使うことは稀ですね。

in(インチ)

CSS

    
.content {
      background: royalblue;
      width: 2in;
      height: 2in;
    }

ブラウザでの見え方

インチも使うことはできますが、大きすぎるのでこれも使うことは少ないです。ちなみに1inは96pxです。