1. 【スマートフォン向けサイト】フォントサイズの指定には、remを使おう

【スマートフォン向けサイト】フォントサイズの指定には、remを使おう

 CSSでフォントサイズの設定する際、「em」や「px」を使う事が多いと思うのですが、スマートフォン向けサイトの場合は全てのブラウザがCSS3に対応しているのでCSS3から新しく登場した単位である「rem」で設定するのがおすすめです。

「rem」とは

 従来の「em」と似ていますが、「rem」はemとは違い親要素の値を継承せずルート(html)で設定された値だけを継承します。「rem」 = 「root」+「em」です。

 emだと親の値に影響されてしまうので入れ子になったタグだと複利計算になって面倒だったのですが、remを使う事でこれがスッキリ解消します。

「rem」の基本的な使い方

 htmlのフォントサイズを「62.5%」にしておくと計算が楽です。10px(16 * 0.625 = 10) なので、こうすると、「1rem」 = 「10px」になります。
 下の例のような指定方法の方がわかりやすいかもしれません。
参考:

U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する