アフィリエイトは儲かんないってば

Firefoxとインターネットエクスプローラーの表示の差に関しては、お前、もういい加減にしろ、と言われるほどしつこい私ですが、これを忘れていました。
font（文字）の大きさの表示の差、です。

当サイト関連記事
・IEとFirefoxの表示の差
・IEとFirefoxの表示の差・再び


微妙にfontの大きさが違う、と言うことには昔から悩まされていて、私的にはあんまり大きさに差が出ない大き目のfontを使うことで対応してきました。
それが対応と呼べるのかわかりませんが。

今回、なんかfontのサイズにおける悩みが解消できそうな記事を見つけたので、ご紹介いたします。

blog in a fog：フォントサイズ指定方法の検証

やり方としては、「アスタリスクハック」と言うものを使用するようです。

アスタリスクと言うのは、＊　←こういうヤツですね。実際は半角で使用します。

CSSに例えば、

body {

    font-size: 13px;

    *font-size: 81.25%; /*for IE6,IE7*/

}

という感じで入れ込めばいいようです。
（/*for IE6,IE7*/　と言う部分は無くてもかまわないと思います。
CSSでは、/* と　*/　に囲まれた部分は、CSSに反映されない部分になります。
この行がIE6とIE7のためにあるものですよ〜、とわかりやすくするためのものです。）

もちろん、ブログの本文、サイドバーなど個別の要素で指定してもよさそうです。


これはどういうことなのか、と言うことを少し解説させていただきますと、
インターネットエクスプローラーIEと言うものは、何と言うか大雑把なヤツなんです。

CSS課長「おい、君。この前出した命令なんだが、やっぱりこっちの命令に差し替えとといてくれないか。アスタリスク付いちゃってるけど、いいだろ？」

社員IE「またですかあぁ、課長？わかりましたよ。差し替えとけば良いんでしょ。まあ、どっちでもいいんですけどね。」

そういう会話があるのか無いのかわかりませんが、結局IEはアスタリスクが付いた後の方の命令で表示をしてくれることとなります。


ところが、きっちりした性格のFirefoxにかかるとこうは行きません。

CSS課長「おい、君。この前出した命令なんだが、やっぱりこっちの命令に差し替えとといてくれないか。アスタリスク付いちゃってるけど、いいだろ？」

社員Firefox「何をおっしゃってるんですか、課長。もうすでに前の命令できっちり表示させていただいてますよ。今さら差し替えなんて効きません。しかもアスタリスクまで付けちゃってるし、もう最低ですね・・・」

という会話があるのか無いのかわかりませんが、Firefoxはアスタリスクなど余裕で無視して最初に書いてあるCSSで表示します。


ところで、なんで指定の仕方が

IE　％（パーセント）指定。
Firefox　px（ピクセル）指定。

となっているのか。


あらゆるデザインの本には、基本的にfontのサイズを固定しない方が良い、と書かれています。文字の大きさはユーザーの方が、ブラウザの「表示」から「文字のサイズ」で変えられるようにしておくべき、と書かれているのです。

私はデザインの本の言いつけを守って、本文は相対指定のemで行っています。
これは、％（パーセント）指定でもかまいません。
ただ、サイドバーや、fontの大きさによって表示が崩れそうなところは、px指定にしています。

IEでpx（ピクセル）指定をしちゃうと、ブラウザの「表示」から「文字のサイズ」を変更しても、文字の大きさが変化しません。
ユーザーの方の利便性を考えるなら、できれば、相対指定のemやら、％（パーセント）指定を行ったほうがいいわけです。
そういうわけで、IE用の指定には％（パーセント）指定がなされています。


じゃあ、Firefoxはどうなのか。
これはpx（ピクセル）指定であろうとなんであろうと、ブラウザの「表示」から「文字のサイズ」を変更すれば、根こそぎ文字の大きさを変更します。

CSS課長「おい、君。ブラウザからピクセル指定の文字を大きくしろ、と言う指令が来たんだがやっといてくれないか」

社員IE「またですかあぁ、課長？。うは、めんどくせぇ。もうそのままにしときましょうよ〜。」

社員Firefox「わかりました。きっちり大きくしておきます。はい、任務完了です。」

そういう会話があるのか無いのかわかりませんが、こういうわけで、IEは％指定。Firefoxはpx（ピクセル）指定となっております。


文字の大きさの対応につきましては、blog in a fogさまのリンク先に渾身の大きさ比較がありますので、ぜひともご覧下さい。

自分用に普段使いそうな大きさのところだけ、引用させていただきます。

表示したいサイズ（px） 指定する値（％）
10px 77〜80%
11px 85〜88%
12px 93〜96%
13px 100〜103%
14px 108〜111%
15px 116〜119%

IE７のCSSハックにつきましては、下記もすごく参考になりそうです。
小粋空間：IE7 の CSS ハック

ちょっと私にはまだあまり理解できてない部分も多いですが（笑）。

以上です。


ちなみに、ハック、ハックとブログで書き立てると、NGワードに引っかかり、アドセンスが表示されないことが以前ありました。懐かしい思い出です。


追記記事：
・DOCTYPE スイッチと表示の差

• 
• 
•