スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
「フォントサイズ指定手法」 で自分も含めてまだ納得いかない方がいる筈なので（笑）続きとしてまとめてみたい。まだまだ完璧じゃないのでまだまだ続くかも。
「フォントサイズ指定手法」 では、結局のトコロ、上記のうち「ブラウザのメニューでユーザーがフォントサイズを変更可能にする」ためにどうするかについてしか言及していなかった気がします。自分はそれである意味他の件も充分クリアできるような気がしていました。しかしながら、アッチで使っていたフォントサイズのパーセント数値では意図していた状況にならない場合があることが分かったのと、日本語環境においてフォントサイズに関わるスタイルシート記述は、フォントサイス指定以外も含めるべき点があることに気づいていました。今回はそのへんまでちょっと書いてみます。
スタイルシートでのフォントサイズ指定は、パーセント単位で指定することはさんざんかきました。そしてその手法は「ブラウザ毎のフォントサイズの違いとユーザーの設定に影響を与えない」面で有益です。ただし、可能であればせめて「各ブラウザのデフォルト環境では、見た目のサイズを揃えたい」と思うデザイナーは多いでしょう。その面で以下の「使える数値」はちょっと修正が必要です。
| 親ブロック | 100%（12pt）とする！（ついでに ＭＳ Ｐゴシック） |
|---|---|
| -1pt（11pt） | 91.6% |
| -2pt（10pt） | 83.3% |
| -3pt（9pt） | 75% |
| -4pt（8pt） | 66.6% |
| -5pt（7pt） | 58.3% |
| -6pt（6pt） | 50% |
今回は需要の多い（笑）「小さいフォントサイズ」で指定できる（すべき）数値を修正します。大きいサイズは機会があればということで。
上記の数値指定は他はどうあれ、自分は結構使っていました。使いながらウインドウズIE環境で思ったようなサイズの違いが反映されないことがあって、スタイルシート表記の継承関係がうまくいかないのかもしれないと思っていたのですが、そーではなくて（理解していた筈なのに間違っていた）「単純計算で出した数値では意図したサイズ（ポイントサイズ）のフォントがない場合の処理がブラウザによって異なる」点の処理は考えればできるのにやっていませんでした。
以下の表がそれ。
| 相対パーセント（IE） | 100 - 97 | 96 - 91 | 90 - 85 | 84 - 79 | 78 - 72 | 71 - 66 | 65 - 60 | 59 - 54 | 53 - 50（※） |
|---|---|---|---|---|---|---|---|---|---|
| 相当ポイントサイズ | 12pt | 11pt | 11pt | 10pt | 10pt | 10pt | 8pt | 8pt | ? |
| 相対パーセント（FF） | 100 - 98 | 97 - 91 | 90 - 85 | 84 - 79 | 78 - 73 | 72 - 66 | 65 - 60 | 59 - 54 | 53 - 50（※） |
| 相当ポイントサイズ | 12pt | 11pt | 11pt | 10pt | 10pt | 8pt | 8pt | ?pt | ?pt |
| 相対パーセント（Opera7） | 100 - 100 | 99 - 94 | 93 - 88 | 87 - 82 | 81 - 75 | 74 - 69 | 68 - 63 | 62 - 57 | 56 - 50（※） |
| 相当ポイントサイズ | 12pt | 11pt | 11pt | 10pt | 10pt | 8pt | 8pt | ?pt | ?pt |
フォントサイズをパーセント指定したときに、ブラウザ毎に「使われるフォントのポイントサイズ」です。先に書いておくと「ウインドウズXP IE6 スタイルシートで font-family 指定なし（ＭＳ Ｐゴシック - Opera も Firefox も ＭＳ Ｐゴシック と設定）文字コード UTF-8」という状況なので、これ以外だと変化すると思われます。どこまでやるかは調べるアナタ次第。
最初の表の指定数値をはめると、こーなってしまいます。
| 相対パーセント | 100% | 91.6% | 83.3% | 75% | 66.6% | なし | 58.3% | 50% |
|---|---|---|---|---|---|---|---|---|
| 相当ポイントサイズ（IE） | 12pt | 11pt | 10pt | 10pt | 10pt | 8pt | 8pt | ? |
| 相当ポイントサイズ（FF） | 12pt | 11pt | 10pt | 10pt | 8pt | 8pt | ?pt | ?pt |
| 相当ポイントサイズ（Opera7） | 12pt | 11pt | 10pt | 10pt | 8pt | 8pt | ?pt | ?pt |
分かりますか？つまり、パーセントで指定した場合、例えば 66.6%と指定すると、IE では 10pt 用のフォント（ＭＳ Ｐゴシックだとそのビットマップフォントがある）が使われて、他のふたつは 8pt 用フォントで表示されてしまうのです。このふたつすごい差がありますし、IE の場合だと「ひとつ上の指定（75%）とサイズが変わらない」という状況になります。75% 指定よりひとまわり小さくしたくて 66.6% にしたのに。
| 相対パーセント | 100 | 96 - 94 | 90 - 88 | 84 - 82 | 78 - 75 | 71 - 69 | 65 - 63 | 59 - 57 | 53 - 50 |
|---|---|---|---|---|---|---|---|---|---|
| 相当ポイントサイズ | 12pt | 11pt | 11pt | 10pt | 10pt | 10pt/8pt（!） | 8pt | 8pt | 6pt？ |
「ブラウザ毎の処理を吸収したパーセント数値」、つまり共通のフォントを使う数値指定をすればよいんじゃないか、ということになったので、以上の表の中で好きなサイズ（笑）を選ぶ分には、ユーザーの設定状況が同じ（96ppi/12pt で ＭＳ Ｐゴシックがデフォルト）であれば、ほとんどそろいます。揃ってくれ！
ところで 同じポイント相当の指定が複数ある点にお気づきだと思います。この違いはよくあるユーザー設定の 96ppi/12pt で ＭＳ Ｐゴシック 環境で「同じサイズのフォントが使われるんだけど、行間や文字間をブラウザが微妙に調整してなんとなく異なるフォントサイズのように見える」違いです。逆にいえば、78% という指定と 75% という指定は、せっかく数値変えたのにまったく同じ見栄えになるということです。
いやあとはあんまりにも細かくてまだ調べていないのですが、もし「キッチリブラウザ判別して行間も揃える」必要があるなら、ブラウザによって 78% から 75% の中で微妙に調整すると「完璧に揃う」かもしれません。暇なかたぜひ調べてください。また、なんでここでそれをやらないかというと、他に影響される部分が多いからです。ここでは「96ppi/12pt で ＭＳ Ｐゴシックがデフォルト」という環境がおそらく大多数だろう、ということでやっているだけなので、そうじゃなければどう異なるかまでやってられません。
ちなみに自分は通常作業環境は Mac なんですが、Safari で 16pt（これ16ピクセルだと思うんだけど、ダイアログだと pt になってます）環境だと IE と同様のパーセント推移変化をしますのでほぼ互換を保てる筈です。ただし、Safari はたしかデフォルトは 14pt になっていたので、そーなるとまずは 100% の状態でウインドウズと比べて小さい表示になっている筈です。MacOSX 環境では、ヒラギノフォントが使えたり、Osaka だったり、また アウトラインフォントの表示状況はウインドウズに比べて（私見とはいいません。Macユーザーはこーでなきゃイヤ状態の筈）格段に優れていて、小さなフォントでももともと見やすいし、小さいと思ったらメニューで変更すればいいだけなので問題とは思っていません。はい。
といっても「おいおい、Mac と Win の違い吸収しろよ」という方もいることでしょう。そのために ブラウザ判別してピクセル指定をしている方が多い筈だし、そーゆーことをやろうと検索して、このページ見てる方もいる筈だから。以下はそんな方へ贈ります。
スタイルシートのフォントサイズの指定の基本はパーセントです。ただ、これの根本的理由のひとつに「WindowsIE が、パーセント以外だとメニューからフォントサイズを変更できない」ということでした。てことは、いままでの指定手法は Windows IE を意識したものであって、他のブラウザだったらそーでなくてもいい点があるということです。
そこで、もしなんらかのブラウザ判別をしてブラウザ別のスタイルシートをリンクさせることもやぶさかではない（笑）のであれば、ウインドウズ IE は body { font-size:100%; } として、他は body { font-size: 12pt; } または body { font-size: 16px; } にしてしまえばいいんじゃないでしょうか？重要なのは、デフォルト以外がパーセント指定であれば、相対数値によるフォントサイズは基本的に揃うので、オヤブンで揃えればあとは全部ついてくるということです。
ブラウザ判別に関しては別にかいてます。んが、最近は JavaScript だとか、SSI だとか、PHP だとかでやるより、スタイルシート上でブラウザバグ（とか仕様）でなんとかするのが流行（？）だったりするのと、簡単なので書いておきます。※ちなみに W3C Vaildator だと怒られます。きっと。
/* Except IE */
body {
font-size: 12pt;
}
/* for Windows IE */
@media screen {
* html body {
font-size: 100%;
}
}そういえば怒られない方法がありました。WindowsIE 未対応で無視される指定でピクセルとかポイントとか使えばいいんだから。
/* default */
body {
font-size: 100%;
}
/* Except IE */
html>body {
font-size: 12pt;
}自分で使うことしかかんがえていなくて、大変情けないものですが、以下のページでフォントサイズ指定での格闘が見れます。
2年を経て、なんだかまた状況が変わってきてますよ。やっと続きを書きました。なんでまた、てくらい、またパラメータが変わってます。
更新 2007-02-14 08:57 初回投稿 2005年05月20日 20:14
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto