検索
連載

知って得するSass/Compassのインストールと使い方：爆捗！ WordPressテーマ作成ショートカット（5）（2/2 ページ）

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、SassベースのCSSフレームワーク「Compass」について、概要や使い方に加え、ベンダープレフィックスを書く必要がなくなる、画像をフォルダに置くだけでCSSスプライトを生成できるなどの利点も紹介。

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

Compassのインポート

　CompassはSassを利用しているので、Compassを利用するときは@importを使ってさまざまな機能を追加していく形になる。テスト用のscssを用意していろいろ試してみることにする。テスト用scssは「test.scss」とした。

　Compassを利用するときはまず、コアとなるフレームワークを読み込む必要がある。

@import "compass";

　これでCompassのCSS3、Typography、Utilitiesの3つの機能が利用できるようになる。もし、CSS3だけにしたい場合は以下のように記述すればOKだ。

@import "compass/css3";

　さて、これから.scssを書いていくのだが、Compassを利用する場合、CompassでサポートしているCSSはできるだけCompassの機能をインポートして使った方がよい。CSS3でCompassがサポートしているのは以下の20の機能だ。

  1. Appearance - Specify the CSS3 appearance property.
  2. Background Clip - Specify the background clip for all browsers.
  3. Background Origin - Specify the background origin for all browsers.
  4. Background Size - Specify the background size for all browsers.
  5. Border Radius - Specify the border radius for all browsers.
  6. Box - This module provides mixins that pertain to the CSS3 Flexible Box.
  7. Box Shadow - Specify the box shadow for all browsers.
  8. Box Sizing - Specify the box sizing for all browsers.
  9. Columns - Specify a columnar layout for all browsers.
  10. Filter - Specify the (image) filter for all browsers.
  11. Font Face - Specify a downloadable font face for all browsers.
  12. Hyphenation - Mixin for breaking space and injecting hypens into overflowing text
  13. Images - Specify linear gradients and radial gradients for many browsers.
  14. Inline Block - Declare an element inline block for all browsers.
  15. Opacity - Specify the opacity for all browsers.
  16. CSS Regions - Specify CSS Regions for supported browsers.
  17. Text Shadow - Specify the text shadow for all browsers.
  18. Transform - Specify transformations for many browsers.
  19. Transition - Specify a style transition for all browsers.
  20. User Interface - Declare an element inline block for all browsers.

　以下、Compassを使うと何が便利になのか、実際のコードとともに解説する。

【利点1】ベンダープレフィックスを書く必要がなくなる

　取りあえず、以下のように.scssを書いてみよう。

div{
     @include inline-block;
     @include border-radius(4px, 4px);
     @include opacity(.7);
}
.scss

　そして、これが変換後のCSSだ。

div {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-border-radius: 4px 4px;
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.css

　実際に書いていくと非常に面倒な各ブラウザーへの対応（ベンダープレフィックス）がまとめ記述されていることが分かる。

【利点2】画像をフォルダーに置くだけでCSSスプライトを生成

　Compassの機能で忘れてはならないのが、「CSSスプライト」の作成機能だ。CSSスプライトは細かい画像などは1枚にまとめてしまって、CSSで表示位置をコントロールすることだ。

　もともとは大規模なサイトでサーバーへのリクエストを削減し、負荷を下げる目的で実装され始めたのだが、マウスオーバーで画像を変化させる際にも有用なため、よく用いられるようになった。

　ところが、CSSスプライトを作成するのは少々骨の折れる作業で、Photoshopを自動化させたり、外部のサービスを利用したり（これは秘密保持契約的に大丈夫なのかと心配になるが）と、制作者はさまざまな工夫を凝らして対応していた。ちなみに、筆者はCSSスプライト化したいアセットをFireworksでチマチマとつないでいた。

　CompassでCSSスプライトを作成するには、「images」フォルダー内にCSSスプライトにしたい画像が入っているフォルダーを作り、指定するだけだ。そして、.scssには以下のように記述する。フォルダーにはあらかじめ、「cm.png」「interview.png」「making.png」というファイルを置いた。

@import "cm/*.png";
@include all-cm-sprites;
.scss

　すると、以下のような.cssに変換される。

.cm-sprite, .cm-cm, .cm-interview, .cm-making {
  background: url('/images/cm-sfe45056dd2.png') no-repeat;
}
.cm-cm {
  background-position: 0 -80px;
}
.cm-interview {
  background-position: 0 -40px;
}
.cm-making {
  background-position: 0 0;
}
.css

　パーツが統合された画像が生成され、それに応じたcssが出力された。

【利点3】CSSスプライトの:hover対応は画像ファイル名を変えるだけ

　マウスオーバーで画像を変えたい場合、CSSでは「:hover」を利用するのだが、Compassを利用すると、以下のように劇的に簡単になる。

　まず、:hover用の画像のファイル名には_hoverを付けておく。「cm.png」「interview.png」「making.png」に対して「cm_hover.png」「interview_hover.png」「making_hover.png」という感じだ。

　.scssは先ほどのものを変更しなくても大丈夫だ。再度.cssに変換すると、画像のファイル名を変えるだけで、画像ファイルが再生成され、:hoverの内容が追記された。

.cm-sprite, .cm-cm, .cm-interview, .cm-making {
  background: url('../images/cm-sb41e152bfe.png') no-repeat;
}
.cm-cm {
  background-position: 0 -200px;
}
.cm-cm:hover, .cm-cm.cm_hover, .cm-cm.cm-hover {
  background-position: 0 -80px;
}
.cm-interview {
  background-position: 0 -160px;
}
.cm-interview:hover, .cm-interview.interview_hover, .cm-interview.interview-hover {
  background-position: 0 -40px;
}
.cm-making {
  background-position: 0 -120px;
}
.cm-making:hover, .cm-making.making_hover, .cm-making.making-hover {
  background-position: 0 0;
}
.css

【利点4】CSSスプライトの作り方は、柔軟に変えられる

　CSSスプライトの生成にも幾つかのオプションがあり、並び方を変更できるようになっている。また、クラス名を自分で命名したり、CSSスプライトを手動で生成することも可能になっている。

　これはCSSスプライトの利用の仕方に、それぞれのユーザーの思惑があり、それに柔軟に対応できるようにしたためだろうと考えられる。

次回は、Compassを使ってWordPressテーマ作成を爆捗！

　筆者は、このCSSスプライトの機能だけでもCompassを利用する価値があると思っている。この機能はコーダーはもちろんだが、デザイナーの負担軽減も期待できるからだ。運用時はそれぞれの作業範囲を見た上で、Compassを適切に利用していくようにするといいだろう。

　今回はCompassの機能をざっと紹介した。次回はCompassを実践で利用していくことにしよう。

サンプルのダウンロード

　本稿で紹介したscssファイルと変換したcssファイルを、GitHubに置いておいたので、どのように展開されているかを確認してみてほしい。本連載で作成したサンプルのコードやファイルは全てGitHubからダウンロードできる。

「次回」へ


「爆捗！ WordPressテーマ作成ショートカット」バックナンバー

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る