font-size %指定について
カテゴリ : CSSとは, html/css, すべてのカテゴリ
Font 006 by Stephen Coles
先日サイト制作にあたってのfont-sizeの指定について質問がありました。
font-sizeはpx(ピクセル)指定するべきなのか？%指定するべきなのか？
といった内容です。（他にもemやexやptなどもありますが、今回は上記の二点に絞ってお話しします）
感覚的に楽に指定できる単位はやはりピクセルでの指定ですが、ピクセルでの指定を行った場合IEでの拡大縮小が効かなくなってしまいます。
というわけで様々なブラウザへの対応や、アクセシビリティを考慮したサイト制作をする場合は%での指定が良いでしょう。
何を基準に%指定するのか？
これも先日あがった質問です。100%と指定した文字は一体どれくらいの大きさになるのか？
まずはブラウザのデフォルトフォンとサイズを確認してみましょう。
ブラウザ別デフォルトフォントサイズ一覧表(外部サイトへ飛びます)
ほとんどの主要ブラウザがデフォルトフォントサイズに16pxを採用しています。
そのためfont-size:100%と指定をすれば16pxのサイズとなります。
じゃあ15pxにするには何%と指定するのか？
100%の指定で16pxになるのであれば、15pxは99%か？というともちろん違います。
100%の前後数%までは16pxの指定となるため、サイズが切り替わるタイミングを把握していないといけません。
これについて分かりやすくまとめてられているサイトがありました。
「ブラウザごとの差異が出ない%での指定値」という表がとても参考になります。
上記のようなことをふまえて、的確な%指定を行うとデザイン的にもアクセシビリティ的にも優れたWebページのデザインができますね。
