font-sizeについて


文字の大きさを決めるcssプロパティはfont-sizeですが、pxやらemやら%やらrem?なんかもあるようで、まとめてみようと思います。

pxとは(相対指定)

サイトを見ているユーザー(エンドユーザー)が自由に文字を変える事の出来ない文字サイズの指定方法です。
いろいろな有名なサイトのソースを見て回ったのですが、ユーザビリティやアクセシビリティを考慮したサイトではこの指定は見かけませんでした。
IE7以降はページ全体をズームして表示してくれる機能があるので、(IE6には無かった)px指定でもいいんじゃない?という意見もあったようですが、IE7以降もズーム機能とは別で、文字のサイズを変更というのはまだまだある様です。まぁ、ズーム出来るならいいのでは。。という気もするのですが、ズーム機能じゃなくて、文字の変更での変更の仕方しか知らないとかいう人が居れば、より柔軟にユーザーが見たい方法で見られるとは言えるのかも。。?
という訳で、ユーザーの使いやすさを考慮したページを作りたいのであればpxはさけておいた方が良いみたいです。
文字サイズが変わらないという事で、pxは絶対指定かな〜と思っていたのですが、どうやら相対指定の様です。pxはdpiという、モニターの解像度によって大きさが変わるので相対指定ってことらしいです。1ピクセルを親要素とした相対指定って事ですね。ちょっと、ややこしいですね。

emとは(相対指定)

WindowsやMacintoshの標準サイズ(親要素)を基準として、文字サイズを指定する方法です。
標準の文字サイズは16pxである為、16px=1emになります。
仮に”○{font-size:1.25em}”とした場合には16pxの1.25倍の20px(16×1.25)での表示となります。
親要素を基準とした指定である為、エンドユーザーが文字サイズをブラウザ上で変更した場合、HP全体の文字サイズも変わります。(相対サイズ)
例:)エンドユーザーが文字サイズを16px→18pxに変更した場合、cssを1.25emで指定していたとしたら、計算では22.5、実際表示は約23pxでの表示となります。
ただ、em指定だと、実際どれくらいで表示されるの?っていうのが分かりづらい。。
この為、こんな風に記述する方法があります。

body{
font-size:62.5%; /*10px*/
}

と記載すると、<body>~</body>内で文字指定を行わないと16pxの62.5%の表示(16×0.625=10px)、つまり10pxでの表示となります。
そして、他の要素をem指定にすると、

○{ font-size:2em; /*20px*/}
○{ font-size:1.6em; /*16px*/}

という風に10pxを基準として文字サイズが決まるのでわざわざ計算しなくてもいい!とちょっとお便利になります。

が、しかし、em指定にも欠点があります。
それは、入れ子となる子要素が複利計算で計算されてしまうということです。
複利計算ってなにー?、って言うと

例えば。。。

HTML

<ul>
<li>ここは16pxなんだけど</li>
<ul class=”li_2″>
<li>
ここは26pxになっちゃうの
</li>
</ul>
</li>
</ul>

css

ul{font-size:1.6em;}

と指定したとします。
最初のulで囲んだ「ここは16pxなんだけど」の文は16pxで表示されますが、入れ子になっているulは、サイズの基準が親要素のulに指定している1.6em=16pxになってしまい16×1.6=25.6(表示は26px)になってしまうのです。

表示結果

  • ここは16pxなんだけど
    • ここは26pxになっちゃうの

↑こんな風に。

これを解決するには、css側に

css

ul{font-size:1.6em;}
ul ul.li_2{font-size:1em;}

と記載すると、親要素のul(16px)に対し、子要素を計算するので、16×1=16pxでの表示となります。

%について(相対指定)

調べ中です。(オイッ)
んでもこれも親要素に対し、子要素が何%か?という基準で指定されるようです。
%指定しているweb siteは多かったです。

remについて

remは上記に挙げた様な、emや%の様に入れ子のタグが複利計算されないcss3タグです。
remとはroot+emの様でroot要素(html要素)を親要素とし、文字のサイズが決定されます。
計算を簡単にするには、先ほどはbodyの中に記載したfont-size:62.5%をhtmlに記載します

css
html {
   font-size:62.5%;/*10px*/
}

○{font-size:1.2rem;/*12pxになります*/
○{font-size:1.6rem;/*16pxになります*/

欠点はcss3なので、対応していないブラウザがあるという点です。
サポートしているブラウザは
・Firefox3.6+
・Chrome
・Safari5
・IE9+

だそうです。
うーん。

おまけ

書いていて思ったんですが。。emや%などの相対指定の場合、ユーザーが文字サイズを変更したら、小数点が出てくる可能性があるんですよね。そういう時は0.5以上はくり上がる(例えば22.6なら23px、22.3なら22px)のかな?と予測で決めていましたが、どうやら各ブラウザによって、小数点が出た際のサイズ表示は異なる様です。

以下にとても参考になるサイトがあったのでリンクさせて頂きます。

レシポンジブデザインの本を書かれている方の様です。
むむむ。。レシポンジブデザイン。。

まだまだ基本を学習中のピヨっこな私には遠いですが、いずれきちんと覚えたいなぁ。XD

コメントを残す

メールアドレスが公開されることはありません。