kishin 貴真

20160323

  /  DESIGN

そろそろremでいいだろう

CSS rem

先の連休でちょっと時間が取れたので、rem用のフォントシステムを作った。

“rem”とは、CSSでフォントサイズを指定する際に使用できる相対単位のこと。
これは、親ノードに対して相対サイズとなる % や em の利点と、絶対サイズとなる px の利点、その双方のイイトコ取りな単位で、ノード階層がどれだけ深くなっても常にルートに対しての相対サイズを指定することができる仕様なので、相対指定でありながら絶対指定のように扱える非常に使い勝手の良い単位。

この rem には、ひとつ問題とされていることがあり、それは IE8(fuck off) は対応していないこと。
とは云っても指定方法を工夫すれば簡単に解決できる問題でもある。

先に触れたフォントシステムとは、私がWebサイトを作る時に使っている、font関連の指定をシンプル&スマートに行えるようにするもので、Sassで作っている。具体的には、Sassの演算を活用して、クラスセットを構築するもので、そこでは font-size の他に、line-height と font-weight も同時に設定している。今までは、font-size指定は基本的にはpx指定をしていたのだが、これをrem指定に置き換えて、更に細部を調整して構築し直した。

それを使って、例えば「14px / 太字 / 狭め」を指定する場合にはこうする → @extend .fs14bcon
例えば「18px / 標準 / 行間無し」を指定する場合にはこうする → @extend .fs18zero
便利がイイ。

font-sizeの他に組み込んでいる属性としてはまず、line-height だが、これは結構重要で、使う場所によって広めに取ったり狭まめにしたりと、調整をした方が視認性・可読性が高まるので手を抜けない。そのため、私のフォントシステムでは、各フォントサイズ毎に4段階の line-height を使用できるようにしてある。

更に、これも重要なことなのだが、文字サイズによって適切な line-height というものがあり、デザイナーならばそれを意識しなくてはいけない。同じ line-height指定でも、文字サイズの大小によって、イイ感じとなるか、ダメな感じになるかは別れてくる。

つまり、文字サイズが小さい場合には line-height は広めに取った方がバランスが良く、逆に文字サイズが大きい場合には line-height は少し狭めるくらいが丁度よく感じるのである。これに対する対応は、Sassの演算を使用すれば、文字サイズに合わせて自動的に適切値を算出するように構築することが可能なので使わない手はない。for文、if文、each文様様である。

システムに組み込んでいるもうひとつの属性は、font-weight だが、CSSには、親ノードの設定を子ノードが受け継ぐ “継承” という気の利く仕様があるため、指定を省略できることが多々ある。しかし一方で、当然のことながら子ノードでは設定を変えたい場合もある。

例えば、親ノードで font-size: 16px; line-height:150%; font-weight:600; という指定がされている場合、これらの属性は全て継承されるものなので、子ノードで3つとも変更したい場合には、それぞれを指定し直さなければならない。そうした手間を省くために、短いクラス名ひとつを @extend するだけで、継承を考えることなく思い通りの指定ができるようにフォントシステムを構築している。

実際のSassコードは26行ほどの小さなものだが、これによって実作業時に図られる時間短縮はかなりのものであるので、興味がある方は参考にしてみてもらえればと思う。各所にある係数をカスタマイズすれば、自分好みのフォントシステムとしても使えるだろう。

$fsWTypeAry: zero, con, "", ex, bzero, bcon, b, bex;@for $tarSize from 10 through 40 {  @each $type in $fsWTypeAry {    $fSize: $tarSize / 16;    $lHeight: 100%;    $base_fontSize: 14;    $base_lineHeight: 173%;    $mathNum: ($tarSize - $base_fontSize) * -2.2;    @if $mathNum <= -50 {      $mathNum: -50;    }    $use_lineHeight: $base_lineHeight + $mathNum;    @if $type=="" or $type==b {      $lHeight: $use_lineHeight;    } @else if $type==con or $type==bcon {      $lHeight: $use_lineHeight * 0.84;    } @else if $type==ex or $type==bex {      $lHeight: $use_lineHeight * 1.09;    }    $fw: 300;    @if $type==bzero or $type==bcon or $type==b or $type==bex {      $fw: 600;    }    .fs#{$tarSize}#{$type} { font-size: #{$fSize}rem; line-height: $lHeight; font-weight: $fw; }  }}

ここで生成されるのは「.」から始まる通常のクラスなので、HTMLからもclass指定できるが、代わりにcssファイルに多くのクラス名が並ぶことになる。それを回避したいなら、未使用なものはcssファイルに出力されないSassのプレースホルダ機能を使う仕様として「%」から始まるプレースホルダクラスに変えれば良い。

.fs16ex → %fs16ex という感じで。

その場合、HTMLからの指定は不可となりSass内部でのみ使用可能なクラスとなるが、コンパイルされるcssファイルには必要な記述のみが出力されるのでファイル容量が抑えられ、コードの見通しも気持ちよくなる。

また、最後の font-size 書き出しの部分で、rem指定の“前に”px指定を追加すれば、remが機能しないIE8の場合のみpx指定を機能させることも可能となる。動作としては、一旦px指定をしておいて、その直後にrem指定をすることで、rem対応ブラウザ上でのみ font-size を rem で上書きするということである。

Twitter