CSSデザインノートでタグ「font-size」が付けられているもの

IE6やIE7で閲覧した際に、marginやpaddingを0に指定しているのに、画像の上部に謎の余白が空いている場合があります。

これは、フォントのサイズが画像よりも大きい場合に起こります。

例えば、hタグに画像を使った場合、特にフォントのサイズは指定しないと思うのですが、実際にはブラウザのデフォルトのフォントサイズが適用されていますので、IEではその分の大きさの領域を占領してしまうのです。

できるだけリセットCSSを利用して、hタグの大きさを普通のサイズ程度に小さくしておくのが無難ですね。

文字サイズは親要素から継承されるため、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)」になります。

最近は、ユーザビリティの観点から、文字サイズを固定せずに「%」表記や「em」表記をするのが望ましいと考えられています。

その際、ユーザがブラウザによって文字サイズを変更してする場合に、文字が重なってしまうことがあります。これは、CSSの設定で、文字の行間(line-height)に単位をつけて指定しているためです。

例えば、以下のように、行間の大きさよりも文字サイズが大きい場合、文字は重なって表示されてしまいます。

CSSコード

p {
   line-height:1.0em;
}

p span{
   font-size:2.0em;
}

(X)HTMLコード

<p>
   あいうえおかきくけこさしすせそたちつてと<br />
   なにぬねの<span>はひふへほ</span>まみむめも
</p>

このような場合には、行間の指定に単位をつけないようにします。

CSSコード

p {
   line-height:1.0;
}

p span{
   font-size:2.0em;
}

最近のブログ記事