CSSプロパティを任意の順番に並べ替えてくれるCSScombをIntelliJ IDEAで使う

もう10日ですが、一応あけましておめでとうございます。沖です。

というわけでタイトル通りですが、CSScombって何?という人はこのあたりをご覧いただければと思います。かんたんに言うとCSSファイル内のプロパティを、あらかじめ設定したとおりの順番に一発で並べ替えてくれるツールです。

CSScombとは、どんなものか

具体的には、以下のようなCSSがあるとします。

#hoge {
	height: 480px;
	padding: 5px;
	width: 640px;
	margin: 10px;
}

これでも問題ないといえば問題ないのですが、プロパティの順番がぐちゃぐちゃで読みづらいですよね。そこで、このCSSに対してCSScombを実行すると、以下のようなコードに変換してくれます。

#hoge {
	width: 640px;
	height: 480px;
	margin: 10px;
	padding: 5px;
}

あらスッキリ! もちろん、順番については設定で好みの順番にできます。width/heightよりもmargin/paddingが先の方がいいなーという人は、あらかじめ設定を変更しておけばOKです。

これにより、自分の好みの順番に楽に並べ替えられるという利点もありますが、より役立つと考えられるのは、受託案件でのコーディングです。制作会社にもよりますが、プロパティの順番を指定したガイドラインなどを用意しているケースがあるため、このような時にプロジェクトごとにカスタマイズしたCSScombを用意しておけば、いつでも一発で指定の順番に並べ替えることができます。他の案件で書いたCSSを流用するのも楽になることでしょう。

Web上で実行できるツールもありますが、各種IDE向けにツールが提供されているので自分の使っているIDEに合わせてダウンロードして使うのがベターです。私はふだんHTML/CSS/JavaScript(その他もろもろも含めて)のコーディングにはIntelliJ IDEAを使っているので、その手順を紹介します。

実行環境

私の環境はこんな感じです。CSScombは、同じJetBrains製品のWebStormやPhpStromなどと同じものが使えるようです。また、Windows環境でPHPを実行するためにあらかじめXAMPPをインストールしてあります。未インストールの人はググってください。

  • Windows 7 Professional 64bit SP1
  • IntelliJ IDEA 12.0.1
  • CSScomb for IntelliJIDEA/WebStorm/PyCharm(csscomb_for_webstorm-pycharm-idea_2-12-1301091503.zip)
  • XAMPP 1.7.1

インストール手順

1.まず、CSScombをダウンロードし、ファイル一式を任意の場所に置きます。srcフォルダやpluginフォルダなどの中に一式が入っていますが、ツールの実体(csscomb.php)以外は無くても構いません。ずっと保存しておく必要があるので、分かりやすい場所に置いておくといいでしょう。

20130110a.png

2.IntelliJ IDEAを起動し、File -> Settingsを開きます。

3.Settingsダイアログが開きます。左のメニューからExternal Toolsを選び、+アイコンをクリックします。

20130110b.png

4.Edit Toolダイアログが開きます。Name、Descriptionなどは適当に付けておきます。ここで大事なのはShow InのMain menuにチェックを入れることと、Tool Settingsでそれぞれ以下のように設定することです。設定ができたらOKボタンをクリックします。

  • Program
    実行するプログラムを指定します。ここではXAMMPでのデフォルトインストール先にあるPHPを指定しています。
  • Parameters
    Programで実行する際のパラメータを指定します。ここでは1.の手順でダウンロードしたcsscomb.phpを実行します。さらに半角スペースを挟んで「$FilePath$」と指定することで、開いているファイルに対してCSScombを実行できます。csscomb.phpのパス内に半角スペースが混ざってもよいようにダブルクオーテーションで囲んでいます。
  • Working directory
    作業ディレクトリを指定します。ここではcsscomb.phpを置いているパスを指定します。

20130110c.png

5.ToolsメニューにCSScombが追加され、選ぶことで開いているCSSに対してCSScombが実行されます。おつかれさまでした。

20130110d.png

ちなみにIntelliJ IDEAでは任意のメニューにショートカットキーを割り振ることができるので、適当なキーを割り当てておくと楽チンです。それでは、よきCSScombライフを!

よろしければコメントをどうぞ!

匿名希望のコメントはこちらへ

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://448.jp/cgi-bin/mt/bnq48cke.cgi/1432
Listed below are links to weblogs that reference
CSSプロパティを任意の順番に並べ替えてくれるCSScombをIntelliJ IDEAで使う from 448.jp blog

この記事はいかがでしたか?

ぜひ共有してみてください。あなたのフィードバックが、私のモチベーションにつながります。

×