26日目：相対的なフォントサイズを使う

ほんの少しの例外を除いて、Webサイトは主に言葉中心のもの。ニュース、意見や考え、アイデア、物語、オリジナル小説、Ｅコマ−ス、全部言葉でしょ。ビジュアルデザインとか画像は確かに大切だけど、もし言葉を読むことができなかったら意味なくない？

2000年の秋、Jeffrey Zeldman が相対的フォントサイズは不可能だ (「ピクセルか無さ、ベイビー」)って言ったのは有名だよね。ネットスケープ4をはじめ、ほとんどの今時のブラウザには色んなバグがあり過ぎてって理由だった。それ以来、ネスケ4 はちっとも良くなっちゃいないし、まだまだ使われてるけど、少なくとも僕たち、ブラウザをなだめつつ相対フォントサイズを使うやりかたを見つけてきたよね。（ちなみにこの「僕たち」には Zeldman 氏も含まれる。最近リニューアルされたWebスタンダード・プロジェクトは下に説明するテクニックを使ってるから。--訳者注：日本語版は概要：活動方針と学ぶ：FAQの2ページのみ）

対応してるブラウザで相対的フォントサイズを使って、ネスケ 4 では相対的フォントサイズにうまく対応してないから絶対サイズを使う。これは複数のスタイルシートを使わなくてもできることだ。Movable Type のテンプレート用に、コピペできるものを用意したよ。このテクニックそのものについても詳しく説明するから、他のテンプレートに組み込むのもそう難しくはないはず。

誰がトクする？

  1. リリアンの役に立つよ。リリアンは単に年のせいで、Webページが見えにくいんだ。インターネットを使っている人の 80％ と同じように、IE のWindows 用を使ってるんだけど、あのブラウザは Web をデザインした人がわざわざ相対フォントサイズを指定するってことをしない限り、テキストのサイズを変えることができないようになってる。リリアンは自分のブラウザのテキストサイズの初期設定を変えた（「表示」 メニュー、「テキストサイズ」）けど、絶対的サイズを使ってるサイトにはこの戦法も効果ナシなんだ。これには実際、今この時点で存在するブログ用テンプレートのすべてが当てはまる。例えば Movable Type のテンプレートがリリアンにはこう映る。

    リリアンの目から見た Movable Type のデフォルトテンプレートのスクリーンショット。テキストが思いっきりぼんやりしてて、読むことができない。

    もしテンプレートが相対フォントサイズを使ってたら、サイズを変える必要のない（それか変えても変えなくてもどっちでもいい）大部分の読者には、ページはまるっきり同じに見える。でもリリアンにはこう映るんだ。

    同じテンプレートだけど、相対フォントサイズを使っている場合のスクリーンショット。テキストはやっぱりぼやけてるけど、サイズが大きいから読める。

    くり返すけど、もし言葉が読めなかったら、意味ないじゃんね？

どうしたらいい？：Movable Type

Movable Type についてくるテンプレートでは、スタイルシートテンプレート (styles-site.css) でこれを最後に足す：

/*/*/a{}
body,
body a,
body .calendar,
body .calendarhead,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-post,
body .posted {
  font-size: xx-small;
  voice-family: "¥"}¥"";
  voice-family: inherit;
  font-size: x-small;
}
html>body,
html>body a,
html>body .calendar,
html>body .calendarhead,
html>body .title,
html>body .sidetitle,
html>body .syndicate,
html>body .powered,
html>body .comments-post,
html>body .posted {
  font-size: x-small;
}

body .date {
  font-size: x-small;
  voice-family: "¥"}¥"";
  voice-family: inherit;
  font-size: small;
}
html>body .date {
  font-size: small;
}

body #banner {
  font-size: 200%;
}

body .description {
  font-size: 60%;
}

body .blogbody {
  font-size: 110%;
}

body .blogbody,
body .calendar,
body .calendarhead,
body .side,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-body {
  line-height: 128%;
}
/* */

最初と最後にあるコメント部分が抜けないように気をつけてね。

どうしたらいい？： 詳細

基本的には、キーワードでフォントサイズを指定する。あんまり使われてないけど（古めのブラウザのバグのせいでね）、面白いプロパティが3つあるんだ：

  1. 積み重ならない。「メイン」セクションが 90% だとして、その中に「投稿」セクションが 90% になってるとする。ブラウザのなかには、この場合の投稿部分を 81% (90% x 90%) で表示するものもあれば、90% で表示するものもある。一段階以上の入れ子を使ってる（テーブルでレイアウトを組んでるテンプレートではよくあることだね）と、パーセントが積み重なることで、テキストは見るまに豆粒サイズのちっちゃさになっちゃう。だけど、「メイン」セクションが small で、その中の「投稿」セクションが small で指定してあれば、どんなブラウザでも投稿部分は small で表示されるんだ。
  2. Windows の Internet Explorer でもちゃんとリサイズできる。small が絶対サイズみたいな響きをもってることを考えると（特に上で見たように、 small にはさまれた small でも small のままだって事実をふまえるとね）なんか変な感じもするけど、これはうまくいくよ。なんなんだろねぇ？ともかくIE/Win は、フォントサイズをキーワードで指定したときにはリサイズさせてくれるんだ。ホントだって。
  3. 小さくなりすぎることがない。リリアンが IE で使ってる「テキストサイズ」の設定は、文字を大きくするだけじゃなくて、小さくしたいときにも使える。目がいい人なら、1サイズ、いや2サイズくらい標準より小さいサイズのほうがいいって人、結構いるみたい。パーセントでのテキストサイズ指定だと、もともと設定で最小にしてあるときに豆粒現象がおきやすいし、字がぼやけたりする。でもフォントキーワードで指定しとけば、9px より小さくはならないから、どんなフォントでも（視力が良ければ）読めなくはならない。

じゃフォントサイズキーワードを使って、基本サイズを指定してみよう。もっとしっかりサイズをコントロールしたいなら、パーセントを使う。でもかけ算式に積み重なっちゃう問題を避けるために、テキストを含んだリーフのクラス（だから「メイン」じゃなくて「投稿」の部分）に対してだけ使う。あとユーザが小さめのテキストサイズを使ってる状況も考慮して、あんまり小さくは指定しないでおく。

フォントサイズキーワードの基本的ルール：

p {
  font-size: 12px;
}

/*/*/a{}
body p {
  font-size: x-small;
  voice-family: "¥"}¥"";
  voice-family: inherit;
  font-size: small;
}
html>body p {
  font-size: small;
}
/* */

ここでは色んなことをやってる。全部すごく大事だから、注意して読んでね。

  1. まず、全部の <p> に対して絶対指定 (12px) をしてる。ネスケ 4 も含めたすべてのブラウザでこれは有効。
  2. そしたら次にヘンテコな "/*/*/" ってコメントを入れる。これはネスケ 4 のバグに対してのもので、このコメントとその次のコメントのあいだに入ってるものは全部無視されることを利用してるんだ。そう、ここから後のスタイルは、ネスケ 4 以外のブラウザにしか適用されない。
  3. この変なコメントの直後に、 "a {}" って空のルールを入れとく。Mac 版の Opera 5 はバグがあって、このルール（このルールだけね）を無視するんだ。他は全部適用する。
  4. これでネスケ 4 以外のブラウザすべてに対してスタイルを指定するための下地ができた。今度はフォントを（ネスケ 4 の対応できない）相対サイズで指定。最初に "body p" セレクタを使って、p タグのスタイルを指定しなおす。CSS のルールに従って、これで p セレクタの元々のスタイルは書き換えられることになる。（技術的なこと言うと、"body p" は "p" よりも 具体的なセレクタ だってこと。）
  5. <p> タグ全部のフォントサイズを x-small で指定する。これは初期設定だと Windows の Internet Explorer 5 では 12px で表示される相対サイズ。でもユーザが（「表示」メニュー内の） 「テキストサイズ」を変えてたら、それにあわせて12px よりも大きくなったり小さくなったりする。これがいいんだ。（注：これで IE5/Win に対して2度フォントサイズを指定したことになるけど、それでいい。より具体的なセレクタがいつも適用されることになってるんで、前に使ったセレクタは無視されるだけだから。）
  6. 残念なことに、IE5/Win にはフォントサイズキーワードが1個ズレるバグがある。他のブラウザは全部（IE5/Mac、Netscape 6、Mozilla、IE6/Win）x-small を 12px じゃなくて 10px で表示する。 けど助かることに IE5/Win には僕らに利用できる独自のバグがある。あの変な voice-family のところを見て、IE5/Win は "body p" セレクタはそこでおしまいだと勘違いして、"}" まで全部を無視するんだ。
  7. ここまでくれば IE5/Win（このへんみんな何にも知らずにのほほんとしてるネスケ 4 もだけど）以外の全ブラウザにまで、対象の範囲を狭められたことになる。そうしたらサイズを small に指定。IE5/Win じゃないブラウザはみんな、ちゃんとまだ読んでくれてるはずだから、（初期設定を変えてなければ）12px で表示する。さっきも書いたけど、ユーザが「テキストサイズ」を変えてる場合はそれにあわせて大きくなったり小さくなったりするのがスバらしいとこです。
  8. けどちょっと待った！Opera 5 には IE5/Win と同じバグがあるから、voice-family のハックのところでつまづく。だけどフォントサイズのキーワードのほうは正しく理解してくれるんだ。だからこの時点では Opera 5 で見るとテキストが小さすぎてる。だけどツイてることに Opera 5 では3つめの タイプのセレクタ、"html>body p" ってのが使えるから（これも同じように、"body p" と比べて「より具体的」だから、そっちよりこっちが効くことになる。）IE5/Win はこのタイプのセレクタは対応してないから、無視するんで OK。（さっきもうフォントサイズキーワードが1個ズレるバグには対処したから、それをグチャグチャにしたくないもんね。）IE6/Win も対応してないけど、それも大丈夫。"body p" セレクタの "voice-family: inherit" ハックの後で "font-size: small" を指定してカバーしてるからさ。その他のブラウザは全部 "html>body" セレクタに対応してるから、そこらへんのブラウザに対してはフォントサイズを 4回も指定してる計算になる。でもこれは問題じゃないよね。より具体的なセレクタが勝つから、それ以外はみんな無視されるだけだもん。
  9. それで最後に、/* */ っていう空のコメントを入れる。これはネスケ 4 に「ここからまた話聞いてね」って言うためのもの。この空のコメント後に指定されたルールは（ネスケ 4 を含む）全ブラウザに適用される。

まとめると：

  1. ネスケ 4 は、ユーザの設定に関わらず <p> テキストを 12px で表示する。
  2. Windows の IE 5 は <p> テキストを x-small で表示するから、初期設定のままだと 12px で表示するけど、ユーザが「表示」メニューから「テキストサイズ」を変えてる場合は、それにあわせて大きくなったり小さくなったりする。
  3. Windows の IE 6 は、"body p" セレクタの "font-size: small" を見て <p> テキストを small で表示する。これは初期設定では 12px にあたる。これもユーザが「テキストサイズ」を変えてれば、それにあわせて大きくなったり小さくなったりする。
  4. Mac の IE 5、Opera、Netscape 6、Mozilla と、今後出てくるブラウザは全部（だといいんだけど）<p> テキストを small で表示する。これは "html>body p" セレクタの "font-size: small" ルールからくる。これも初期設定では 12px にあたるけど、ユーザが「テキストズーム」機能を使えば大きくしたり小さくしたりできる。

さらなる情報源（英語）

 
<< 25日目：本当のホリゾンタルルールを使う（またはうまくズルをする） | 目次 | 27日目：本当のヘッダーを使う >>