[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
Post on:2011年6月10日
sponsors
フォントのサイズの単位に何を使ってますか？ px？ em？
それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。
[ad#ad-2]
下記は各ポイントを意訳したものです。
はじめに
フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。
それらの中で短所が少なく、よく利用されるテクニックは2つあります。
- pxを使ったサイズ指定
- emを使ったサイズ指定
これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。
pxを使ったサイズ指定
ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており、信頼できるものでした。しかしながら、IEにおいて（IE9でも）ブラウザの機能で文字のサイズを変更することに対応ができません。これはユーザビリティにおいて、重要なポイントとなるでしょう。IEの最近のバージョンではズーム機能があり、これはすべての大きさを増やすことができます。このことは、一度問題を和らげるのに役立ちました。
私はこの一貫性を提供するピクセルベースのレイアウトが好きでした。ユーザーは自身のビューを調整するためにアクセス可能なツールを持っているので、アクセシビリティの心配は低いと思っていました。
emを使ったサイズ指定
IEの文字のサイズを変更する機能に対応していないのは、フラストレーションでした。そこで「em」を使うことで、この問題から抜け出すことができます。「em」を使ってテキストのサイズを決める方法は、Richard Rutterの記事「How to size text using ems」で初めて読みました。もう、7年も前のものですね。
このテクニックはベースフォントとしてbodyに「%」を使ってサイズを指定します。デフォルトの16pxの代わりに、1emが10pxになるように調整します。フォントのサイズを14pxにするためには、1.4emをセットします。
CSS
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
このテクニックの短所は、emベースのサイズ指定は複利計算されるということです。例えばリストの子要素のフォントサイズは14pxではなく、20pxになります。さらに、もう一つ深い階層になると、27pxになってしまいます。
これは、子となる要素は複利計算されてしまうため、1emを宣言し避ける必要があります。
CSS
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }
remを使ったサイズ指定
3つ目に紹介するテクニックは、CSS3の「rem」です。
この単位がどのように機能するか見てみましょう。
「em」は親のfont-sizeに相対的で、複利計算され問題を起こすことがあります。「rem」では常にルート（またはhtml要素）に相対的となります。
これは、html要素にフォントのサイズを一つ定義し、すべての子要素を「rem」で定義することができます。
CSS
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
私がベースフォントによく定義するのは62.5%で、これは「px」を使用するのに類似しているからです。
「rem」を使う際に、ブラウザのサポート状況が心配ですか？
「rem」のブラウザサポートは、Firefox3.6+, Chrome, Safari5, IE9+です。注目すべき点は、IE9が文字のサイズを変更することをサポートするということです。
※Opera（11.10現在）では、「rem」をサポートしていません。
では、「rem」をサポートしていないブラウザにはどのように対応すればよいでしょうか？
IE7/8ではページのズームがあり、「px」を使用してもサイズを変えることができます。これを活用し、下記のように最初に「px」で定義し、次に「rem」で再び定義します。
CSS
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
これですべてのブラウザで一貫したサイズで定義し、すべての主要ブラウザの最新バージョンでサイズ変更可能なテキストを利用することができます。
[ad#ad-2]
sponsors
