【CSS】絶対単位と相対単位について

今回はWebサイトを制作する際に使用する「絶対単位」と「相対単位」を説明します。

初めての方にもわかるように詳しく説明しますので、理解を深めましょう。

Webサイト上で使用される単位

Webサイトは文字の大きさや間隔、図形の長さや大きさ、余白を調整してデザインされています。

そのデザインを実装する際に使用されるのがプロパティと単位です。

プロパティ: 実数 + 単位;

例えば、フォントサイズを指定するとき、

font-size: 18px;

と、このようになります。

プロパティの値を指定する際、「実数+単位」を使用します。

また、その単位は「絶対単位」「相対単位」に分けられており、それぞれ特徴があります。

特にレスポンシブ対応のWebサイトを作成する際は、単位の名前と特徴を理解しておくと便利なので、場面に合わせて指定できるようにしておきましょう。

絶対単位

絶対単位とは、単位そのものにあらかじめ大きさが決まっている単位のことを表します。

例えば、普段の生活にも使用している「cm」や「mm」。

ご存知の通り、1cmはmmに変換すると10mmですよね。

このように「cm」や「mm」はあらかじめ大きさが決まっているので、たとえWebで指定したとしても、表示されるデバイスが横幅の小さい携帯電話であろうと、横幅の大きいパソコンであろうとその大きさは変わりません。

これが絶対単位の特徴です。

下記は絶対単位の一部です。Webでは主に「px」を使用します。

mm

1 ミリメートル

cm

1 センチメートル (10 ミリメートル)

px

ディスプレイの 1 デバイスピクセル(表示しているデバイスによって異なる)

相対単位

相対単位とは、基準に対して相対的に算出される単位のことを表します。

例えばフォントサイズを指定する場合、「rem」はルート要素であるhtml要素の font-size を参照します。

ブラウザによりますがデフォルトだと16pxの場合が多く、

font-size: 1rem;

このように記述することができます。

18pxの場合は1.125rem、20pxの場合は1.25remという具合で、html要素の値(今回は16px)に対しての倍率を指定します。

その他の単位も同様に基準に対して計算して出される値で、Webで使用する場合はブラウザの高さや幅によって値が変わるという特徴があります。

下記の単位はWebでよく使用される相対単位です。

em

適用要素の font-size を「1」とした倍率
font-size プロパティに em を使用する場合は 親要素の font-size に対する倍率)

rem

ルート要素 (html要素)の font-size を「1」とした倍率

(ルート要素の font-size で使う場合は font-size の初期値)

vh

ビューポート(ブラウザ)の高さの 1/100を「1」とした倍率

vw

ビューポート(ブラウザ)の幅の 1/100を「1」とした倍率

vmin

ビューポート(ブラウザ)の高さ、または幅の小さい方の 1/100を「1」とした倍率

vmax

ビューポート(ブラウザ)の高さ、または幅の大きい方の 1/100を「1」とした倍率 

%

パーセンテージによる割合 (基準値はプロパティによって異なる)

どの単位を使うのがいいのか

値が決まっている「絶対単位」と、基準値によって値が可変する「相対値」はどのように使い分けするのが良いのでしょうか。

考えるポイントは2つあります。

アクセシビリティ

アクセシビリティとは、近づきやすさ、利用しやすさ、などの意味を持つ英単語で、IT分野では、機器やソフトウェア、システム、情報、サービスなどが身体の状態や能力の違いによらず様々な人から同じように利用できる状態やその度合いのことを指します。

例えば、高齢者や弱視ユーザーはWebサイトを閲覧する際に文字が大きい方が見えやすいですよね。

ブラウザによっては文字を大きくする設定ができるものもあり、その際、Webサイトの font-size が相対単位で記述されていると可変して大きくすることができます。

しかし、相対単位で記述しなくても文字を大きくする方法もあります。

それはズームの機能です。

もともとWebサイトはズームをする機能があるので、それを利用すれば大きな文字で読むこともできます。

以上のことを踏まえて、会社や制作するグループ単位で考えをまとめ、ルールを合わせてコーディングしていくと良いと思います。

可変させる必要があるか

Webサイトのデザインデータは余白や線の長さ、太さ等あらかじめ指定されており、コーディングをする時はその単位にも「絶対単位」「相対単位」を使用します。

どちらを使用すればいいか考える時に、私は一度「可変させるメリット」を考えます。

その後、その必要がないと思った場合は「絶対単位」を使用しています。

例えば、段落と段落の余白です。

デザインにもよりますが、普通の段落間の余白を相対単位で指定すると、文字を大きくした際に一緒に大きくなってしまって他の文字が画面に入りにくくなってしまうので、絶対単位を使用しています。

全てを「絶対単位」「相対単位」とするのではなく、対象のプロパティや要素に合わせて柔軟に考えて使用するととても便利です。

まとめ

今回はWebサイトを制作する際に使用する「絶対単位」と「相対単位」を説明しました。

実際に「絶対単位」と「相対単位」をうまく使い分けるのは意外と難しいです。

制作するサイトひとつずつ条件は異なりますし、ベストなコーディングができるように再度見直したり、考えたりしながら、「絶対単位」と「相対単位」をうまく利用して素敵なサイトを構築していきましょう。