基準となる文字サイズを最初に決めておく

|

文字サイズは親要素から継承されるため、CSSの設定には注意が必要です。

また、ユーザビリティの観点から、文字サイズはユーザが自由に変更できるように「%」あるいは「em」など可変できるように設定するのが望ましいです。

まず、基準となる文字サイズをpx単位で決めます。それに対して、個別に%やemで文字サイズを設定していきます。

ここで注意しなければならないのは、「%」で指定すると、ブラウザによって文字の大きさが若干違って見えてしまうということです。製作者としてはどのブラウザでも同じ大きさに見えて欲しい、少なくとも文字の大きさの相関性が保たれてほしいですよね。15emで指定した文字と16emで指定した文字が同じサイズに見えてしまうのは困りますよね。

また、%指定した文字あるいはem指定した文字をpx単位に換算した場合、どのような大きさになるかは知りたいですよね。

%指定のCSSライブラリ Fonts CSS

ブラウザによる文字サイズの見え方の差異を調整するCSSライブラリを紹介します。

CSSライブラリは以下のページにあります。

CSSコード

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/

body{
   font:13px/1.231 arial,helvetica,clean,sans-serif;
   *font-size:small;*font:x-small;
}

select,
input,
button,
textarea,
button {
   font:99% arial,helvetica,clean,sans-serif;
}

table{
   font-size:inherit;
   font:100%;
}

pre,
code,
kbd,
samp,
tt {
   font-family:monospace;
   *font-size:108%;
   line-height:100%;
}

基本となる文字サイズを「13px」とし、特定の%で指定するとブラウザによらず同じ大きさに表示されるようです。

以下の表は、%指定した際のpx換算したものです。

表示したい文字サイズ(px) CSSで指定する値(%)
10 77
11 85
12 93
13 100
14 108
15 116
16 123.1
17 131
18 138.5
19 146.5
20 153.9
21 161.6
22 167
23 174
24 182
25 189
26 197

em指定が一目でわかるチャート EmChart

こちらは、自分で基本となる文字サイズをpxで決めたときに、例えば14pxの文字を表示したいとき何%に指定すればよいのか、一目でわかるオンラインチャートです。

縦軸が「基準となる文字サイズ(px)」で、横軸が「表示したい文字サイズ(px)」、交差しているところが「指定する文字サイズ(em)」になります。

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事