Web
2014年7月19日 (土) 掲載
Vertical Rhythmの使い方 [compass]
横方向のレイアウト整合性をとるのがBlueprintなら、縦方向（行間）をコントロールするのがVertical Rhythmです。Blueprintにも行間コントロールの機能はあるのですがあまり使いやすいとは言えません。ここではcompassコアに含まれるVertical Rhythmの使い方を説明します。基本となる行間の設定と初期化
Vertical Rhythmの初期化コードは図のようになります。
@import “compass/typography”; // Vertical Rhythmを含むtypographyをインポート ＄base-font-size: 14px; // 基本のフォントサイズを指定 ＄base-line-height: 24px; // 基本の行間を指定 @include establish-baseline; // Vertical Rhythmを初期化
- １行目はcompassコアに含まれるパーシャル「typography」をインポート
- ２～３行目はtypography内で定義されている変数を設定。特に設定しなければデフォルト値が使用されます。
- ４行目でミックスイン「establish-baseline」を呼び出す。<html>要素に対してfont-sizeやline-heightが設定されます。
「基本のフォントサイズ」には本文フォントのサイズを指定すればよいでしょう。
「基本の行間」も同様です。エディトリアルデザインでよく使われる比率としては「フォントの1.5倍= 21px」「フォントの1.75倍=24px」などがあります。
これらを指定した上でestablish-baselineをインクルードすれば必要な初期設定が行われます。
文字の大きさと行間の設定
h2 {
@include adjust-font-size-to(36px);
}
タイトルなどに大きなフォントサイズを設定するには、図のようにadjust-font-size-to(＄font-size) をインクルードします。
フォントサイズが36pxになると同時に、line-heightも＄base-line-heighの倍数になるように調整されます。
上下の行間を空ける設定
h2 {
@include leader(1); // 上を1行分あける
@inlude trailer(1); // 下を1行分あける
}
タイトルの上下にマージンを空けたいときは、図のよう leader(＄line) （上を空ける）や trailer(＄line)（下を空ける） をインクルードします。
h2 {
@include leader(0.5);
@include trailer(0.5);
}
上下に0.5行分のマージンが空けられます。h2の途中では基本グリッドから外れますが、h2が終われば基本グリッドにもどります。
表の上下マージンを設定する
table {
@include leader(0.5);
@include trailer(0.5);
}
図のようにすれば一見問題ないように思えますが、表には上下のボーダーがつきます。border-width: 1pxだとすると、このままでは上下に2pxずれてしまうことになります。
table {
margin-top: rhythm(＄lines: 0.5, ＄offset: 1px);
margin-bottom: rhythm(＄lines: 0.5, ＄offset: 1px);
border: solid 1px blue;
}
図のようにすることでborder-widthを考慮に入れたmarginが設定されます。（テーブルの中にもボーダーがあるのならば、<td>などのline-heightも同じようにして計算をしてください。）
ミックスインや関数に引数を渡すにはいくつかの方法があります。
@function rhythm(＄lines: 1, ＄font-size: ＄base-font-size, ＄offset:0) と定義されているとき、
- rhythm(1, 16px); は＄linesに1、＄font-sizeに16pxが渡されます。＄offsetはデフォルト値の0となります。
- rhythm(＄offset: 1px, ＄lines: 2); は＄linesに2、＄offsetに1pxが渡されます。＄font-sizeはデフォルト値に＄base-font-sizeとなります。
Web開発のとき統合開発環境としてEclipse（あるいはAptanaStudio）を使用している人は多いでしょう。ここではEclipseのビルドシステムを使ってcompassをコンパイルする方法を説明します。
最近のWebデザインではメディアクエリを使用したレスポンシブデザインが必須となっています。sassでももちろんメディアクエリはサポートされています。sassならではの拡張がされているので複雑になりがちなメディアクエリもスッキリと書けるようになります。
cssでは背景に画像を指定することが良くあります。普通はbackground-image: url(../images/bg.png); のように書くことでしょう。しかしこの方法ではフォルダレイアウトを変更すると、すべての指定を書き換えなければなりませんし、CMSではこのような相対指定が使えない場合もあります。このような不便を解消するためにcompassでは画像を特別な方法であつかいます。
compassの魅力のひとつは豊富で実績のあるミックスインが使えることです。ここではcompassコアに含まれるミックスインの概要を紹介します。
sassは従来のcssと互換性のあるスタイルシート言語です。実際、cssファイルの拡張子をscssに変えただけでも立派なsassソースファイルであり、コンパイルをすることができます。なのでcssについての知識があればsassは簡単に覚えることができます。ここではその概要を説明します。
compassを利用するにはまずcompassコンパイラをインストールする必要があります。ここではWindows環境にcompassをインストールする方法と、基本的な利用方法について説明をします。
Webページを作成するとき、作業の半分はグラフィックの制作に、残りの半分はCSSの制作に費やされるでしょう。CSSの制作環境は数年前と比べて格段に良くなっているとはいえ、CSSという言語自体はそれほど進歩していません。特にDrupalなどのCMSプロジェクトではセレクタの記述がどんどん長くなる傾向にあり、そのためcssコードの共有や保守がますます難しくなってきています。