今回は、後者のあまり知られていないであろう「rem」を紹介いたします。とは言っても「rem」は プロパティではなく単位になります。単位表示でおなじみの「em：エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。
rem
フォントサイズの指定を考えてみましょう。
「px」を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに「Responsive Web Design」というデザイン手法で「em」のような相対単位を「Responsive Type Setting」として利用します。
ただし、IE では「em」を利用すると文字サイズを大きくしたり小さくしたり出来なくなるデメリットがあります。そんな時に便利なのが「rem」です。
「rem」の意味は「root」+「em」で、root 要素のフォントサイズを継承することになります。つまり、html要素のフォントサイズを継承するということになります。
下記に「em」と「rem」で記述した場合の実際のフォントサイズをコメントに「px」に表示してみましたので参考にしてみてください。「em」で指定した場合は、liのフォントサイズになると「?」がついている。li要素などの場合、階層が深くなるにつれてフォントサイズはどんどん大きくなってしまったりしています。
比較①：CSS 「em」 で設定した場合
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }
比較①：CSS 「rem」 で設定した場合
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
比較②：「em」
:root {
font-size: 1em; /* 16px */
line-height: 1.5em; /* 24px */ }
h1 {
font-size: 1.5em; /* 24px */
line-height: 1em; /* 24px */ }
h2 {
font-size: 1.16667em; /* 18.6667px */
line-height: 1.286em; /* 24px */ }
em, strong {
font-size: 1.16667em; /* dangerous! */
line-height: 1.286em; }
比較②：「rem」
:root {
font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */ }
h1 {
font-size: 1.5rem; /* 24px */
line-height: 1.5rem; /* 24px */ }
h2 {
font-size: 1.16667rem; /* 18.6667px */
line-height: 1.5rem; /* 24px */ }
em, strong {
font-size: 1.16667rem; /* safe; 18.6667px */
line-height: 1.5rem; /* 24px */ }
rem をサポートしていないブラウザへの対処方法
下記の表を参考にしてもらうと、Operaのみが未だに「rem」をサポートしていません。この場合、Operaにはフォールバックとして「px」で指定をしてみましょう。html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
ブラウザサポート
| IE | FF | Chrome | Safari | Opera |
| IE8+ | FF3.5+ | Chrome1.0+ | Safari5.0+ | 未 |
参考
0 件のコメント:
コメントを投稿