REDLINE MAGAZINE | フォントサイズ問題のために100.01%を指定REDLINE MAGAZINEトップページへ

すべてのエントリを見る

フォントサイズ問題のために100.01%を指定

70 Expert Ideas For Better CSS Coding | Smashing Magazineをいつかちゃんと読み直そうと印刷までしておいたのだが忘れてた。今日夕方やっと読み直したので今日はその文書からの話。

上記ページにはタイトルの通り、CSSコーディングのより良いアイデアが掲載されている。ほとんどがわりと有名な話だったりするのだが、これは知らなかったわというものがあったので書いてみる。(とかいいつつ有名な話だったら嫌だな)

bodyに100.01%を指定する

上記ページの「1.5. Workflow: Setting Up Typography」の中の「Set 100.01% for the html-element.」の部分。結論から言うと、ブラウザのフォントサイズに関する問題を回避するためにbodyに100.01%を書いておけばOKというものらしい。

具体的な検証例などがSmashing Magazineにも参考サイト(CSS: Getting Into Good Coding Habits)にもなくて解説のみだったんだけど、要するにbodyにemではなく%で100.01%という値を指定しておけば、他の要素に後からemでフォントサイズ指定した時IE/Winで文字サイズが大きくなったり小さくなったりするバグを回避したり、いくつかのバージョンのOperaで他ブラウザに比べてデフォルトのフォントサイズ100%が小さくなる問題が解消できたりするらしい。

また、Safariではフォントサイズに101%を指定すると何か問題があるらしいので、やっぱりベストな提案としては100.01%ですよ、とのこと。

日本語で解説してくれてるサイトないの?

と思ってググって見たらEmotional Webさんbodyにfont-size100.01%を指定するという記事を発見。同記事によるとAdobe Developer Centerにも同様の内容が書かれているけど、詳しい検証とか載ってるサイトはない模様。また内容的には2004年とか2005年辺りのものらしく、それでいてあまり耳にしないということは・・・あまり・・・効果的ではない話なのかな。

まぁいいや。とりあえず頭の片隅にネタとして置いておくことにします。どうでもいいけど、なんか最近フォントの話ばっかりだな・・・。

追記:TRANSさんにも参考になるエントリを教えて頂きました。
>>TRANS - 英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ

<< StylishでユーザーCSSを楽しむ | 油断大敵 focusさん >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/154

コメント (2)

こんにちは、上記の件気になり、コメントさせていただきます。

一度、自分もこの件についてエントリーを書きました。

http://d.hatena.ne.jp/aratako0/20070331/p1

どうやら、英語圏の情報によると、ある特定バージョンのOpera向けの対策だったようですが、Operaユーザは乗換えが早く、既にそのバージョンも使われることが少ないので、英語圏でも使われなくなってきているようです。

僕も当バージョンのOperaを持っておらず未検証なので、確定はできないのですが。

参考になれば。

>小嶋さん

コメントありがとうございます。
エントリ拝見させていただきました。自分もOperaの該当バージョンを持ってないので検証は未なんですが、Operaユーザーは乗換えが早いからというお話を聞くと「あー確かにそうだよなー」といった印象でした。参考になる情報、ありがとうございました。記事内にも教えていただいたエントリへのリンクを追記させていただきたいと思います。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。