WEB制作の現場で使われている、さまざまなCSSの単位

通勤途中の田舎道沿いに広がる稲刈りの終わった田んぼと朝晩の肌寒さに、秋の深まりと冬の足音を感じている今日この頃、弊社ブログをご覧の皆さまはいかがお過ごしでしょうか？

こんにちは、きびだんごの制作担当・濱崎です。

これまでの記事では専門用語の解説を取り扱ってきのですが、今回は趣向を変えてWEB制作の現場で使われているCSSの単位のお話。
私たちが日常生活を送る中でも、長さや重さ、距離などを指し示すためにさまざまな単位が使われています。
例えば、mm（ミリメートル）、kg（キログラム）など、私たちはいろんな場面でいろんな単位を使いこなしていますよね。

実は、WEB制作の現場でもたくさんの単位があり、それらを使いこなせることが求められます。
一見すると、その数の多さから使い方が複雑に見えるかもしれません。
しかしそれは、全世界の誰もが国や地域を問うことなく、共通して使えるように標準化されたCSSの担う役割が、PCやスマホなど画面サイズの異なる端末への対応から紙媒体への出力（印刷）対応までに及んだ賜物だからこそ、とも言えるのです。

そんなWEB制作の現場で使われているCSSの単位には、一体どのようなものがあるのでしょうか？
早速、見ていきましょう。

絶対単位

これら単位群は、皆さんにもお馴染みの単位であるセンチメートル・ミリメートルをはじめ、アメリカやイギリスなどで一般的な単位であるインチなど、いわゆる「ものさし」を使って測ることができることから、これら単位群を総じて「絶対単位」と呼びます。

ところで、この「px」という単位…資料によっては「絶対単位」とするもの、後述する「相対単位」とするものがあります。
「絶対単位」は、どのような環境にあっても指定された単位で数値を反映するという特性を持つのですが、「px」という単位も、そういう点においては「絶対」的に反映してくれます。
ただし、画面（ディスプレイ）の解像度（ピクセル密度）に対して、悪い意味で「相対」的になってしまうのが実に悩ましいところです。

このブログをご愛読いただいている読者の方の中に、こんな経験をしたことはありませんか？
A4サイズで作って印刷したチラシを、100%等倍として画面上に表示されている同じくA4のチラシと重ね合わせてみたら、実寸サイズと異なっていた、なんてことが…。

それは、画面内の「ものさし」が本来の「ものさし」と同じ数値を示していても、解像度の違いによって、画面内の「ものさし」≠本来の「ものさし」となるのです。
つまり、その画面で見えている大きさは、画面そのものの解像度に大きく依存していることになります。

そうなると、iPhoneの最新モデルだけでも3種類あって、Androidスマホまで含めると、その細分化された画面サイズとその解像度のバリエーションが幾多にもおよぶ中で、すべてにおいて同じ大きさに揃えて表示することは、今となっては不可能と言えるでしょう。

相対単位

一方、これら単位群は、先述の「絶対単位」と呼ばれる単位群とは異なります。
当該要素を内包する、大きさ（文字サイズ）が指定された要素＝親要素を基準として、その大きさに連動する形で、相対的に当該要素の大きさを変えられることから、これら単位群を総じて「相対単位」と呼びます。
もし、直近の親要素に大きさの指定がない場合、次の親要素へと遡っていき、最終的にはルート要素の大きさを基準に大きさを割り出すことになります。
なので、「絶対単位」にあった「ものさし」に当たるものは、「相対単位」にはありません。
なぜなら、「ものさし」の代わりとなる基準点は、そのほとんどが親要素を元に算出するからです。
よって、普遍的な「ものさし」を画面の外に持たない「相対単位」を使うことで、ユーザー（閲覧者）のユーザビリティなどを損なうことなく、環境や媒体にあわせた、柔軟性のある可変的なレイアウトが実現できるのです。

また、この「相対単位」のユニークなポイントとして、使用する単位によって、その基準点が変わるという特長があります。
以下が、その単位群になります。

これら単位群も同じ「相対単位」ですが、前述の単位群とは異なり、親要素ではなく、「ビューポート」が基準点になっています。
「ビューポート」とは、簡単に言えば「表示領域」のことを指します。WEBブラウザのウィンドウでコンテンツが表示される領域がそれに当たります。

余談ですが、この「ビューポート」が設定できるおかげで、「レスポンシブ対応」が実現できています。

皆さんもご存知のあの「%」です。
しかし、日常生活においても身近な単位「%」ですが、他のどの単位よりも扱いが簡単そうに見えて、WEB制作の現場においては案外曲者だったりします。

最後に

いかがでしたか？今回は『WEB制作の現場で使われている、さまざまなCSSの単位』についてお話をさせていただきました。

「px」以外の「絶対単位」を使うことはさほど多くありませんが、「レスポンシブ対応」が当たり前となった今、「ch・ex」以外の「相対単位」の出番がない日はありません。今回もこの記事をご覧になることで、WEB制作について少しでもご理解を深めていただける一助になれたら幸いです。

弊社では、「WEBデザイン/ホームページ制作」を承っておりますので、WEBサイト・LPの新規制作・リニューアルのご相談はお気軽にきびだんごまでお寄せください。