CSSコーディングでいますぐ使えるSass／Compass実践テク10連発！：爆捗！ WordPressテーマ作成ショートカット（6）（3/3 ページ）
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、Compassの「設定変数」やCSSスプライト、CSS3 Media Queries（メディアクエリ）やミックスインの共有などに関する小技を紹介する。
【8】CSSスプライトを手動設定したい
CSSスプライトを自動ではなく手動で生成する方法もある。画像自体は作ってほしいが、「background-position」は自分で設定したいというようなときに利用できる。これは、CSSスプライトを生成するコマンドのみを実行させて、結果を変数に入れるという方法で実現できる。
スプライトのみの生成には、下記のように設定する。
$｛変数｝ = sprite-map(｛スプライト名｝)
CSSスプライトに内包されている画像の位置を取得する方法もある。それには、まず下記でCSSスプライトの情報を取得する
@include sprite-dimensions($｛変数｝,｛パーツ名｝);
そして、下記で出力できる。
sprite-position($｛変数｝,｛パーツ名｝);
これらをまとめると下記のようになる。
$cm: sprite-map("cm/*.png");
.bg-interview{
background:$cm;
@include sprite-dimensions($cm,interview);
background-position: sprite-position($cm,interview);
}
書き出し結果は下記だ。
.bg-interview {
background: url('../images/cm-s532df9a30b.png');
height: 40px;
width: 249px;
background-position: 0 -160px;
}
手動設定といっても変数をうまく使えるので、生成された画像をわざわざPhotoshopなどの定規で測らなくても大丈夫だ。
【9】CSS3 Media Queriesを簡単に作りたい
Compassは、複雑なCSSをSassを使って簡単に記述していくことを目的として作成されたものだが、CSS3の中でもとりわけ面倒な「Media Queries」（メディアクエリ）を簡単に作る機能がない。
これについては有用なミックスイン「SCSS Media Queries Mixins」を作っている方がいたので、紹介しておきたい。日本語で書かれているのでお試し拡張としても有用だ。
上記「SCSS Media Queries Mixins」のGitHubの「scss」フォルダーに入っている「_media_queries.scss」をダウンロードして、「@import "media_queries"」する。そして、必要に応じて@include文でMedia Queriesを設定する。
例えばPC用、タブレット用、スマホ用で下記のように設定するとしよう。
.test{
@include mq_desktop('modern'){
width:1000px;
}
@include mq_mobile('portrait','old')
{
width:320px;
}
@include mq_tablet('portrait','old')
{
width:768px;
}
}
すると、下記のように変換される。
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
.test {
width: 1000px;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-webkit-max-device-pixel-ratio: 1) {
.test {
width: 320px;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-moz-max-device-pixel-ratio: 1) {
.test {
width: 320px;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-o-max-device-pixel-ratio: 2 / 2) {
.test {
width: 320px;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-ms-max-device-pixel-ratio: 1) {
.test {
width: 320px;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) and (max-device-pixel-ratio: 1) {
.test {
width: 320px;
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (-webkit-max-device-pixel-ratio: 1) {
.test {
width: 768px;
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (-moz-max-device-pixel-ratio: 1) {
.test {
width: 768px;
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (-o-max-device-pixel-ratio: 2 / 2) {
.test {
width: 768px;
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (-ms-max-device-pixel-ratio: 1) {
.test {
width: 768px;
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) and (max-device-pixel-ratio: 1) {
.test {
width: 768px;
}
}
このように、手打ちはもちろんだが、コピーペーストでもなかなか骨の折れる作業になるのが分かる。これが、ミックスイン一つで拡張できた。
【10】チーム内でSassのミックスインを共有したい
チームで作業をしている場合、例えば「リセットは、このミックスインを使いましょう」といった形で、ミックスインなどの共有が行われるようになるだろう。その場合、Compassでは共有用のフォルダーを追加フォルダーとして指定することで、利用できるようになっている。
それには、Compassの設定ファイルである「config.rb」をテキストエディターで開いて下記の設定を入力する。
additional_import_paths = ['｛パス1｝','｛パス2｝',……]
｛パス1｝｛パス2｝……の部分は適宜書き換えてほしい。パスは複数設定できるようになっている。全体で共有しているものと、プロジェクトで共有しているものなど、必要に応じて設定を切り替えるといいだろう。
なお前項の「【1】CompassをGUIアプリで利用したい」で紹介したCodekitなどでは、この設定をGUI上から行えるようになっている。
次回は、Emmet（旧、Zen-Coding）で爆捗！
今回は、さまざまなCompassの使い方を紹介したが、いかがだっただろうか。その他設定についてはCompassの公式リファレンスを参考にしてほしい。
さて、今回までの連載で、WordPressのテーマ作成を、Dreamweaverをメインに用いてSassやCompassと組み合わせながら爆発的にはかどらせる方法を解説してきた。次回は、これらに加えて「Emmet」（旧、Zen-Coding）を使って、WordPressのテーマ作成をさらに爆捗させる方法を解説する予定だ。
Copyright © ITmedia, Inc. All Rights Reserved.
関連記事
無料でCreative Cloudを使い倒せ（1）：レスポンシブWebデザインから実機検証までサクッと
無料で使える範囲でCreative Cloudを使い倒そう。レスポンシブWebサイトの作成から実機検証までサクッとやる方法を紹介する
無料でCreative Cloudを使い倒せ（16）：予備知識なしでCSS3アニメーションが捗る「CSSトランジション」機能なら、ここまでできる！
誰でもCSS3アニメーションが作れるDreamweaverの「CSSトランジション」機能について、概要や基本機能、使いどころなどを解説する。
無料でCreative Cloudを使い倒せ（17）：Web屋が知らないと残念過ぎるDreamweaver拡張機能のインストールと変換、管理
Dreamweaverの拡張機能の使い方や管理の仕方、便利な拡張機能、旧式のファイルからの変換方法、そしてAdobe Exchange／Extension Managerを紹介する。- HTML制作が3倍速くなるDreamweaverの裏技
CSS Niteでおなじみの鷹野さんが、新人Web担当者向けに知って得するDreamweaver裏技を教えます。 
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック
CSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？