分かりにくいアルゴ、突然襲い来る順位変動、とりあえずカテゴリー登録、集客力日本一のヤフーだから
順位変動、ペナルティ、商用サイトをもてあそぶ検索シェア世界ナンバーワンのグーグルは神か悪魔か
Windowsも検索エンジンも音楽配信もゲーム機も、帝国は生き延びることができるか？ マイクロソフト

2008-03-25

IE6・IE7 Firefox Safariで同じレイアウト - できれば同じフォントサイズ

年の所為か、ブラウザの小さいフォントを見続けると目が疲れる。目薬も欠かせない。

思い切ってこのSEOブログのフォントを大きくしてみた。新聞などの「活字が大きくなりました」である(笑

IE6/7とFirefoxなどのブラウザとCSS

塾長はプロフェッショナルなWeb制作業者ではないので、CSSハックでIE6/7とFirefox、Opera、さらにはMac版Safariなど現行の全ブラウザを対象にしているわけではない。
申し訳ないが、まずOpera対応は放棄している。

また、表示確認も必ずやるのは、一にFirefox、二にIE6である。
余力のある時に、IE7とMac版Safariをチェックするくらいだ。

鬱陶しいのは、シェアが大きいIE対応で、IE6とIE7で見え方が微妙に違うことが情けない。

CSSハック

IE6/7のCSS振り分けは下記のようにやるらしい。

IE6 にのみ適用
* html body セレクタ { }
IE7 にのみ適用
*+html body セレクタ { }
IE6と7 両方に適用
*+html body セレクタ, * html body セレクタ { }

だが塾長はものぐさなので、まずFirefox用にメインCSS、次にIE6用とIE7用それぞれのCSSを読ませるようにしている。

<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE 6 ]><link href="css/ie6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7 ]><link href="css/ie7.css" rel="stylesheet" type="text/css"><![endif]-->

非常にださいやり方である(泣

ともあれ、この方法で一応はIE6・IE7・Firefoxで同じレイアウトを達成している。

もっと洗練したやり方は、下記を参照。

ブラウザとフォントサイズ

今回、フォントサイズをより大きく表示させるにあたって、CSSの大工事を行ってみた。
大工事というのは、一箇所いじるとあちらこちらで不具合が出て、ほとんどのサイズを変更する羽目になったからである。
しかも、WindowsのIE6/7、Firefox、MacのSafariとFirefoxで確認しながら…

実は今でも、WinのIE6とFirefoxでは微妙にフォントの大きさが違っている。

何とかならないかとググってみたところ、YUIというものを見つけた。

Yahoo! UI Library: Fonts CSS

原版？は、Yahoo! UI Library: Fonts CSSにある。略称「YUI」という。

上記ページで、YUIを日本語で実践的に解説している。

また、同様の複数ブラウザ同一フォントサイズを実現する方法もあるらしい。
フォントサイズに関するCSSハック - Go my way

ともあれ、非常に大ごとになりそうなので、今回はYUIもしくは類似の方法は諦めたところである。

Windows版Safariから「Lucida Grande」を借用

ところで、塾長のIE6では、SEOブログのフォントは下図のようにやや美しく表示されている。

Lucida Grande

アルファベットと数字がかなり綺麗では？

これは、CSSでまず「Lucida Grande」を読み込むようにしているからだ。

body{
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Arial, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka",sans-serif;
}

で、PCに「Lucida Grande」がない場合は、「Lucida Sans」を。

なお、先日3.1正式版が公開されたSafariだが、これをインストールすると「C:\Program Files\Safari\Safari.resources」フォルダに、次のフォントが入っているのでフォントフォルダにインストールするといい。

  • Lucida Grande.ttf
  • Lucida Grande Bold.ttf

SEOブログは、「Lucida Grande」が標準フォントになっているので、よろしく！
あ、XPのIE6なら、ClearTypeも忘れずに。

| 2008-03-25 05:27 AM |

関連するエントリー