【CSS】よく使う単位 & ビューポート単位

最近よく見かけるビューポート単位。ビューポートという概念自体もなんとなくしか分かっていないので、前から CSS でよく使われている単位と一緒にまとめてみます。

絶対的な単位

単位 説明 ピクセル換算
in 1インチ = 2.54センチメートル 96px
cm 1センチメートル = 10ミリメートル 約37.80px
mm ミリメートル 約3.78px
pt 1ポイント = 1/72インチ 約1.33px
pc 1パイカ = 12ポイント 16px
px ピクセル 1px

文字に使われる相対的な単位

単位 説明
em 親要素のフォントサイズが基準
rem ルート要素(普通はHTML)のフォントサイズが基準
% その要素のサイズが基準
ex その要素の小文字「x」の高さが基準
ch その要素の数字「0」の幅が基準

ビューポートを基準にした相対的な単位

ビューポートとは:ブラウザが Web ページをレンダリングする際に想定する仮想的な「表示領域」

っていうことなんですが、分かりづらいですよね。色々調べたんですが、こんな感じかと思います。
(以下の「px」は「画面解像度」ではありません。CSS で利用する「CSS ピクセル」です。)

  1. ビューポートの幅 500px と設定したとする。仮想で500pxのウィンドウでレタリングしますよーということ。
  2. 実際の画面幅が、500pxより大きければ、拡大されて表示される。
  3. 実際の画面幅が、500pxよりちいさければ、縮小されて表示される。

色々試して見たのですが、色々な条件が絡み合って、必ずしもそうとは言えないのですが、ざっくりとした考え方としてはそんな感じです。

ビューポートは HTML の head の meta 要素で指定します。ビューポート幅 500px の場合はこうなります。

<meta name="viewport" content="width=500">

仕組みとしてはこうなんですが、レスポンシブ Web デザインを考える場合、ディバイスの画面サイズに合わせて、ビューポートを合わせる、というのが理想になります。

<meta name="viewport" content="width=device-width,initial-scale=1">

width=divice-width」と指定することで、ディバイスの画面サイズに合わせて、ビューポートの幅をフレキシブルに変化させる、ということになります。

ビューポートがフレキシブルに変化するとなると、それぞれの要素の大きさも、相対的に変化します。そこで、ビューポートの幅や高さを基準とした、相対的な単位を利用する方がいいのではないか、という考えに基づいて利用されるのが、「ビューポートを基準にした相対的な単位」とういうことになります。

単位 説明
vw ビューポートの幅に対する1/100の単位
vh ビューポートの高さに対する1/100の単位
vmin ビューポートの幅と高さのうち、小さい方の値に対する1/100の単位
vmax ビューポートの幅と高さのうち、大きい方の値に対する1/100の単位
カテゴリーCSS