Sun, July 24, 2016

フォントサイズの指定はCSS3の「rem」が便利そう

フォントサイズの指定は、相対指定のem、%、絶対指定のpxが一般的ですが、
CSS3の新しい「rem」という単位を使った指定方法をご紹介します。

emや%の相対指定の場合、親要素の影響を受け、子要素は複利計算されてしまいます。
しかしremはroot要素(html要素)のフォントサイズを継承するので階層が深くなってもフォントサイズが大きくなっていくことはありません。

remとは「root」+「em」という意味です。

例えば下記のような入れ子構造のリストの場合、文字列がem、remそれぞれの指定で何pxになるのか検証します。

<body>
<ul>
	<li>
		<ul>
			<li>hogehoge</li>
		</ul>
	</li>
</ul>
</body>
■em指定の場合
body { font-size: 62.5%; }
li   { font-size: 1.4em; }

ベースのフォントサイズを10pxに設定。
文字列「hogehoge」は複利計算され、20pxになります。

■rem指定の場合
html { font-size: 62.5%; }
body { font-size: 1.0rem; }
li   { font-size: 1.4rem; }

ベースのフォントサイズを10pxに設定
文字列「hogehoge」はhtml要素のフォントサイズを基準とするので、14pxになります。

 

また、現状「rem」をサポートしているブラウザは
Firefox3.6+、Chrome、Safari5、IE9+になります。

サポートしていないブラウザに対しては下記のように最初に「px」を指定し、
その後に「rem」で上書きすることによって対応することが出来ます。

html { font-size: 62.5%; }
body { font-size: 10px; font-size: 1.0rem; }
li   { font-size: 14px; font-size: 1.4rem; }

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree