>グローバルメニューへ >ローカルメニューへ >本文へ >フッタメニューへ
サイト内検索
検索

グローバルメニュー

ホーム>レポート>CSS関連:

絶対指定と相対指定

ローカルメニュー

本文

スタイルシートを使う上で、サイズの指定は欠かせない。
boxやfontはもちろんのこと、marginやpaddingなど、CSSレイアウトはこれらのサイズ指定で成り立っているといっても過言ではないだろう。それほどに重要なこの要素は、反面で非常に難しい問題を抱えている。それが単位の選択だ。

Webにおいて、単位は大きく分けると絶対単位相対単位のいずれかに分類される。
絶対単位とはブラウザの設定・環境に依存せず普遍的なサイズを指定する単位相対単位とはブラウザの設定・環境に依存して可変的にサイズを指定する単位のことだ。CSSで使用可能な単位をこれに準じてグループ分けしてみると下記のようになる。

絶対単位

相対単位

単位選択まず第一のポイントは、絶対単位と相対単位、どちらを使用するかである。
これは分類結果をみればはっきりわかるが、圧倒的に相対単位であろう。
絶対単位に分類されるものはいわゆる実寸値に基づいたものが多く、サイズの概念が違うPC上で使うには正直不適切さを感じる。一方相対単位に分類されるものはどれもPC上特有の単位で、いってみればPC上で使うために用意された単位ともいえる。むしろこれらを使用するのは自明の理であろう。

相対単位、その特徴は冒頭でも述べた通り、環境に応じてサイズが可変するということである。
そう聞くと誰もがまず連想するのは文字サイズの変更ではないだろうか。例えばIEは「表示」→「文字のサイズ」でフォントのサイズを自由に変更できる。この機能が有効になる指定とそうでない指定が、一般的にはそれぞれ「相対指定」「絶対指定」と呼ばれているように思う。
本文をよく読んでいらっしゃる方はお気づきだと思うが、つまり相対単位による指定=相対指定ではない
その理由はpx(ピクセル)の存在にある。
そもそもこの単位が相対単位であるということに疑問を持つ方も少なくないだろうが、pxは紛れもなく相対単位なのだ。
理由は上記の通り、この単位は環境の解像度に依存するからである。ディスプレイ解像度を変えればサイズも変わり、またOS解像度が違うWindows環境とMacintosh環境においてpxで指定したフォントのサイズは等しくない。(難しい計算は割愛するがMac環境のほうが若干大きく見えるはず)
しかしながら1つの環境上においては絶対値となるので、Webでは絶対単位と認識されがちなのである。
現実問題、絶対指定に絶対単位を使うことは滅多にない。絶対指定とはこのpxによる指定のことを指すといってもよい。

単位選択第二のポイントは、このpx(ピクセル)を使うか使わないか、つまり絶対指定をするか相対指定をするかである。
これについてどちらがよいかというのは一概には言えない。デザイン性を追及する上でどうしても文字サイズを変えてほしくないというケースもあるだろうし、その場合のイニシアティブはやはり制作側にある。しかし個人的な意見、そして今日のWeb事情の傾向から言えば相対指定を推したい
「Rikiyが目指すWebデザイン」でも述べたが、Webにおいて良質なデザインとは環境を選ばないデザインというのがRikiyの考え方なので、文字のサイズが変わった程度で崩れるというのはそもそも論外である。それよりも自分自身は若さのせいか使いもしないし必要性も感じないが、仕事でお客さんの話を聞いたり親戚のWebサーフィンを見ているとやはりご年配の方にとって文字サイズの変更は欠かせないということを実感させられている。
情報伝達というWebの本質を考慮するなら基本的にはユーザビリティーを優先しようというのことだ。

現在Rikiyは文字には%を、margin、paddingにはpxemを使い分け、更にブラウザの機能とは別に、サイトの機能として文字サイズの変更機能(ヘッダ右上)を持たせている。
まぁがうちのようなサイトにここまでする必要が?というのはあるが、少なくともニュースサイトやポータルサイトにおいてこういった機能の有無は大きい。何より閲覧者に対する気遣いの心が見えて必要なユーザーにとっては非常に好印象を与える。商業サイトではこういう細かい部分が競合との差を生むこともあるので最善は尽くしたい。
時代のニーズとして、今後のWebは相対指定がスタンダードになってゆくだろう。だが絶対指定がいけないということもない。それにはそれでメリットもあるわけだし、絶対指定と相対指定を箇所によって使い分けるハイブリット指定も方法としては大いにありだ。
最終的にはサイトの目的・用途を見極めた上での制作者の判断、これ次第である。

(2005年06月09日)


その他のレポート

ページの先頭へ戻る


フッタメニュー
>グローバルメニューへ >ローカルメニューへ >本文へ >フッタメニューへ
Presented By Rikiya Takazawa