bodyにfont-size:62.5%を指定すると･･･
20 pro tips - .net magazineというページを拝見して。
「7. Set fonts using ems」の部分を拝見して初めて知ったネタなんだが、bodyに対してfont-size: 62.5%を予め指定しておくと、フォントサイズをemで指定する際、12ピクセル相当なら1.2em、16ピクセルにしたいなら1.6emという風にemを使ったフォントサイズ指定が分かりやすくなる、ということらしい。
実は今までemを使った単位指定はあまり使った経験がない。その理由としてはなんか馴染めない･･･って部分だったのだが、これなら自分でも分かりやすいし使いやすくなる。まさに上記ページでおっしゃるとおり『Both the designer and user are happy.』デザイナーとユーザの両方がハッピーです。
ネタ自体はそういうTipsの紹介というよりは「フォントサイズは可変可能なようにしておけよ」という主旨なのだが、これは使えるぞーとそっさくスニペット登録させていただきました。
さくっと手元で試して見たい方は下記ソースでササっと試してみてください。
<style type="text/css">
<!--
body {font-size: 62.5%;}
p.txtem{font-size:1.4em;}
p.txtpx{font-size:14px;}
-->
</style>
<p class="txtem">テストテストテスト</p>
<p class="txtpx">テストテストテスト</p>
上記サイトはその他にもいろいろためになりそうなネタがたくさんあったので、お時間のある方は是非読んでみてください。
<< 見出しを縦書きにして回りこませたい | CSSだけでリモートロールオーバー >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/105
コメント (2)
こんにちは。
時折62.5%のCSSを見かけてずっと気になっていました。
この62.5%指定には基本的な欠点があるように思ってます。
この文字サイズは<p>以外の文字が小さすぎて使い物になりません、だからと言って<li><dt><dd><th><td>などのタグにもemで指定するとこれらのタグは入れ子に出来なくなって不便です。
親要素の文字サイズを継承して大きくなりすぎるからです。
この方法で作っていたデザイナーさんのテンプレートをCMSで実際動かしているのですが、文字サイズがおかしくなっているので見てくださいという依頼が何度も来て悩んでいます。（62.5%以外のサイトでは問題は起こりません）
デザインを100%で組みなおしが良いのですが費用も無いのでfont-size:160%を親要素に入れて対処しておりました。
お客さんにWYSIWYGやContributeを使えるようにしたため問題が大きくなりました。既に沢山時間を使ったので個人的にこのサイズ指定はデザイナに使ってほしくありませんし、商品としていかがなものかと思っています。
ただし先に大まかなサイズを%で指定し、emで文字の大小を微調整するやり方には賛成です。逆だとIEでバグがありますので。
もしタグの入れ子でも親要素の文字サイズを継承しない方法をご存知でしたら是非教えてほしいです。切実です。
長文失礼します
投稿者: tack | 2010年06月26日 22:19
>tackさん
コメントありがとうございました。
>親要素の文字サイズを継承して大きくなりすぎるからです。
私はいつもこの文字サイズ指定を利用する事が多いのですが、例えばこういうソース
<body>
<div id="#container">
この中にいろいろ子要素がある
</div>
</body>
だとしたら、bodyにfont-size:62.5%;、#containerにfont-size:1.3em;という指定をしてそれだけで大部分は済ませてます。
サイト内でそんなに多種多様なフォントサイズを利用する機会やデザインもほとんどないですし、#container内の子要素のフォントサイズが1.3em統一になってるので、子要素ごとにサイズを指定するケースは稀です。例えば一部注釈のような場所でサイズを小さくしたい場合はそこだけ0.9emにしたり、逆に大きくしたい箇所では1.1emにしたりするくらいです。
すべての要素にフォントサイズを指定する必要がないデザインなのでそういう形で楽に管理してますが、tackさんのデザイナさんはすべての子要素に対してフォントサイズを上書きしていかないといけないようなデザインなのでしょうか・・・。
>この方法で作っていたデザイナーさんのテンプレートをCMSで実際動かしているのですが、文字サイズがおかしくなっているので見てくださいという依頼が何度も来て悩んでいます。
これは・・・コーディング内容の設計ミスなのではないかと・・・。私は62.5%を利用してCMSやらblogやらに組み込みしてますけどますけど、文字サイズがおかしくなる問題には出会ったことないです。なんか根本的なところで使い方が違うような気が・・・します。(具体的なソースがわからないので予想ですが・・・)
一度コーディングされる方と一緒にソースの確認をしてみたらいかがでしょうか。。。
投稿者: Red | 2010年06月28日 13:42