|
MacでWebページを作っていていつも気になることのひとつが、Windowsで見た時のイメージの違いだ。とりわけ大きく違うのが文字サイズ。特に最近、スタイルシートで文字サイズを指定するようになって、より気になるようになってきた。ユーザーによる設定もあるので完全な一致は難しいとしても、できるだけ両者の違いを少なくするいい方法はないものだろうか。
左のサンプルはMacとWinで、同じHTMLファイルを、ディスプレイの解像度が1024×768ピクセルの同じモニタで表示したもののスクリーンショット（ラインや網は後処理）だ。1行目と2行目の例から、いずれもデフォルトに12ポイントのサイズが設定されていることがわかる。しかし、大きさはずいぶん違うではないか。
その原因に、MacとWinの画面解像度の違いがあることを、宮窪伸治『WebデザインきほんBOOK』（新星出版社）で改めて認識したところだ。
■画像では表示サイズに違いがない
画面解像度は、Macが72dpiでWinは96dpiになっている。
しかしこれ、画像の表示には影響しない。左下のサンプルも、Mac（上）とWin（下）でまったく同じサイズだ。なぜか。画像はピクセル単位で認識されるからだろう。さらにサンプルの写真は、150×150ピクセルで縦横サイズを指定してある。
MacもWinもディスプレイの設定は同じ。1024×768≒78万ピクセルなので、デジカメ風に表現すれば約78万画素だ。画面の面積が同じで総画素数も変わらないから、1個の画素の大きさも同じ。だから画像が同じサイズで表示されて当然なわけだ。
■くせものは「ポイント」という単位
では、文字だとなぜ違いが起きるのか。そこに「ポイント」という単位がからむ。
1ポイントは1/72インチとされている。72dpiは1インチが72ドットということだから、これだと1ドットが1ポイントになる。「ドット」も「ピクセル」も同じく「画素」と言えるので、つまり1画素＝1ドット＝1ピクセル＝1ポイントとなる。だから、たとえば10ポイントの文字は10ピクセルで表示される。
Macの文字サンプルを見ても、ポイントとピクセルは同じサイズで表示されているのが確認できる。
96dpiではどうか。印刷だと解像度が上がれば精度が上がる。ようするに、表面サイズは同じでドットの粒が小さくなるわけ。しかしモニタの場合は、画面の面積が同じである限り1個の画素サイズは変わらない。すると96ドットが1インチということになる。1ポイントは96/72＝1.33……ドット（ピクセル）となり、解像度の数値の違いがそのまま約1.3倍という大きさの違いとなってくるわけだ。
実際、Winのサンプルでも10ポイントと13ピクセルの文字が同じサイズで表示されているのが確認できる。
Macで10ポイントで指定したものが、Winでも同じ10ポイントでありながら、表示サイズがMacの13ポイント相当になってしまうのは、こうしたからくりの所以だ。
それにしても、72dpiの方がよほど合理的と思えるのに、なぜWinで96dpiという解像度が採用されているのか、僕にはさっぱりわからない。
■単位を「ピクセル」にすると……
ならば、文字サイズを「ポイント」にしなければよいのではないか。その通りだ。
文字サイズを「ピクセル」にすると、サンプルにグリーンの網で示したように、MacでもWinでも同じサイズで表示される。画像の場合と同じ扱いになるからだろう。
なお、Winの方がテキストの長さが短いのは「ＭＳ Ｐゴシック」で詰まっているためだ。
また、ベータ版が配布されているAppleの新しいブラウザ「Safari」も96dpiを採用している模様で、左のサンプルでも、ポイント指定した文字だけがWinと同じように大きく表示されているのがわかる。しかもこれ、現状では設定の変更ができないみたいでやっかいだ。
こうなると、「ピクセル」だけがOSやブラウザの違いを超えて共通使用できる唯一の単位のように思えてくる。
ところが「ピクセル」にも落とし穴があった。「ポイント」でもそうだが、Win版IEでブラウザの表示文字サイズを変更できなくなるのだ（注1）。レイアウトが崩れるのであまり変更してほしくないのが正直なところだが、いろいろな人が見るわけだからそうも言っていられない。ではどうすればいいのか。
■MacとWinで単位を使いわける
MacとWinで同じサイズの表示になるように、単位を使い分けてはどうだろうか。
さまざまな単位を使用できるのは、スタイルシートのいいところでもある。アクセスしてくるOSによって使用するスタイルシートを使い分けるわけだ。これはJavaScriptで比較的簡単に制御できるし、スタイルシートならばOSに応じて複数のページを用意する必要もない。
Macで使う単位は「ピクセル」。これならIEでもNNでもSafariでもOKだ。Mac版だと、IEでも単位に関係なくブラウザでのサイズ変更が可能だ。
Winでは「%」を使ってはどうだろう。これはデフォルトのサイズを100%として、それとの相対的なサイズを指定するものだ。そしてこれなら、ブラウザの文字表示機能を制限せず、拡大縮小も可能だ。
パーセントによる設定の場合、細かい数値は反映せずにピクセルの整数値に相当するサイズに落ち着く模様だ。たとえばWinの10ポイントはデフォルトの12ポイントに対して約83%にあたり、サンプルでは近似値の80%でも同じサイズを表示していることが確認できる。ようするに、割合を超えていなければいいみたい。
よりわかりやすいように、Winでのパーセントとピクセル、ポイントの関係を表示してみたのが左のサンプルだ。ピクセルサイズが、Macにおけるポイントサイズに相当する。
ただし、Winユーザーが普段見慣れているサイズと大きくかけはなれて違和感を感じられてもいけない。またもともと用意されたフォントの表示サイズと異なるためか、画面上でジャギーが目立つ場合もある。実際にブラウザで検証しながら、適当なサイズを設定するのがいいだろう。
ちなみにこのページは、Macでは本文が12ピクセルとキャプション10ピクセル、Winでは本文が80%（13ピクセル）とキャプション70%（11ピクセル）にしてみた。
■OSの判別とスタイルシート振り分け
最後に、あちこちを参考にした寄せ集めだが、僕が最近使い始めたスタイルシート振り分けのJavaScriptを紹介しよう。ここではスタイルシートもJavaScriptも外部ファイルを読み込むようにしている。複数のページで共通して利用したいからだ。
まず、あらかじめMac用とWin用の2種類のスタイルシートを用意する。
Mac用のスタイルシート例（style_mac.css）
.main {font-size:12px; line-height:170%;}
.caption {font-size:10px; line-height:140%;}
Win用のスタイルシート例（style_win.css）
.main {font-size:80%; line-height:170%;}
.caption {font-size:70%; line-height:140%;}
OSを判別するJavaScriptは、たとえば次の通り（注2）。Macかどうかを判別して、Macならば「style_mac.css」を、それ以外ならば「style_win.css」を読み込む外部スタイルシート用のタグを書き出せ、というもの。
- if(navigator.userAgent.indexOf("Mac")!=-1){
- document.write("<LINK REL=STYLESHEET HREF=http://〜〜/style_mac.css TYPE=text/css>");
- } else {
- document.write("<LINK REL=STYLESHEET HREF=http://〜〜/style_win.css TYPE=text/css>");
- }
たとえばこれをJavaScriptの外部ファイル「forstyle.js」とし、HTMLファイルで本来スタイルシートの読み込みを設定するヘッダ部分に、この外部ファイルを読み込むタグを次のように書いておく。
<SCRIPT LANGUAGE="JavaScript" SRC="http://〜〜/forstyle.js" TYPE="text/javascript"></SCRIPT>
うちではこれでとりあえず動いているので、大きな問題はないと思うが……。
|
