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

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

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

コメントを残す

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