スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
さまざまな資料が世に出ていますが、これまで自分が納得できたものにであった試しがありません。制作を始めてからずっとこれまで対策の検討を続けています。いろんな手法を使いましたが、現在はほぼ以下で対応中。まだまだもっと最善策がないかと常に考えています。
のうちのフォントサイズ部分。「ブラウザのメニューでユーザーがフォントサイズを変更可能」にするためには、
と絞り込まれた上にフォント要素は使うべきではなく、em 指定には後述の問題があり、結果としてフォントサイズはスタイルシートでパーセント指定することになります。こうかくと簡単ですが、ここまでくるのに何年かかったことか（泣）
em 指定では、ブラウザメニューからのサイズ変更の場合に、その拡大縮小率の値がおかしくなる場合があります。対策もあるのですが、あくまでも基準をパーセントとした場合ですので、em 指定を基準とすることは不可。
また、前述の DOCTYPE スイッチの機能で、バージョン違いでデフォルトフォントサイズが異なるというブラウザの存在、マッキントッシュの以前のシステム環境でのデフォルト表示解像度が 72dpi から、ウェブアプリケーションの基準解像度が 96dpi になった点等を考慮にいれつつ、ユーザー側で制御できる環境を、制作者側で固定することは避けるべきという事も配慮にいれると、最初の「フォントサイズを揃えたい」という箇所は、ほぼやる意味がないということになります。
そういう状況下で制作者が制御するのは、ユーザー側環境で設定したサイズを基準に、相対的な指定を施すこと「だけ」です。たとえ、ブラウザ毎の動作表示状況を把握して、個別に設定したとしても、実際のトコロ「ブラウザのメニューでサイズを変更する機能」を動作させるようにするためには、（すでにお分かりだと思いますがこれウインドウズIEです）そのブラウザにおいて制御（制作者指定サイズの押しつけ）は無理なので、なんらかの絶対値指定は無意味ということになります。
が基本。いちおう、制作者は「設定等をいぢらないシステムやブラウザのデフォルト環境でのサイズ」は確認して、感覚的に覚えておく必要はあります。また、そういう環境をいぢくることをしているユーザーは、当然自分がいぢくっていることを知っているので、その状態でヘンだと思えば、再度いぢくることはたやすいことでしょう。
追記して、パーセントによるサイズ指定で、上記のウインドウズ IE の DOCTYPE スイッチに関連する対策が可能です。標準準拠モードで記述した場合、デフォルトのフォントサイズが IE6 と IE5.x で異なります。必要な箇所、または思いきって body 要素に font-size:100%; と指定すると、解決します。※ IE5.x は「100% = small」でデフォルトが medium。IE6 は「100% = medium」でデフォルト medium。
あとですね、PC 上でインストールしてあるフォントを表示する場合に、システムによってのフォント自体の描画処理や、フォント自体の種別（ビットマップフォントとか TrueType とか）が当然影響します。PCのモニターで描画された状況は、そのサイズを解像度にあわせて変換したピクセル寸法になっていますが、フォント自体のサイズはポイント（pt）別で用意されていたり制御されていたりする点を頭にいれておきます。
昨今の PC の描画環境の進歩で、アウトラインフォント、アンチエイリアス等によって、フォントサイズがどのようなものであっても「きれい」に表示する仕組みがありますが、PC の解像度にあわせて作ったビットマップフォントがなくなっているわけではなくて、それらは指定したポイントサイズを持たなければジャギーな表示をします。ウインドウズの MS ナンチャラフォント、マッキントッシュの以前の環境での Osaka 等。これらはシステムフォントとしてデフォルトフォント指定されていることが多いわけで、そういったフォントでビットマップとして持っているサイズを使うようにします。これ、ポイントサイズで指定すれば簡単ですが、それをパーセントで指定するということを行うわけです。
あくまでも多くあるデフォルトサイズを基準にしたものなので、完全ではありませんが、自分は「100% イコール 12 ポイント」と考えて相対値を考えました。ブラウザによって最近は設定画面でピクセル値指定を行うものがあります。96dpi 環境においての 12 ポイントは、16 ピクセルになります。デフォルトで 15 ピクセル、14 ピクセル等のブラウザがありますので、完全ではない（ユーザー側が 16 ピクセルにしていたらハマる）です。ただ、ムカシはほぼ 16 ピクセル環境が大半だったのと、マッキントッシュの 72dpi 環境で 12 ポイント（= 12 ピクセル）が基準だったことを考えると、アンチエイリアス表示等が進んだ現状を第一として考えるのではなく、それらへの配慮をすることになるので、通用するんではないかと。
そこで以下の表が参考になります。小学生でもできる計算値ですが。
| +8pt（20pt） | 166.6% | 172.7% | 180% | 188.8% |
|---|---|---|---|---|
| +7pt（19pt） | 158.3% | 163.6% | 170% | 177.7% |
| +6pt（18pt） | 150% | 154.5% | 160% | 166.6% |
| +5pt（17pt） | 141.6% | 145.4% | 150% | 155.5% |
| +4pt（16pt） | 133.3% | 136.3% | 140% | 144.4% |
| +3pt（15pt） | 125% | 127.2% | 130% | 133.3% |
| +2pt（14pt） | 116.6% | 118.1% | 120% | 122.2% |
| +1pt（13pt） | 108.3% | 109% | 110% | 111.1% |
| 親ブロック | 100%:12pt | 91.6%:11pt | 83.3%:10pt | 75%:9pt |
| -1pt（11pt） | 91.6% | 90.9% | 90% | 88.8% |
| -2pt（10pt） | 83.3% | 81.8% | 80% | 77.7% |
| -3pt（9pt） | 75% | 72.7% | 70% | 66.6% |
| -4pt（8pt） | 66.6% | 63.6% | 60% | 55.5% |
スタイルシートでフォントサイズのパーセント指定をするときに、小数点以下の処理に関して仕様書他を探しているのですが、見つかってません。ブラウザが無視する可能性もあります。ほとんどのブラウザは指定したサイズがなければ近似値を使うようになっているので、問題にはなっていません。また、もともとあるであろうサイズになるようにするための指定なので、前後の数値でサイズが激変するものはない筈です。
以上のうち、現実的に使えるサイズをしぼります。それしか使わないということではなく、基準となるパターンをきめることができます。
ユーザー側設定にもよりますが、ジャギー状況を避けたいという考えからこのあたりを考慮します。すると、共通して安心して使えるサイズとなるととっても少ない。
うち、ビットマップフォントがあるのに、どうも見た目が汚くなるのが18ポイント。ウインドウズの MS P ゴシックは最近の環境であれば、19 ポイント以上はなめらか表示がデフォルトのようです。したがって、ここぞ、という見出しでは 20 ポイント以上、なるべく 24 ポイントを使いたいところ。（でかい！）小さい方は、10 ポイントが確実です。ここになくても 9 ポイントもほぼ問題なし。11、8 ポイントはムカシのマック（72dpi）で崩れるため、避けるべき数値です。
11 ポイントはウインドウズ上で微妙に気持ちよいサイズなので（私見です）、基準よりひとまわり小さいサイズ（91.6% 指定）として使いたいところ。その場合は例えばネットスケープ 4.7 等が読み込まないシート上で行えば（もっとも最近私は全く CSS をネットスケープ 4- には適用しなかったりします）よいということになります。
ネットスケープ6 がでた頃、15 ピクセルなんてデフォルトにしていて、マックでアンチエイリアスかけないとディザだらけの状況にでくわしたりした方は多いはずで、そういう方はきっと自分で対処していると思うし、ウインドウズ環境と揃えたいと思うと、最近のマックでは Safari 等、デフォルトで 14 ポイントというものが多く、なにも指定していなければ、ウインドウズ IE よりひとまわり小さい感じ。制作者に限らず、16 ピクセルに変更している方もいると思われます。これは MacIE5 のデフォルトがそうだったから。ただし、MacIE 全盛（OS9 でネットスケープ4 が不安定になった頃）時にネットスケープ4 から移行した場合、96dpi の 16 はでかくてカッチョ悪いので、72dpi の 12 とか、96dpi で 14 とかに変更している方が多いはず。まぁ、マッキントッシュ環境では、ことフォントサイズ指定に関しては、ユーザー側で好き勝手にいぢくるのが多いので、逆に相対サイズ指定でよっぽどヘンなサイズにしていなければ、ユーザーがなんとかしているのではと思う。ウインドウズはそりゃあ、詳しい人もいっぱいいますが、周りには「まったく自分で環境設定とかせずに使う」方が多いように見え（そして、制作者のせいにする）るので（すいませんかなり私見です）、デフォルト環境をもとに考えてあげる分には制作者側の意図したものになっていることも多いんじゃないでしょうか？このへんの気遣いとこちらの都合の兼ね合いは、ウェブのレイアウトやデザインでいつも悩むことになります。
ブラウザ自体のデフォルトのキーワード絶対指定のサイズ、HTML の「見出し」サイズ等の「相対指定時のサイズ率」は仕様書で例としてあげているので、これらも参考にしませう。
| CSS absolute-size values | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| scaling factor | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML headings | h6 | h5 | h4 | h3 | h2 | h1 | ||
| HTML font sizes | 1 | 2 | 3 | 4 | 5 | 6 | 7 | |
| Percent | 60% | 75% | 88.8% | 100% | 120% | 150% | 200% | 300% |
パーセントはスケーリングじゃ分かりずらいから変換したものです。前述のように「ひとまわりでかい文字は 120%」とかするとどうにも納得いかない状況になったりするので、100% の次は 166.6% なんて指定をする（133.3% [ 12 ポイント→ 16 ポイント]、150% [ 12 ポイント→ 18 ポイント]を使いたい箇所がでてきますが、汚い表示具合みると、デザイナーさんはすぐ画像にしちゃうわけですな。気持ちはよく分かる）
フォント制御に関しては、テキスト表示がウェブドキュメント制作上の基本ですから、デザイン上でも基本となるものです。しかしながら、自由自在に制御するのはかなり大変です。覚悟してあたらなければなりませぬ。ホントは「ヨケイナコトヲシナイ」ことが一番。それでもやるなら徹底的に、ということでしょうか？
ちなみに、フォント種別を多少は指定しても問題の少ない英語サイト構築の場合はこんなに悩みません。
※上記では対処しきれていない面が（まだいっぱい）あるので続きます。
2004年10月28日 18:55
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto