SCSSでremを使ったVertical Rhythm
はじめに
今回はCSS3のremを使ってVertical Rhythmを実現する方法について紹介します。rem（CSSの単位）は対象ブラウザがIE9以上であることが条件になりますが、最近はIE8を対象外にすることもよくあるのでそれほど問題にならないかもしれません。
Vertical Rhythmとは
Vertical Rhythmは要素をリズミカルに配置するための手法の1つで他にはFlowing RhythmやProgressive Rhythm（回転）があるようです。Vertical Rhythmは1行の高さを1つの単位として、縦のラインのリズムを作る手法です。ノートの罫線をイメージしてもらうとわかり易いと思います。要素やタイポグラフィの高さを罫線を基準にデザインすることで、デザインに感じる違和感を小さくし心地よさを感じさせることができます。
詳しくはこちら。
Modular ScaleとVertical Rhythmを使ったタイポグラフィとレイアウト
remとは
remとはCSSの単位です。emと似ていますがemのように親要素から相対的に計算された値ではなく、HTML上のrootに設定されているemを取得できます。例えばhtml要素に16pxと指定し、ある要素に1remと指定した場合、親要素にどのようなフォントサイズを指定したとしても1rem = 16pxとなります。フォントサイズの計算が非常に楽になるとても便利な単位です。
サンプル
実際にSCSSのFunctionを作成してVertical Rhythmを試してみたサンプルがこちらです。GRIDLOVERを参考にして作りました。
Function
ベースラインを保持ておく変数（$base-line-height: <line-height>;）と行の高さを返すシンプルなfunction（vr([$lines = 1])）を用意します。Functionは$base-line-heightと引数の$linesをかけているだけです。remを使えるからこそこれだけシンプルにできます。この関数をラップしてMixinにするのも良いかもしれません。
$base-line-height: 2rem;
@function vr($lines: 1){
$line-height: $base-line-height * $lines;
@return $line-height;
}
使い方
bodyに基準となるline-heightを指定します。
body {
line-height: vr();
}
例えば見出し部分ではこのように何行分のスペースを持たせるかを指定していきます。
h1 {
margin-top: vr(2); //2行分
margin-bottom: vr(1); //1行分
line-height: vr(3); //3行分のline-height
font-size: 4.236rem;
}
line-heightはfont-sizeの影響を受けないので常にline-heightの方が大きくなるよう設定しておけばレイアウトが崩れることはありません。
注意点
remはブラウザ上でpxに変換されます。remをpxに変換した際に少数が発生するとmargin, paddingとline-heightでは扱いが異なるため微妙なズレが起こります。line-heightの場合は小数点以下を切り捨てた値が使われ、例えば1.65remを指定すると26.4pxとなります。この値をline-heightに指定しても小数点以下は切り捨てされ26pxとなり、逆にmarginやpaddingは小数点以下も扱われるため26.4pxのまま計算され差が生まれます。
Modular Scaleと合わせて使う
このFunctionであればフォントサイズを自由に指定できるので行数を微調整してやればModular Scaleと併用できます。
h1 {
margin-top: vr(2);
margin-bottom: vr(1);
line-height: vr(3);
font-size: modular-scale(1);
}
IE8以下に対応したい場合
CSSだけでIE8以下に対応したければCompassのVertical Rhythmが使えます。使い方はremを使う方法より複雑なので慣れが必要です。Compassの他にVertical-rhythmicというライブラリもあるようです。
もしくはREM unit polyfillを使ってremを使えるようにすることもできます。remの良さを活かすのであれば是非こちらを使いたいところですね。
まとめ
これでModular ScaleとVertical Rhythmを併用できますね。ベースラインを小さく設定しておけば細かな調整も可能になると思います。
補足記事
この記事はこちらの記事「Sass/SCSS remを使ったVertical Rhythm」の転載です。
