最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。
「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CSSが苦手とする大規模サイトやWebアプリケーションの構築に欠かせない再利用性を高められます。
注目のCSS拡張メタ言語「LESS」
SassやStylusなど、CSS拡張メタ言語にはいくつか種類がありますが、今回はそのうちの1つ、LESSについて紹介しましょう。
※本記事は、less.js version 1.2.1をもとに執筆しています。
LESSを使うために必要なこと
LESSの公式サイトから less.js をダウンロードして、HTMLファイルにて以下のように.lessファイルとless.jsを呼び出すことで、LESSの記述が利用できるようになります。
<!-- CSSと同じようにlinkタグから.lessファイルを呼び出す
rel=”stylesheet/less” となる点に注意してください -->
<link rel="stylesheet/less" type="text/css" href="styles.less">
<!-- less.jsは.lessファイルの後に呼び出します -->
<script src="less.js" type="text/javascript"></script>
less.jsを呼び出さずにLESSを利用できる便利なGUIツールも公開されています。こちらは後でまとめて紹介します。
Webデザインの要、色の管理を簡単に
Webデザインの中で印象を大きく左右し、影響力が大きいものが「色」です。「色」は、カラースキームによって統一され、サイト全体をまとめています。カラースキームはサイトや要件ごとに変更することが多いので、LESSで記述することでメリットが得られます。
以下では、LESSを使ってページ全体の背景色、文字色を指定してみました。
<!-- 変数定義 -->
@main-bg: #efefef;
@default-color: #aaaaaa;
<!-- 以下で変数を呼び出します -->
html {
background-color: @main-bg;
color: @default-color;
}
変数を利用するとサイト全体の変更が容易になるだけではなく、「#fafafa」や「#ff0000」のような値に、「@main-bg」のような名前を付けて直感的にスタイルを適用できます。どんな意味を持つのかを理解しやすいので、自分自身はもちろんチームでの開発もスムーズになります。
レイアウトの要、グリッドの計算を自動でできる
CSSベースのレイアウトではグリッドシステムの構築が欠かせません。コラムの数、コラム自体の幅、コラム間のマージンの計算には多く時間がかかります。「The Semantic Grid System」を参考に、グリッドシステムをLESSで記述してみましょう。The Semantic Grid Systemのソースはこちらを参照してください。
上記からダウンロードした.lessファイルを styles.lessのようなメインのlessファイルからCSSと同じように@importなどで呼び出したら以下のように記述します。
article {
.column(9);
}
このように、非常に簡単な記述でグリッドコラムを作れます。ここではThe Semantic Grid Systemにて設定してある「.column」というミックスインに、コラム数である9を代入しています。ミックスインではIDやclassのようなセレクタをキーワードに、スタイルのルールを変数のように利用できます。
The Semantic Gridのソース内での.columnミックスインの定義の部分だけを抜き出して見てみましょう。
.column(@x,@columns:@columns) {
display: inline;
float: left;
width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
}
グリッドシステムを作るときに必要な複雑な計算を、「.column」というミックスインで定義していいます。そのため、以下のようにシンプルな記述が、
article {
.column(9);
}
以下のようなCSSとしてLESSが処理してくれます。
article {
display: inline;
float: left;
width: 700px;
margin: 0 10px;
}
LESSの記述が圧倒的に短いだけはなく、直感的にコラムの数が9であることがわかります。この例でも、コラム数、幅、マージン幅の変数の値を変更するだけでCSS全体に適用できるので、メンテナンス性の向上にも貢献します。
グリッドシステムのようなどのプロジェクトでも利用する共通のスタイルをミックスインとして定義しておくと、複数のプロジェクトで再利用でき、大幅な効率化が見込めます。
記述が面倒なCSS3のクロスブラウザー対応を1行で
CSS3を使って角丸やグラデーションを実装することも多くなりました。面倒なのが、-moz-や-webkit-などのベンダープリフィックスの記述です。border-radiusを例に、ベンダープリフィックスの記述を回避する方法を紹介します。
ミックスイン内でベンダープリフィックス付きのborder-radiusを記述をしておきます。
/* ベンダープリフィックスをミックスインで吸収 */
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
すると以下のように記述するだけで、ベンダープリフィックスありの記述に変換されます。
/* LESS */
.round {
.border-radius(10px);
}
グラデーションとbox-shadowを合わせてミックスインとして定義しておけば、CSS3を使ったボタンのスタイルも以下のようになります。
a.button {
.button();
&.purple {
.button(@purple,#fff,0 -1px 1px rgba(0,0,0,.4));
}
&.blue {
.button(@blue,#fff,0 -1px 1px rgba(0,0,0,.4));
}
}
ミックスインの引数の値を変更してクラスを定義することで、たった1行のコードで別の色のボタンを作れます。また、前述のカラースキームの変数を組み合わせれば、統一感のあるページを、メンテナンス性を維持したまま制作できます。
まだサポートを必要とするIEのハックをまとめみよう
IE6やIE7などのサポートが必要な場合には、多くのCSSハックを利用する必要があり、うっかり記述を忘れると修正に時間がかかってしまうこともあります。そのような場合も、ミックスインを使って回避できます。
.inline-block() {
*display: inline;
*zoom: 1;
}
IE6、IE7では、「display: inline-block」が正しく表示できません。そこで、IEハックを適用したミックスインを作成します。
.list-linear {
display: inline-block;
.inline-block;
}
「display: inline-block」を利用するスタイルとともに定義したミックスインを呼び出せば、どのハックが有効だったかを調べ直したりする必要はなくなります。
このように、ミックスインにベストプラクティスを集めて追加、編集し、自分のライブラリーを構築していけば飛躍的な作業効率アップになるでしょう。
