連載
» 2014年02月25日 18時00分 公開

爆捗! WordPressテーマ作成ショートカット(5):知って得するSass/Compassのインストールと使い方 (2/2)

[岡本紳吾,hatte.Inc]
前のページへ 1|2       

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からダウンロードできる


岡本 紳吾(おかもと しんご)

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


前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。