少し前に私は、ソーシャルブックマークサービス「del.icio.us」をデスクトップからアクセスする環境があまり充実していないことに不満を持ち、自前のクライアントの開発を開始したものの、「WebnoteHappy」という、まさに私が欲しかった機能をそのまま実現したようなソフトに出会い、自分で開発する必要がなくなったというお話を書きました。

　そう、私は、能力に限りがあるのにもかかわらず、「この機能がないなんてありえねえ」と思うと、すぐさま自分で作り始めてしまいます。そして、確かに求めていた機能は実現するのですが、それ以外の全ての機能がダウングレードしている、というのが私の作ったソフトに共通するスタイル（！）のような気がします。まあ、個人的にはそれでも構わない（他のソフトと併用すればよいし）のですが、他の誰かがうまく実現してくれていれば、それほど有難いことはありません。

　del.icio.us をデスクトップからスマートに使うこと以外に、私が求めていた機能として、「脱線」という記事に書いた「オンラインのページのスタイルシートを直接編集する」という機能がありました。そしてそれを実現してくれたのが、前置きが長くなりましたが、「CSSEdit」 というソフトです。

　このソフト、知ってる人なら知ってますよね？　実際私も、旧バージョンを入れてありました（本来とは違う使い方で使うためですが）。しかし凄いのは、今回のメジャーアップデートなんです。私の欲しかった機能が搭載されただけではありません。素晴らしいのです。

　では、その CSSEdit の、見逃せない機能を紹介していきたいと思います。

　…と言いつつ、いきなり余談ですが、MacOS X で使えるメジャーな CSS ツールといえば、このメジャーアップデート前の CSSEdit と、もうひとつ「Xyle Scope」と、いうのが、私の以前の認識でした。

　まだ一度も CSSEdit を使ったことがない方のために書いておくと、CSSEdit は、ただのグラフィカルな CSS エディタではなく、ソースの直接編集にも、オートコンプリートや予測候補表示など強力なサポートがついており、GUI による編集／直接編集を自在に切り替えて使える非常に便利なソフトです。しかし、私がスタイルシートを直接編集するのにわりと慣れている、ということや、さほど大規模なスタイルシートを書くわけではない、ということ、そして、先ほどから書いているような「オンライン・ライブ・エディット」的な機能がなかったため、「じゃあ Smultron で書いても同じじゃないか」と思って（全然同じじゃないけど）、どうもシェアウェア代を払う気にならなかったのです。そして、たまに CSS のプロパティ名などが分からなくなったときに使う、リファレンス的な存在と化していました。

　その点 Xyle Scope は、オンラインのページのスタイルシートの値がいじれるなど、私の希望を少し実現してくれていました。また、ブロック要素の領域や、マージン／パディングの設定をビジュアルで確認できたり、ページの構造をさまざまな形式でわかりやすく見ることができるなど、これまた便利なソフトでした。しかし、このソフトのコンセプトは、CSS の「分析・デバッグ・ファインチューニング」であり、編集することではありませんでした。よって、スタイルシートの値は確かに「いじれる」のですが、新しくセレクタやプロパティを追加したり、削除することはできません。

　しかし今回のアップデートで CSSEdit は、オンラインのスタイルシートの直接編集に加え、ページ構造の表示も、Xyle Scope よりは機能が少ないものの、可能になりました（CSSEdit の方が表示が分かり易い）。Xyle Scope のような、スタイルシートやページ構造の詳細な解析が必要な人がどれほどいるのか…？、私としては、新しい CSSEdit の登場で、Xyle Scope の魅力が薄れてしまいました。

Override

では、そろそろ新機能の紹介を。まずは「Override」です。オンライン・オフラインを問わず、あるページのスタイルシートを、いま CSSEdit で編集しているスタイルシートで「乗っ取る」、つまり今編集しているスタイルシートを無理矢理適用してプレビューできます。もちろんライブプレビュー。

　これは、ページの完成イメージをちゃんとイメージしながらスタイルシートの編集ができる人にはいらないかもしれませんが、私のような人には、「本当の仕上がり」を確認しながら編集が行えるので、非常に分かり易く、便利な機能です。そういった、実際にウェブサイトが稼働している状態の仕上がりを確認するには、これまではいちいち CSS ファイルをアップロードするほかはなかったのですが、この機能を使えば、何の苦労もなく確認することができます。CSSEdit 側でファイルを保存する必要もありません。

X-ray

　これもプレビュー関連の機能です。プレビューウィンドウの「X-ray」ボタンをオンにして、表示中のページ内をクリックすると、その位置の要素のサイズ、マージン・パディングの幅をビジュアルで表示します。また、ウィンドウ下部には、html 要素から選択した要素に至るまでの階層が表示されます。これは、スタイルシートを編集して予想外の表示結果になった場合に、どこでおかしくなっているのか、どの要素を修正すべきか、ソースを眺めなくても確認することができます。Xyle Scope にも同様の機能がありますが、CSSEdit の表示の方が分かり易いです。惜しむらくは、選択した要素を即編集できるような機能がないことでしょうか。今後の対応に期待しましょう。

Milestones

　これも面白いですね（笑）。なんと、スタイルシートのバージョン管理機能までも内蔵してしまいました。いちど保存した Milestone は、ワンクリックですぐ読み込まれます。もちろんライブプレビューもついてきます。非常に便利です。ただ、また小さなことですが、Milestone の「説明書き」は後から修正できないようなので、そこが直るともっと便利（安心）かも。

Validate

　さらに、現在編集中のスタイルシートを、即、検証（Validate）できます。エラーが出た場所にはワンクリックで移動。私はあまり CSS を検証したことはないのですが（たぶん大丈夫…じゃないかな）、これだけ気軽に使えるのなら、やってみる価値はあるかもしれません。ちなみに、デモ用のスタイルシート「welcome.css」は、Validator が CSS3 に対応していないため、エラーになる、とコメントに書いてあります。

…というわけで、CSSEdit でした。皆さんもぜひダウンロードを！

MacRabbit – CSSEdit – Web 2.0 in Style（オフィシャルサイト）