ピクセル設定の問題
前回、
モニターの解像度はOSによって違う→フォントの大きさが違ってしまう→スタイルシートでピクセル設定すればほぼ同じにできる
という話をしました。でも、それでオールオッケーなのかというとそうでもない。
ふるーいブラウザはスタイルシート自体×一応IEもNNも4.0以上が対応ってことになってます。もっとも対応ってったって見え方が違ったりして、これも対してあてになんない。
印刷が不可能なことがある印刷物は解像度を上げると粒の大きさを小さくしてきめこまかに見せると言いましたね。ということは、ピクセルという「粒」の数で大きさを指定すると、解像度をあげていくとどんどん粒が小さくなる、すなわち文字も小さくなってしまうわけですよ！よく使われる10ピクセルなんて、ボールペンで突っついた程度にしか見えない可能性もある。
ユーザーがフォントサイズを変更できない。ピクセルでフォントサイズを設定すると、何がなんでもその大きさでしか見せないようになります。つまり表示文字をでっかくして見たい人が何をやってもダメ。いわゆる「ユーザビリティ」がよろしくないってことですな。
じゃどうするか-1
見た目をがっちりキープしたいのなら、今のご時世、ガチガチのFlashのみで作ったページだって別に非現実的じゃないと思いますよ。でもいわゆる「ユーザビリティの向上」をねらうなら、
"em"っていう単位を使うのもひとつの手です。
emについて
1emとは、ブラウザが表示する通常の文字サイズのこと。表示する文字サイズを「普通」とか「100%」とした場合は12ポイントですね。だから、たとえばfont-size:2emとすると24ポイント、3emだと36ポイントで表示されることになる。こうしておけば、ユーザーがブラウザでの文字表示を「大」などとした;場合にも、それを基準に2em、3emの大きさが決められていくから、文書内での目立ち方なんかは同じになるわけです。
でも、ちょっと注意が必要で、<h1>などにもともと「このぐらい大きくする」と決まっているものに2emを適用すると、「その大きさ」の２倍、ということになって、すごく大きくなってしまう可能性があります。はじめから「通常の文字とくらべてこのぐらいの大きさ」というようにサイズが決められているタグには使用しないほうがいいでしょう。
じゃどうするか-2
emは必ず<font>タグで使ったほうがいいでしょうね。具体的にはスタイルシートでemでの設定のクラスを作り、<font size="3" class="sample">というように読み込むわけです。このときわざわざ、
size="3"を入れるのは、これを入れておけばemに対応していないブラウザでも、スタイルシートがだめなブラウザでも、制作者の意図したサイズ（ここでは普通の大きさですが）を表示されるからです。
問題
ただemといえど完璧じゃなくてね。emに対応していないブラウザだと、大変なことになってしまう場合もあるんです。たとえば、IE 3 for Winは、なんとemを「ポイント」として反応します。2emだと
2ポイント！もう念力で読むしかない。Mac版のIE 3 はまだもうちょっとましで、設定をただ無視します。
じゃどうするか-3
まずひとつは
未対応ブラウザを無視する。巷では必ず、「すべてのユーザーにきちんと見えるようにしなくてはいけません！」といわれてますし、ほとんどの本や教育の場でもそう指導しています。だからこれはイレギュラーな考え方です。でも本当にこれが悪いことと言っていいのか、ちょっと疑問もある。この点についてはまたの機会に解説しましょう。
じゃどうするか-4
JavaScript使います。
「未対応ブラウザ無視なんて、Webデザイナーとしての誇りがゆるさないわっ！」という方、もしくは「めんどくさいけどクライアントがうるさいんだよねー」という方、そして「どうです、僕ってすごいでしょう」という方は、こうしたらどーお？。といっても、ここでご紹介するのは単純にスタイルシートを振り分ける方法です。
やり方はけっこう簡単。まずIE3用、Mac3用、それ以外用のスタイルシートファイルを作ること。もちろんその中にフォントサイズの指定を書いておくんですよ。IE 3用とMac3用にはemを使わないようにしてね。そうしたら次に<head>内にこうやって書く。
<script language="JavaScript">
<!--
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) < 4 )) {
document.write("<link rel=stylesheet href=\"ie3.css\" type=\"text/css\">"); }
else if ((navigator.appVersion.indexOf("Mac") != -1)) {
document.write("<link rel=stylesheet href=\"mac3.css\" type=\"text/css\">"); }
else {
document.write("<link rel=stylesheet href=\"win.css\" type=\"text/css\">"); }
// -->
</SCRIPT>
これを日本語でいいますと
もしブラウザの名前を調べて「Microsoft Internet Explorer」だった場合、なおかつバージョンが4以下だったら、以下のようにしてください。
もしそうだったら、ie3.cssっていうスタイルシートファイルを読み込みます。
で、なおかつ、もしバージョン情報のとこに"Mac"っていう文字があったら
mac3.cssってスタイルシートファイルを読み込んでください。
でもって、ぜんぜんそんなんじゃないってときは、win.cssを読み込んでね
てな感じになります。どこがどの行に当たるかぐらいは自分で考えるように。
とりあえずは、こんな対処方法はいかがでしょう？ま、個人的にはブラウザの会社へは「さっさとおんなじ仕様にしろよ」って言いたいし、古い環境にしがみついてる人には「文句言うぐらいならさっさとバージョンアップしろ」って言いたいですけどね。車だと２年ごとに何百万も出して買い替える人だっているくせに、マシンとかアプリケーションになるとなんであんなにケチるんでしょうかね。ま、好きずきですね。
ともあれ、お金頂くからには頑張って作りましょうね。
