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

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

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

[岡本紳吾,hatte.Inc]

コードを再利用して爆捗!

 本連載「爆捗! WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」(以下、Dreamweaver)でWordPressのテーマをカスタマイズできるようにする設定の方法を紹介。第2回の「WordPress初心者でも爆捗! テンプレートカスタマイズ&ショートコード作成超入門」でWordPressの内部構造、Dreamweaverを使ったテンプレートのカスタマイズ方法、ショートコードの作り方について解説した。

 第3回の「CSSコーディングで泣かないためのSassの基礎知識と10の利点」では、さらなる爆捗のために、「Sass」についての概略を解説した。第4回の前回「いまさら聞けないSassの使い方入門―― インストールとコマンド、Dreamweaver連携」では、Sassの実践として、Sassのインストール方法とコマンドの使い方、Dreamweaverとの連携、WordPressのテンプレート作成におけるSassの有効な使い方について解説した。

 Sassを利用してCSSが作れるようになってくると、ミックスインやインポートでよく使うコードを再利用するようになってくるだろう。例えば、ブラウザーで定義されるスタイルをリセットしたり、古いInternet Explorerでpngを使えるようにしたり、ベンダープレフィックスを簡単に入力できるようにしたりできるからだ。

 このような再利用するコードは自分で作ってもいいのだが、すでにさまざまなところでコードが配布されている。これからSassを利用するなら、この配布されているコードを利用しない手はないだろう。

 そして、今回紹介する「Compass」を利用すると、よく使うミックスインがすでに用意されているので、わざわざ探しに行く必要がないばかりか、Sassのコーディングを協力に後押ししてくれる機能が満載になっている。これまでの連載でSassについてある程度理解しているなら、Compassの機能のすごさを実感できるはずだ。

 今回はCompassで何ができるのかや、インストールの仕方、使い方、ベンダープレフィックス対応やCSSスプライト機能など、CSSコーディングを爆発的にはかどらせる機能を紹介する。

Sassをさらに爆捗させるCSSフレームワーク、Compassとは

 Compassはオープンソースで作られているCSSフレームワークだ。フレームワークといわれると「学習コストが掛かる……」と少し身構えてしまうかもしれないが、フレームワークは大体の場合において「少し勉強すれば、それ以上のアウトプットが得られる、生産性が爆発的に上がる」設計になっているものなので、ここはひとつ我慢してさまざまな機能に触れてみてほしい。CompassはCSSの生成にSassを利用している。

dreWP5_01.jpg Compass

Compassの主な機能

 以下は、主な機能だ。

  1. CSSの記述において、ベンダープレフィックスなどの複雑なCSSを簡単に書くことができる(本稿で解説)
  2. CSSスプライト画像も簡単に作ることができる(本稿で解説)
  3. 全てのCSSはきれいにマークアップされ、開発者ごとのクセも吸収される
  4. 機能拡張もできるようになっている(次回で解説)


GUIもある

 Compassはコマンドで使う方法と、GUIで使う方法の2種類がある。GUIは有償で10ドルで提供されている。CompassのGUIアプリケーションはそれほど多機能であるわけでもないため、10ドル支払う価値があるかどうか(実際に筆者は購入して利用してみたのだが)微妙なところであった。

 もし、GUIでCompassを利用していきたい場合は、さまざまなサイトでも評価の高い「Codekit」をオススメしたい。ただし、Mac専用だ(そして28ドルと少々値が張る)。

Compassのインストール

 CompassはSassと同じくRubyで書かれているので、Rubyのインストールが必要だ。Rubyのインストールについては、前回のSassのインストール時にも触れたので、参照してほしい。

 インストールはgemコマンドを使って行うことができるが、GUI版を購入した場合はCompassのアプリケーションをダウンロードしてインストールするだけだ。コマンドでインストールする場合は以下を入力する

gem install compass

 Macの場合はsudoする必要があるだろう。

dreWP5_02.jpg Compassをインストールした直後の画面

Compassの基本的な使い方

Compassプロジェクトの新規作成

 Compassを使うには、まずプロジェクトを新規作成する。

compass create {projectname}

 今回はいろいろと機能を見るだけなので、「compasstest」というプロジェクトを作成した。あらかじめプロジェクトを作成するフォルダーに移動して、プロジェクトを作ろう。

compass create compassproject

 すると、幾つかのファイルが作られてプロジェクトが作成される。

dreWP5_03.jpg

Compassプロジェクトの設定

 これでscssファイルを編集していき、cssファイルを生成していく形で作業を進めていく。Sassのコマンドを入力する必要はない(もちろん、Sassのコマンドでcssを作ることも可能だが、Compassのミックスインなどが利用できないので意味がない)。

 「config.rb」を編集すると、さまざまな設定を行うことができる。

dreWP5_04.jpg

 デフォルトは4〜8行目の設定だが、筆者は12行目と15行目の設定を追加している。「output_style」はCSSの出力フォーマットの設定で、「relative_assets」は読み込む画像などのアセットのパスを絶対パスで表記するか相対パスで表記するかの設定だ。

 必要に応じて変更するといいだろう。設定ファイルはRubyで書かれているが、単にイコールでつながれた文なので、Ruby未経験でも大丈夫だ。

watchコマンドで自動変換できるように

 今回はscssを随時cssに変換してほしいので、Compassにファイルを監視させて自動変換させるようにしてみた。監視させるには以下のようにコマンドを入力する。

compass watch
dreWP5_05.jpg
       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

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

メールマガジン登録

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