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

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

絶対的な単位

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

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

ビューポートとは：ブラウザが 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」と指定することで、ディバイスの画面サイズに合わせて、ビューポートの幅をフレキシブルに変化させる、ということになります。

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