誰もがCSSを知っているわけではありません。知っている人もいれば、知らない人もいます。しかし、CSSファイルを参照するドキュメントの書き方については、多くの人が知っています。

MacRabbit のCSSEdit は、CSS の達人からあまり詳しくない人まで、あらゆる人にとって素晴らしい編集ツールです。

[このレビューはRajによって書かれました。Rajはアメリカ出身のグラフィック＆ウェブデザイナーで、もちろんMacユーザーです。Twitterで連絡を取るか、彼のウェブサイトをご覧ください。ウェブサイトでは彼がデザインした素敵なアイコンもご覧いただけます。]

CSSEdit を開くと、空白のスタイルシートが表示されます。CSSEdit のツールバーには、いくつかの重要な機能があります。

-新しいスタイル

-新しいグループ

-新しいコメント

-新しいセレクター

-検索

-輸出

-プレビュー

-マイルストーン

-検証

これらを組み合わせることで、CSSEdit はボタンをクリックするだけですべてが操作できる非常にユーザーフレンドリーなツールになります。ツールバーが読み込まれます。

新しいスタイル

新しいスタイルを追加する方法です。セレクターはビジュアルで追加することも、自分で入力することもできます。ビジュアルセレクタービルダーは非常によくできており、任意の深さのセレクターを簡単に追加できます。私はあまり使いませんが（手作業でコーディングしているので）、CSSに精通していない人には便利です。

新しいグループ

CSSEditで一番気に入っている機能はグループです。aloe studiosに、グループの使い方を詳しく説明した素晴らしい記事があります。基本的に、これはスタイルを整理するためのもので、サイドバーの左側にフォルダベースのグラフィカルなレイアウトで表示できます。とても便利です。

新しいコメント

これは、/*comment*/ 表記を使用して新しいコメントを追加するだけです。

新しいセレクター

このボタンは、前述のようにセレクター ビルダーをトリガーします。

検索

スタイルシート全体を簡単に検索できるので、大きなスタイルシートを扱うときに非常に便利です。

輸出

これにより、<link> タグを使って HTML ファイルにスタイルシートを適用できるようになります。これも便利なトリックです。

プレビュー

プレビューはCSSEditの最大の機能の一つです。HTMLやその他のウェブページ内でCSSファイルを参照している場合、プレビュー機能を使って開くことができます。このウィンドウでは、リロードすることなく適用されたスタイルを確認できます。もちろん、リアルタイムで確認でき、非常に直感的でシンプルです。CSSに変更を加えると（保存する必要はありません）、ライブプレビューで即座に結果を確認できます。ライブプレビューウィンドウでは、サイトURLの追加、X線機能の有効化、インスペクターの起動、適用されたスタイルシートの確認、そして最後にオーバーライドの有効化と管理が可能です。

X線

CSSEditには、ウェブページの特定の領域に適用されているスタイルを確認するためのX線表示機能があります。X線表示をオンにしてクリックするだけで、ロケーションバーがパンくずリストに変わり、各要素のネストと名前が表示されます。これはどのURLでも機能します。

検査官

インスペクターはX-rayをさらに進化させ、スタイルが適用されている箇所を確認できるだけでなく、スタイル自体の表示と編集も行えます。ただし、このウィンドウは非常に小さく、簡単な情報の確認にしか使えません。私はメインパネルでCSSを編集するのが好きです。

オーバーライド

CSSEditのオーバーライド機能が大好きです。基本的に、リモートURLにローカルスタイルシートを指定できる機能です。例えば、ライブプレビューウィンドウにTumblrを開いていて、（自分のサイトから参照されている）style.cssをローカルファイル「new.css」でオーバーライドしたとします。new.cssで編集した内容はすべてライブプレビューに即座に反映されます。これにより、反映された変更を確認するために何度もアップロードし直す必要がなくなります。これはおそらくCSSEditで一番好きな機能です。

検証

CSSEdit 検証

CSSEditには、スタイルシート用のW3C検証機能が組み込まれています。すべてのエラーは、すっきりと直感的なHUDスタイルのウィンドウに表示されます。

マイルストーン

マイルストーンはCSSの「バージョン」です。ソフトウェアのリリースノートのように、マイルストーンを使用すると、CSSを様々な時点で特定のメモ付きで保存できます。何か問題が発生した場合は、Command + Zを押し続ける必要はありません。マイルストーンを開いて、最後に保存したリビジョンを選択するだけです。困った時にとても便利です。

サイドバーの切り替え

サイドバーとメインペインのオン/オフを切り替えられます。コーディングの達人ではないけれどコードを非表示にしたい場合、あるいはコーディングの達人だけどGUIベースのエディタを非表示にしたい場合に便利です。

CSSEditでは、使いやすいサイドバーエディタを使ってスタイルを編集できます。値を入力するだけで必要なコードが挿入されます。iWorkのPagesのインスペクタウィンドウによく似ています。私はインスペクタをほとんど使わないので、ほとんどの場合オフにしていますが、GUIを好む人にとっては、CSSEditでCSSを編集する簡単で使いやすい方法です。

抽出する

誰かがどのようにコードを書いたのかを知りたい場合は、CSSEditを使えばウェブページからCSSを抽出できます。私は使ったことはありませんが、スタイルシートを始めたばかりの方には便利かもしれません。

メインペイン

CSSEditのメインパネルには、多くの便利な機能があります。まず、スタイルシートを入力しているときにオートコンプリート機能があります。次に、フォーマットメニューでスタイルシート全体を同じ間隔でフォーマットできます（CSSを整理整頓するのに非常に便利です）。私はCSSの間隔などがいつも一定ではないので、この機能がとても気に入っていて、よく使っています。

設定

CSSEditの設定パネルは非常にシンプルです。最初のパネルでは、アップデートリマインダーや起動時に開く項目など、主要な設定を変更できます。ビジュアル編集パネルでは、新しいスタイルボタンの機能や色の調整などの設定を微調整できます。ソース編集パネルでは、メインパネルの色や間隔を変更して、再フォーマットできます。

総じて、CSSEditは本当に素晴らしいです。スタイルシートの編集にとても便利です。本当に気に入っています。欠点は全くなく、欠点が一つも見つかりません。

MacRabbitから 39.95 ドルで購入できます。