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も忘れずに。

| コメント (0) | トラックバック (0) | 2008-03-25 05:27 AM [ 管理人編集 ]

このページのタグ(目印)一覧

Browser , CSS , Font

関連するエントリー

SEOセミナーのe倶楽部3で講座を開設 塾生募集中

Yahoo!で検索されなくなった、トップページが1000番の圏外に追放された。
Googleで順位変動に悩まされている、ある日突然に数十番も下落した。

SEO塾は、検索エンジン・トラブルのリカバリーに実績があります。
今すぐ『Web教則本とメールのSEOセミナー』をお申し込みください。


Yahoo! JAPANの検索結果で上位表示させるために有効な、最も簡単な方法。

トラックバック

このエントリーのトラックバックURL:

"IE6・IE7 Firefox Safariで同じレイアウト - できれば同じフォントサイズ"の紹介記事が書かれていない場合は、スパムとみなされトラックバックできません。

このエントリーへのトラックバックはまだありません。

コメント

このエントリーへのコメントはまだありません。

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

投稿