CSS3のremという単位が便利そう

更新日 2017年11月23日

CSSで指定できる単位にはいろいろありますが、CSS3で新しく導入された「rem」という単位が便利そうです。これは、root emの意味で、ルート（つまり<html>）のサイズを継承するemとのこと。たとえば、リスト要素を入れ子にした際に文字サイズが大きくなってしまうなんていう問題は、この「rem」を使えば解決できます。

emの場合

html { font-size: 62.5%; } /* 1.0em ≒ 10px */
li { font-size: 1.4em; } /* ≒ 14px */

上記のようにスタイルを指定すると、以下のようなHTMLの場合入れ子にしたli要素のフォントサイズが掛け算で1.4 x 1.4 = 1.96 (約19px)になってしまいます。

<ul>
  <li>メニュー1
  <ul>
    <li>サブメニュー1</li>
    <li>サブメニュー2</li>
  </ul>
  </li>
  <li>メニュー2</li>
</ul>

これだと「サブメニュー」が「メニュー」より大きく表示されてしまいます。

remの場合

以下のようにremでフォントサイズを指定すると、入れ子にしたli要素も1.96emではなく1.4emになる。

html { font-size: 62.5%; }
li { font-size: 1.4rem; }

たしかに、これは便利！

というか、そもそも仕様がそうあるべきだったんではないか？と思ってしまいます。

で、ブラウザサポートは？

以下のような感じだそうです：

IE9
Safari 5
Chrome
Firefox 3.6+

※Operaは11.10でまだサポートされていないそうです。
※こちら（英語）を参考にさせていただきました。

ということで、remをサポートしないブラウザ対策ようのコードは以下のとおり：

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

remをサポートしないブラウザには14pxを指定。
サポートするブラウザには1.4remで上書きさせる。

なるほどCSSも進化してるんですね〜。
これで入れ子のフォントサイズの問題を心配しないでスタイルを書けますね。

2011年5月26日に公開され、2017年11月23日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする