コーダーが悩むポイントの一つ
Webを制作している上で、毎回ぶちあたる問題の一つに
font-size指定がある。
僕の場合、デザイナーにもらったデザインをもとに、
それ通りにコーディングしていくのが仕事だけど、
OSとブラウザの違いによってfont-sizeの大きさがバラバラになる。
だからなんとか統一しようと思うけど、うまくいかない。
解説しているサイト(参考のために)
いろんなサイトを参考にしてみた。
・TRANS - 英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ
・RedLine Magazine : font-size:82% って何?
この他にもいろいろあったけど、
結局のところ、ブラウザによって、そろえる最前の方法がない。
一応あるにはあっても、必ずどこかでほころびが見つかる。
サイズをそろえたとしても、font-familyによる違いとかね。
font-familyの違いはかなり顕著に現れて、
同じ文字サイズだとしても、
MS ゴシックとMacのヒラギノとかの文字間隔が違うから、
どうしても横幅がかわってくる。
これはもうどこかで妥協するしかないか。。。
僕が採用している方法
そんな中でも僕が採用しているCSSは以下のようになっている。
body { font-size : 62.5%; }
html>body { font-size : 10px; }
なぜこのような指定なのかと言うのは、
こちらを参照してもらいたい。
・RedLine Magazine : bodyにfont-size:62.5%を指定すると・・・
簡単に言えば、感覚的にピクセル指定ができるようになるからだ。
CSSハックを使う理由
html>body { font-size : 10px; }
CSSハックを用いて、IE以外のブラウザのデフォルトを
10pxに統一している方法の一つで、
このような方法を採用した。
なぜこのようなハックを使用したのかというと、
ブラウザのFirefoxは、
Windowsだとデフォルトのフォントが16pxに対して、
Macだとデフォルトのフォントが14pxになっているからだ。
なので、%でサイズを指定してしまうだけだと、
どうしてもMacのFirefoxだけサイズが小さくなってしまう。
この一つの違いはかなり厄介だ。。。
なぜすべて10pxと指定しないか
なぜ最初から10pxでフォントを指定しないのかというと、
IEでは、pxでフォントサイズを指定すると、
文字の拡大に対応しなくなってしまうからだ。
大きさを固定して動かなくするのであれば、
pxで指定していてもいいのだが、
ユーザビリティの観点から考えて、
文字の拡大縮小に対応していないのは、良くないと言える。
FirefoxやOpera、Safariなどのブラウザは
pxでサイズ指定をしていても、問題なく拡大できるが、
IEだけはできない。
なぜなんだーーーーー!!!
だから正直言うと、なるべくハックは使いたくないのだが、
ここは仕方なく使っている。
ハックだらけのサイト構築よりは、多少の妥協でおわるので、
それはそれでしかたないと思うしかないのである。
それでも問題はある
途中でも書いたのだけど、これだけでは問題解決はしなくて、
使われているfontが違うために、文字間隔によってずれが生じる。
IEとその他のブラウザで、横幅の位置がずれてきてしまうのだ。
これもいろいろ実験してはみたものの、
うまい解決策がうかばずに、
結局これだけはあきらめて妥協している。
サイズさえ同じならばそれでいっか。
デザインと違ってくるのは、
何となくコーダーとして嫌なのだが、しかたが無いようだ。
JavaScriptとかで解決しないかな・・・
いまだ模索中である。。。
]]>