debilog

Less & Sass Advent calendar 2011 の 2 日目を書きます。ウェブページを作るときのアプローチに触れた後で、アドベントカレンダーのテーマである LESS や Sass が、ウェブページ制作者にとってどのように役に立つものなのかを紹介したいと思います。

あなたが HTML や CSS を書くことになったら
メタ CSS 言語
Sass 3 系の登場
他のメタ CSS 言語
終わりに

あなたが HTML や CSS を書くことになったら

個人や団体のウェブサイトを作りたいとき
個人で使っているブログなどの CMS をカスタマイズしたいとき
仕事でウェブアプリケーションのフロントエンドを開発せざるを得ないとき

何らかの事情があって HTML や CSS を書く場面があると思いますが、ウェブサイトあるいは一部のページを作成する時には次のようなアプローチが考えられます。

HTML も CSS も自分で書く
HTML テンプレートスキンを使う
CSS フレームワークを使う

これらについて少し見ていきましょう。

HTML も CSS も自分で書く

HTML や CSS の知識のある人であれば、 HTML のタグを記述して、 CSS を記述して、ブラウザで表示結果を確認しながら作っていく――という感じで、 DTD 宣言や head 要素内の記述なんかはウェブ検索をしてコピーペーストしたりするかもしれませんが、完成した HTML と CSS のソースコードは全て自身が記述したものになりますよね。

CSS については、次のような流れで書いたりします。

組み上げたいデザインに合わせて、 body 要素の余白などブラウザのデフォルトスタイルを打ち消す
要素ごとに余白やフォントなど基本的なスタイルを指定する
ヘッダやメインカラム、サイドバーやフッタなどの枠組みとなる要素のレイアウトを調整する
枠組みの中の個々の要素（例えばメインカラムの見出し要素など）にスタイルを指定する
閲覧が想定されるブラウザで、概ね期待通りの見栄えになっているかを確認する

このようにして、完成へと近づけていくのではないでしょうか。

HTML テンプレートスキンを使う

レンタルサーバでウェブサイトを作る場合などは、そのサービス元が、ある程度デザインが完成している HTML と CSS の HTML テンプレートスキンを提供していたりします。また、個人が HTML テンプレートスキンを作成して公開していたりします。これは一例ですが、ホームページ素材 > HTMLテンプレート – Yahoo!カテゴリからそうした HTML テンプレートスキンを探すことができます。

（2011/12/02 19:00 追記）ちょうど見つけましたが、 40 Beautiful Free HTML5 & CSS3 Templates のページでは HTML5 と CSS3 を使った HTML テンプレートスキンが紹介されています。なお、このようなものは単に HTML テンプレートと呼ばれたりもします。この記事内ではたまたま「HTML テンプレートスキン」と書いているだけで、これが正式な用語というわけではありません。（追記ここまで）

HTML テンプレートスキンは多くの場合、 HTML マークアップも CSS も完成した状態のものになっていて、利用者は具体的なコンテンツ（本文など）を記述するだけでウェブページを完成させることができます。

利用者は、自分が組み上げたいデザインの HTML テンプレートスキンを探して、それを利用することになりますね。

CSS フレームワークを使う

「HTML テンプレートスキン」というものを聞いたことがあっても、「CSS フレームワーク」を聞いたことがない人は多いかもしれません。「CSS フレームワーク」などとウェブ検索すると、現在はどうやら具体的な CSS フレームワークの紹介ページがヒットするようです。

まず「フレームワーク」という言葉もよく分からないという人がいるかもしれませんね。 Yahoo! Japan で辞書検索してみると次のように説明されていました。

フレームワーク【framework】

枠組み。骨組み。組織。体制。「企業間協力の―をつくる」

フレームワークという語は「枠組み」や「骨組み」という意味の一般的な言葉なのですね。もちろんコンピュータ・プログラミング用語としての語でもあるのですが、それも「枠組み」といった意味を持っているはずです。ところで「ライブラリ」という言葉は聞いたことがあるでしょうか。 Yahoo! Japan で辞書検索すると次のような説明がありました。

ライブラリー【library】

［4］プログラミングに使用するさまざまなモジュールを収めたファイル。

一般的には「図書館」という意味なので、ここでは複数ある意味のうち、プログラミングに関する説明を抜粋しました。モジュールという語が説明に含まれてしまっていてよく分かりません。モジュールについても Yahoo! Japan で辞書検索してみましょう。

モジュール【module】

３電気機器やコンピューター装置などの、構成要素の単位。独立の完成した機能をもち、交換や着脱が可能で、より大きなシステムに構成される。

簡単に説明し直すと、「フレームワーク」はプログラム（システム）全体の骨組みとして採用できるもので、建築物（家）を例にすると、家を建てるときに建築を依頼する業者として「木造建築が得意な A 社を採用する」か「鉄骨造建築が得意な B 社を採用する」かといったもので、木造の方がやりやすい家のデザインなどは A 社にお願いした方がスムーズに期待するデザインの家が建てられるわけですね。フレームワークを使わないことも選択肢としてはあり、それは建築でいうと「自分で家を建てる」というのに相当する感じでしょうか。

「ライブラリ」はプログラムの一部の処理を任せられる機構で、建築でいうと「木材の表面をきれいに削る設備（機能）」や「鉄骨を指定した長さに切る設備」といったものでしょうか。これはプログラミングの観点で例えているのですが、 CSS の観点でいうと、「10畳の部屋を作れる木材が組まれたセット」や「いろんな種類の素材をまとめた素材セット」という感じでしょうか。変に例を出してわかりにくくなっているかもしれません。話を戻しましょう。

CSS フレームワークの紹介

ウェブ検索をすると具体的な CSS フレームワークに関する記事がヒットすると書きましたが、実際に次のような記事があります。

これらのページでは 20 個から 30 個程度の CSS フレームワークが紹介されています。また、ここには掲載されていない CSS フレームワークが沢山存在していることでしょう。さて、ここまで説明をしていなかった CSS フレームワークとはどのようなものなのでしょうか。

CSS フレームワークは、その多くのものに「グリッドレイアウトを実現する」といった説明が付いています。そのような CSS フレームワークを採用すると何ができるのかについては具体例を見たほうが分かりやすいでしょう。

BlueTrip という CSS フレームワークで簡単なサンプルページを作成してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>BlueTrip Sample</title>
<link rel="stylesheet" href="lib/css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="lib/css/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="lib/css/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="lib/css/style.css" type="text/css" media="screen, projection">
<style>
.container { background: #eee; }
#header    { background: #fcc; }
#content   { background: #ff9; }
  #main    { background: #fcf; height: 400px; }
  #sidebar { background: #cfc; height: 400px; }
#footer    { background: #ccf; }
</style>
</head>
<body>
<div class="container">
  <div id="header" class="span-24">Header</div>

  <div id="content" class="span-24">
    <div id="main" class="span-20">Main</div>
    <div id="sidebar" class="span-4 last">Sidebar</div>
  </div>

  <div id="footer" class="span-24">Footer</div>
</div>
</body>
</html>

33 行の HTML ですが、見やすいように色付けと、コンテンツの高さがあるような指定をした以外は、 CSS フレームワークの CSS を head 要素内で読み込んで、 body 要素内で class 属性を付けた div タグを記述しただけです。この HTML の表示結果は次のようになります。

BlueTrip はスタイル指定を行ったグリッドレイアウト用の class 属性や id 属性を用意しており、利用者は HTML タグと用意された属性を記述するだけで、段組レイアウトを組むことができます。これがグリッドレイアウトを実現する CSS フレームワークの正体です。

CSS フレームワークと呼ばれているものの中でも YUI という Yahoo! の有名なものがあります。 YUI は “Yahoo! User Interface Library” の略称で CSS だけのライブラリではないですが、 CSS のライブラリを含んでおり、それが CSS フレームワークに相当するものになっています。

YUI は現在 2.x 系と 3.x 系のバージョンが公開されていますが、 YUI 2 の方を見てみることにします。このページには “YUI 2 CSS Tools” という項目があり、

CSS Reset
CSS Base
CSS Fonts
CSS Grids

と、 4 種類の CSS が提供されています。これはそれぞれ、

CSS Reset : デフォルトブラウザのスタイル指定を打ち消すもの
CSS Base : 基本的なスタイル指定を行うもの
CSS Fonts : フォントに関する基本的なスタイル指定を行うもの
CSS Grids : グリッドレイアウトのための class, id 属性を用意するスタイル指定

のような内容のようです。 CSS フレームワークと呼ばれるものは、 YUI でいう Reset, Base, Fonts, Grids のようなもののいずれか、あるいは複数を実現するための CSS であるという認識で良いでしょう。また、この 4 種に限らず、例えば、印刷時にも好ましい構成で印刷できるように考慮された「グリッドレイアウトを実現する CSS フレームワーク」や、複数の PC ブラウザに加えてスマートフォンでの表示も考慮した「グリッドレイアウトを実現する CSS フレームワーク」などもあるようです。

CSS ありきの HTML を書いてしまう（要素に付与される class/id 属性が、文書構造を表さないものだらけになってしまう）ということは好ましくないという声もありますが、 CSS やその周辺の知識なしにウェブページを作成しなければならないという場合や、 CMS などのための汎用的なテンプレートを作る目的で（グリッドレイアウトのための） CSS フレームワークを採用するというのは選択肢としてはありかと思います。

しかし CSS ありきの HTML を書かざるをえないという制約がデメリットになるようであれば、そのような CSS フレームワークを使ってウェブページを作るという考えを改めたほうがよいかもしれません。

メタ CSS 言語

ここまで LESS や Sass の話が出てきませんでした。それは、 LESS や Sass は、ここまで話した CSS フレームワークとは異なるものだからです。

ここからは、 CSS には何を書くか、 CSS の仕様ではできないこと、それを補う「メタ CSS 言語」について説明していきます。

CSS の構成要素

CSS （というよりも css ファイル）に書くことのできるものを確認しておきましょう。また、用語の確認も併せてしておきます。

aaaa {    // 1
  bbbb {  // 2
          // 3
  }       // 4
}         // 5

波括弧 { と } で括られた範囲を「ブロック」と言います。ブロックは入れ子（ネスト）ができるため、 1 行目で始まったブロックは 4 行目では終わりません（ 2 行目で始まった 2 個目のブロックがここで終わります）。 CSS では、半角スペースや水平タブによるインデントは特に意味を持ちません。インデントの有無は CSS の記述内容に影響しません。

@import "css/style.css";

@media print {
  h1 { font-weight: bold; }
}

@xxxx の形で記述されるものを「@規則, at-rule」と言います。 @規則には、値だけが続くものと、ブロックが続くものがあります。

body #main .post h1,
body #main .entry h1 {
  margin: 20px 0;
  color: #f00;
  font-size: 200%;
}

a {
  color: #00f;
}

スタイルを書く一つのブロック全体を「規則集合, rule-set」と言います。

body #main .post h1,
body #main .entry h1 {
  margin: 20px 0;
  color: #f00;
  font-size: 200%;
}

開き波括弧の前の部分を「セレクタ, selector」と言います。カンマで区切られた一つひとつのことを「セレクタ」と言いますが、一つひとつのセレクタとそのカンマを併せた部分全体のことも「セレクタ」と呼ぶことがあり、区別されないことがしばしばあります。

body #main .post h1,
body #main .entry h1 {
  margin: 20px 0;
  color: #f00;
  font-size: 200%;
}

規則集合の中のブロック部分を「宣言ブロック, declaration-block」と言います。

body #main .post h1,
body #main .entry h1 {
  margin: 20px 0;
  color: #f00;
  font-size: 200%;
}

宣言ブロックの中で、xxx: のような部分がありますが、このコロンより前の部分を「プロパティ, property」と言います。

body #main .post h1,
body #main .entry h1 {
  margin: 20px 0;
  color: #f00;
  font-size: 200%;
}

プロパティ（とコロン）に後続し、セミコロンが現れるまでの部分を「値, value」と言います。セミコロンが現れるまでと言っても、 content: “a ; b”; のような文字列中でのセミコロンはこれに該当しません。

body #main .post h1,
body #main .entry h1 {
  margin: 20px 0;
  color: #f00;
  font-size: 200%;
}

プロパティ（とコロン）と値の括りを「宣言, declaration」と言います。

CSS の仕様ではできないこと

CSS は 1996 年に CSS level 1 が、 1998 年に level 2 が、そして今年 2011 年に level 2.1 が仕様勧告となりました。現在では CSS level 3 の一部が勧告されていたり、仕様策定が進められています。そんな CSS ですが、 2011 年現在の仕様（そして、それを基にした各種ブラウザの実装）では、宣言ブロックのネストができません。ブロック自体にはネストという概念がありますが、宣言ブロックでネストができるという仕様にはなっていません。このため、例えば “body #main … h1″ と “body #main … h2″ にスタイルを与えたいと思ったら、”body #main …” の部分を何度も書かなければなりません。

また、プログラミング言語で当然のように使える「変数」や「関数」、また「 if 文や for 文のような制御構造」が一切使えません。これはもともと CSS の仕様ではそのようなことができなくて良い、と考えられていたことに因るものですが、 CSS でセレクタのネストや変数、関数などが使えたらどんなに便利でしょうか。

CSS のメタ言語を使う

CSS という言語仕様でネストや変数などが使えないのであれば、別のプログラミング言語などで CSS を書きだすプログラム（スクリプト）を作成してしまえ、という考えが生まれます。特定の言語のコードを書きだすようなプログラミングをすることを「メタプログラミング」と言います。それに使う言語を「メタ言語」と言います。

具体的には、 Perl や PHP あるいは JavaScript （何でも良い）など、テキスト処理ができるものを用いて、ネストなどを含めた CSS のような記法で書いたものをパースし、その結果として（ネストしていた部分などが展開された） CSS を得られるようにするということです。

しかし、ネストを可能にしたり、変数や関数を使えるようにしたり、制御構造を使えるようにしておきながら CSS のような記法で書かれた文書をうまく処理するようなプログラムなり言語を用意することは容易ではありません。そのため、 CSS のメタ言語は CSS に慣れ親しんでいる人にとっては扱いづらい、プログラマのための独自スクリプトのようなものでしかありませんでした。普段プログラムを書かないような人が使いこなせる代物ではなかったということです。

#main
  :color blue
  :font-size 0.3em

  a
    :font
      :weight bold
      :family serif
    &:hover
      :background-color #eee

とメタ言語で書いておき、これを CSS に変換すると

#main {
  color: blue;
  font-size: 0.3em;
}
#main a {
  font-weight: bold;
  font-family: serif;
}
#main a:hover {
  background-color: #eee;
}

このような CSS が得られるといったものでした。ネストができたりと、 CSS の文法を拡張できていて便利なことは便利なのですが、メタ言語での記述が独自の記法で CSS とはかけ離れているため、なかなか使おうという気になるものではありません。

Sass 3 系の登場

朗報です。 CSS に似た記法の CSS メタ言語がついに登場しました。 Sass （「サス」と読む）のバージョン 3.0 から対応した SCSS という形式の文法は、 CSS に対して互換性を持っています。先ほど示したメタ言語は、まるで CSS ではありませんでした（インデントで構造を表す必要があったりした）が、 SCSS の記法は次のようなものです。

#main {
  color: blue;
  font-size: 0.3em;

  a {
    font: {
      weight: bold;
      family: serif;
    }
    &:hover {
      background-color: #eee;
    }
  }
}

まさに期待していた文法です。 CSS と同じ（インデントは可読性を向上させるだけで内容的には意味はなく、ブロックで宣言ブロックを作るといった）文法でネストができたり、この例でも出ていますが、ネストされたブロック内で & と書くことで、その部分をネストした親のセレクタを参照できたりします。

更に喜ぶべきことに、先ほど欲しいと言っていた拡張記法にとどまらず、「そんなことまでできてしまうのか！」というような文法、あるいは CSS 変換時の変換オプションなどが用意されています。

Sass 3 系と書きましたが、 Sass には 2 系以前があり、それは SCSS 記法ではなく Sass 記法というものしか扱えませんでした（ひとつ前のセクションの末尾に示したメタ言語の例が実は Sass 記法でした）。なお、 Sass 3 系では SCSS 記法の他に Sass 記法も使え、 3 系の Sass 記法は 2 系のそれよりも文法が拡張されています。

Sass 3.0 は2010年5月10日にリリースされました。 Haml/Sass 3 Released! – Haml | Google グループ

最新バージョンの Sass を使うとどんなことができてしまうのかについては、この Advent Calendar 1日目の記事にもある程度書かれています（ここに書かれていないもっと便利な機能などもあるはずです）。 Sass の機能についてもっと詳しく示したかったのですが、諸事情によりこのエントリーではそれを示すことができなそうなので、それは明日以降の Advent Calendar に期待しましょう。

他のメタ CSS 言語

SCSS 記法の Sass に並ぶ文法を持つメタ言語に LESS （「レス」と読む）があります。 LESS の起源などを詳しく知ることができていないのですが、 Sass の後継（2系に対しての後継か？）であり、 Sass とは少し違った特長を持つメタ言語です。 LESS も CSS に対して互換性があり、 SCSS を扱うのと同じくらい使いやすいものになっています。 Sass と LESS の違いについては諸事情によりこのエントリーでは（以下略）なのですが、後続の Advent Calendar に期待するか、機会があれば後日記事を書きたいと思います。

Sass と LESS 以外のものとしては、ちょうど半月ほど前に Closure Stylesheets （このリンクは SourceForge での紹介記事です）が公開されました。これがどういうものかはあまり詳しくありませんが、メタ CSS 言語も様々なものが誕生し進化しているということですね。

（2011/12/02 19:00 追記）この記事で LESS と呼んでいるものはメタ言語としての LESS です。というのも、前述した CSS フレームワークにも Less Framework があるのです。全く別物なのにたまたま同じ名前が付いていることがありますので、その文脈で示すその名前が何を指しているのかについて間違えないようにしましょう。余談ですが、 Haml (HTML Abstraction Markup Language) や YAML (YAML Ain’t a Markup Language, — 当初は Yet Another Markup Language) という言語がありますが、 CSS フレームワークの中にも YAML (Yet Another Multicolumn Layout) というものがありました。（追記ここまで）

終わりに

Sass や LESS というものが「メタ CSS 言語」であり、それがどのように便利か、誰の役に立ちそうなものなのかが分かって頂けたでしょうか。「CSS フレームワーク」とは目的や用途が別であり、それと比較するようなものではありません。メタ CSS 言語は、「HTML も CSS も自分で書く」というときに、 CSS の記述・保守という点で生産性を上げるツールです。そして SCSS 記法の Sass や LESS は、その文法が CSS に対して非常に親和性が高く、メタ言語の学習コストが低いということが利点となっています。

普段 CSS をそれなりに書いたりしていて、 CSS フレームワークやメタ CSS 言語など CSS に関連するものの動向をあまり知らなかったという人は、このあたりの最近の事情を追ってみるのも面白いかもしれませんね。

Less & Sass Advent calendar 2011

debilog

CSSとフレームワークとメタ言語