WordPress: rem (root em)でフォントサイズを指定

Wednesday 8 April 2015

 今年のWordPress付属のテーマ、Twenty Fifteenを見ていると、フォントサイズの指定にremという見慣れぬ単位が使われているのに気づきました。
 で、調べてみると、これはroot em、ルートに対するem指定ということで、利点は子エレメントのサイズが複合的に変化してしまう「コンパウンディング効果」がないところだそうです。

FONT SIZING WITH REM

 この記事にもある通り、文字サイズの指定は昔から難しい問題でした(やはり、というべきか問題はいつもInternet Explorerでした)。ぼくも必ずしもやっているわけではないけれど、WordPressを使い始めた頃に覚えたのが、フォントのサイズをリセットする方法です。

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

 まずbodyタグに対してfont-size: 62.5%と指定することによって、10px=1emにします(デフォルトでは16px=1emなので、10/16=0.625という計算だと思います)。すると、その後h1を2.4emと指定すれば24pxに、pを1.4emと指定すれば14pxになる、というわけです。
 しかし、リストの中にリストがある場合、子リストは親リストに掛け算されて、1.4×1.4≒2で20pxになってしまうという…。

 ということを踏まえて、この問題を解決してくれるのがremで、親エレメントではなくルートエレメントに対するem値で表示される。リストの中のリストもあくまでliで指定した14pxになってくれるようです(確かめてないけど)。

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
li { font-size: 1.4em; } /* =14px */

 このremという単位は、普通のブラウザーとIE9以上でサポートされている安心安全仕様だそうです。

 またTwenty Fifteenでは、remをサポートしていないブラウザー用にpxの指定を先にして、その後にremを加えてあります。

p { font-size: 13px; font-size: 1.3rem; }

 ふ〜ん、これはいい! 今後これを導入していこう。

(追記)
…な〜んてことを考えていたら、なんだ、remってTwenty Twelveのときにすでに使われてる。っていうか、参照したブログ記事自体が、Twenty TwelveのCSSの中に参考ページとして載せられていましたという…。(^^;
けれども2012のときは、なぜかフォントサイズのリセットをfont-size: 87.5%にしていて、14px=1remにしています。ので、たとえば、24pxだと24/14=1.714285714remと、remの指定がやたらと少数になってて、ちっとも便利じゃないという。
 そして、それが2013、2014と使われてなくて、2015で復活しています。62.5%のリセットとremの組み合わせに落ち着いたということなんでしょうかね。
 まずまず、面倒な分野のようです。