大きさの単位について

ＨＴＭＬにしてもＣＳＳにしても避けては通れないのがサイズの設定ですよね。
画像にしてもサイト全体の大きさにしても、なにかしら単位を付けてサイズを設定してあげなければなりません。
ここでは、そんな「大きさの単位」について説明をしていきます。

「絶対的な単位」と「相対的な単位」

大きさの単位は、大きく分けて「絶対的な単位」と「相対的な単位」の二つに分けることが出来ます。
まずはその種類を見てみましょう。

「絶対的な単位」

「絶対的な単位」とは、ホームページを見る人の環境(パソコンの解像度・設定)などに左右されない固有のサイズのことをいいます。
固有サイズなので、がっちりとしたサイズ固定ができますが、実のところあまり使用されていません。

【表示例】

「相対的な単位」

「相対的な単位」は絶対的な単位と全く逆で、ホームページを見てくれる人の環境に応じて大きさを変えるサイズのことです。

【表示例】

といった感じで、親要素の大きさに対しての割合で大きさが変わっていきます。

上の例で言うと、親要素16pxの場合は、『16px×80 %=12.8px』なのに対し、親要素10pxの場合は『10px×80%=8px』といった感じになっています。

相対的ってどういうこと？

「相対的な単位」というのは、ある物を基準として、それに対しての割合によって決まる単位のことです。

例えば「%」の場合だと、親要素で設定されている大きさを100%として、それを基準に大きさを変えます。同じ「90%」でも、親要素の大きさが「100px」なら「100×0.9=90px」となり、親要素が「50px」なら「50×0.9=45px」となります。
同じように「em」や「ex」等も上の表で書いてあるように、ある物を基準として（"1"として）割合で大きさを決めるようになっています。

ただし、「px」だけは少し特殊で、パソコンのディスプレイの解像度によって大きさが変わる「解像度依存型」になるので、基本的には絶対的な単位と同じような扱いになるんじゃないかな、と個人的には考えています。

結局、どの単位を使うのが一番良いのか

ここまでで色々な単位の種類についてお話ししましたが、ころころと大きさの単位を変えるとなんだか統一感の無いホームページになってしまう恐れもあるし、何より後で自分で管理するのに大変なことになります。
では、どの単位を使うのが一番いいのか、ということですがこれは「ケースバイケース」です。以下に用途別にオススメの単位を紹介します。

画像の大きさの場合

画像の場合は「px」にするといいでしょう。
というのも、画像ファイルというのはもともと「ピクセル単位」で扱われています。だから、わざわざこの決まりを変える必要はないと思います。

文字の大きさの場合

では次に文字の大きさはどうでしょうか？文字というのは、そのサイトが一番伝えたい情報なんじゃないでしょうか？
サイトを見に来てくれる人というのは不特定多数の人達です。なかには小さな文字が読みにくいのでブラウザーの設定を変更して、通常よりも文字が大きく見えるように設定している人もいます。
そんな時に文字の大きさを絶対的な単位で設定していると、文字の大きさが変わらず、不便な思いをさせてしまうかもしれません。
ですので、文字の大きさは必ず「相対的な単位」で設定するように心がけてください。相対的な単位ならどれにしてもいいと思いますが、一般的には「em」「%」がよく使用されています。
ただし、「px」の場合はブラウザの設定では文字の大きさが変わらないので、注意してください。

レイアウト枠の大きさの場合

ホームページを作る時、一般的にページを色々なブロックに分けて作ります。例えば、ページの一番上にはヘッド部分、サイドにメニューを並べたいならサイドメニュー部とメイン部などにブロック分けすると思います。あと、「テーブル」なんかもそうですね。表を作って文字や画像なんかを入れてレイアウトする人もいると思います。
で、そうやってブロック分けしたものを「div」や「table」タグで括ってレイアウトすると思います。レイアウト枠の場合はその人の環境によって大きさが変わってしまうと不便ですよね。
そうやって書いてしまうと、「じゃあ、絶対的な単位を使えばいいんだ！！」となると思いますが、基本的に絶対的な単位というのはあまり使いません。そこで登場するのが「ピクセル(px)」です。
「px」は何度も言うようですが「ほぼ絶対的な単位」として扱われています。これを使う事で、ユーザーの使用環境に左右されることなく、崩れないレイアウトを作ることが出来ます。