【CSS3】フォントサイズは「rem」で指定するのが最適解。

Ads by Google

CSSでフォントサイズを指定するとき、通常は「em」、「%」、「px」あたりを使って指定することが多いと思いますが、CSS3から利用可能になった「rem」という新しい単位が非常に便利なので、その使い方を紹介します。

「rem」とは「root」+「em」の意味で、root要素(html要素)に対して相対的にフォントサイズが指定できます。
つまり「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもありません。
常にroot要素に対しての相対的なサイズを指定できるので、非常にわかりやすく便利です。

文章だけの説明ではわかりづらいと思うので、実際の使い方を。

html {font-size:62.5%;}

body {font-size:10px; font-size:1.0rem;}

h1 {font-size:13px; font-size:1.3rem;}

p {font-size:11px; font-size:1.1rem;}

まず最初に、上記のように html {font-size:62.5%;} を指定しておくと、以降 1rem10px とほぼ同じサイズとして扱えるようになります。
1.3rem = 13px
2.2rem = 22px
…といった具合です。
以下、body {font-size:10px; font-size:1.0rem;}を筆頭に、それぞれの要素のフォントサイズを指定していくことになります。

このとき問題になるのが、【CSS3】 のため対応ブラウザが制限されてしまうという点です。
いつも通り、諸悪の根源マイクロソフトの[インターネット・エクスプローラー]には対応していません!(笑)

そこで IE系の未対応ブラウザに対しては、最初に「px」でフォントサイズ定義し、次に「rem」で再び定義し上書きするという措置を講じることになります。

いずれにしても今後、フォントサイズの指定は「rem」を使う方法が主流になるでしょうね。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です