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

Advertisement

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も進化してるんですね〜。
これで入れ子のフォントサイズの問題を心配しないでスタイルを書けますね。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

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

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

“CSS3のremという単位が便利そう” への1件のコメント

  1. […] 「rem」はCSS3で登場した新しい単位で、「em」と似た指定形式となっている。 「em」は親要素のフォントサイズを継承するのに対し、「rem」はhtml要素のフォントサイズを継承する。 これにより、「em」や「%」指定で問題となっていた、入れ子問題(参照:Rriver » CSS3のremという単位が便利そう)が解消される。 […]