32.スタイルシートで使う単位

スタイルシートのborderやfontを使用するには、罫線の太さや文字サイズの大きさを指定しなければなりません。そのときに必要な知識が「単位」です。ＣＳＳリファレンスの途中ですが、先に単位のお話をしたいと思います。

スタイルシートで使える単位は、次の通りです。

相対単位

単位	読み	説明
%	パーセント	文字のサイズでは、emが基準。ブロックの横幅の設定では、ブラウザの横幅が基準。
px	ピクセル	画面表示の最小単位を基準とした大きさ。
em	エム	「M」の大きさを基準とした大きさ。
xm	エックス	「x」の大きさを基準とした大きさ。

絶対単位

単位	読み	説明
pt	ポイント	古くから使われている文字の単位。1/72in、0.35mm
pc	パイカ	古くから使われている文字の単位。12pt
in	インチ	25.4mm
mm	ミリメートル	皆様おなじみの単位
cm	センチメートル	10mm

---

相対単位と絶対単位の違い

相対単位とは、ある単位を基準に、相対的にサイズを決める単位です。絶対単位とは、その単位で指定された大きさで固定されてしまいます。

例えば、相対単位emは、文字のサイズの単位で、Mの大きさを基準とします。ブラウザの設定で文字のサイズを大きくした場合、Mのサイズも大きくなるので、emで指定されているものは、それに合わせて大きくなります。

それに比べて、絶対単位ptで指定されていると、ブラウザの設定で文字のサイズを変更しても、表示サイズは変わりません。

使い分け

ブラウザの設定で、文字のサイズを変えられることを知っている人は、意外に少ないのですが、目が老眼の人は、ブラウザの文字サイズを大きくして表示させます。そのときに、文書の文字サイズが、絶対単位で指定されていたら、文字サイズは大きくならないので、Ｗｅｂサイトのお客様は、がっかりします。

そうかと言って、あらゆる文字サイズを、相対単位で指定していれば、文字が大きくなりすぎて、Ｗｅｂページのデザインが崩れる場合もございます。

このように、通常の文書や画像のサイズは相対単位で指定し、デザイン性を有する罫線のサイズは絶対単位で指定すれば良い、という具合になっています。

---

まずは、emを使って、0.1emずつ小さくしていって、どこまで表示できるかを実験したいと思います。

● emの表示例（0.1ずつ変化させた場合）

1.5 em

1.4 em

1.3 em

1.2 em

1.1 em

1.0 em

0.9 em

0.8 em

0.7 em

0.6 em

0.5 em

0.4 em

0.3 em

0.2 em

0.1 em

どこまで、文字が崩れずに表示されるかは、画面解像度やブラウザでの文字サイズ設定によって、異なります。著者は、ＩＥ６、文字サイズ中、１７インチディスプレイで、画面の解像度は1280×1024ですが、0.5emまでは、崩れずに表示されています。

次に、先ほどは0.1ずつ変化させましたが、今度は、0.01ずつ変化させたいと思います。

● emの表示例（0.01ずつ変化させた場合）

1.00 em

0.99 em

0.98 em

0.97 em

0.96 em

0.95 em

0.94 em

0.93 em

0.92 em

0.91 em

0.90 em

どうやら、1.00em～0.97emまでが同じ大きさで表示されて、0.96em～0.91emまでが同じ大きさで表示されています。ＩＥ６に限ったことかもしれませんが、このことから、最小設定単位は「0.05」のようです。emは0.05の倍数で設定すれば表示されるということです。

---

私が単位をどのように使っているかを、述べたいと思います。この方法がもっとも良い方法とは限りませんが、参考にして頂けたらと思います。

絶対単位は使わない

私自身、絶対単位はなるべく使わないようにしております。なぜなら、絶対単位を使わなくても、デザインを崩さないようにＷｅｂページを作ることができます。また、間違って、文書の文字をサイズ変更不能にしたくないためです。

pxを基準にする

私は、相対単位pxを基準にして、Ｗｅｂページを設計しています。pxは、画面表示の最小単位を基準とした大きさです。この単位で設定すると、パソコンの画面解像度の設定によって、サイズが決まってきます。画面解像度を変更することは、まずございませんので、すなわち、擬似的に絶対単位として指定できます。

サブタイトルに使う文字の単位はpx

サブタイトルは、ロゴの上に書いたりしますが、ロゴの横幅はpxで設定するので、ロゴの大きさを基準にサブタイトル全体の大きさを決めるので、サブタイトルの文字の単位はpxで設定しています。

文書に使う文字の単位は%

いつも、文字の単位は%で設定しています。emでもかまいませんが、例えば「1.2em」と書くよりも、「120%」と書いた方が、直感的に分かり良いためです。

ナビに使う文字の単位も%

ナビとは、ナビゲーションの略で、Ｗｅｂページの左側や上側にある、Ｗｅｂサイトの目次のことです。「おふとんの人」のナビは、左側にあるので、「左ナビを採用！」のように使います。

ナビに使う文字は、pxで設定したい所ですが、これも老眼の人に見やすくしたいので、相対単位%を使っています。ブラウザの設定で、文字のサイズを大きくしても、ナビの設計では、デザイン性が損なわれないような設計をしています。

---