先日、Web Crossingのブログで自動生成されたCSSコードを扱うことになったのですが、管理したいCSSボックスをどのスタイルが制御しているのかを正確に把握するのに苦労しました。コードが自動生成されるため、どのスタイルがいつ読み込まれるのかを正確に把握するのが難しいため、少し前から使っている新しいCSSプログラム、MacRabbitのCSSEdit 2を試してみることにしました。今のところCSSEditを使いこなせるほど熟達していないので、完全なレビューを書くことはできませんが、その素晴らしい機能をいくつかご紹介したくてたまらなかったのです。
まず、CSSEditにはライブWebプレビューウィンドウが搭載されており、インターネット上のどこからでもページを読み込むことができます。おそらくAppleのWebKitテクノロジーを使って表示しているのでしょう。これは、静的なHTMLファイルとして存在するページはほとんどなく、データベースや多数のインクルード（サーバー上の別ファイルとして存在し、ブラウザで読み込まれた際にWebページのHTMLコードに「取り込まれる」コードスニペット）によって構築される今日のWebにおいて、非常に便利な機能です。CSSEditが、バックエンドで構成要素から生成されたページをライブで表示できるという点が重要です。
さらに素晴らしいのは、ページを読み込んだ後、「オーバーライド」ボタンをクリックすると「オーバーライド」パレットが表示され、CSSEditのライブWebプレビューウィンドウで適用されているスタイルをオーバーライドするスタイルシートを表示できることです。最初から設定する必要はありません。「オーバーライド」パレットのオプションの一つに「抽出してオーバーライド」があり、これを選択するとWebページのスタイルシートが抽出され、CSSEditで新しい「無題」スタイルシートとして開きます。このスタイルシートに加えた変更は、ライブWebプレビューに即座に反映されます。
でも、これが私にとって本当に嬉しい機能でした。ライブWebプレビューウィンドウでX線ボタンをクリックすると、ウィンドウ下部にステータスラインが表示されます。すると、ライブWebプレビューウィンドウでクリックした項目のCSSボックスがハイライト表示され、そのボックスを制御するタグとスタイルのカスケードがステータスラインに表示されます。つまり、私が操作しようとしていたボックス（20ピクセルほど上に移動させたかった）では、ステータスラインはリンクされたグラフィックのように見えました。
覚えておいてください、私はこのページのレイアウトをどのように制御できませんでしたが、管理したいボックスは “div.content” セレクターによって制御されていることはわかりました。説明するには複雑すぎる理由で、ページの通常のスタイルシートを自分のスタイルシートで上書きしていました。そのため、スタイルシートに #content セレクターを作成しました。しかし、役に立ちませんでした! 私は CSS の専門家ではないので、問題の解決は絶望的でした。その後、CSS スタイルはカスケードすることを思い出し、おそらくより上位レベルのボックスを操作する必要があると思いました。そこで、td 項目をクリックして、CSSEdit が少し大きいボックスをハイライト表示しているのを確認しました。なるほど! 次の 2 つの項目、tr と tbody をクリックしても何も起こりませんでしたが、table をクリックすると、さらに大きなボックスがハイライト表示されました。td#contentId をクリックする
とボックスのサイズが小さくなり、次のいくつかの項目をクリックすると、大きすぎる領域が明らかにハイライト表示され始めました。
#content セレクターは機能していなかったのですが、#contentId はどうだったでしょうか？セレクターの名前を「#contentId」に変更してみましたが、それでも何も変わりませんでした。そこで、変更したいのは contentId セレクター内のテーブルだと気づき、「#contentId テーブル」セレクターを作成したところ、問題のボックスがすぐに 20 ピクセル上に移動しました。成功です！数値を少し調整した後、問題は解決しました。
先ほども述べたように、CSSEdit の機能はこれだけではありません。CSS ファイルを作成できる優れたインターフェースを備えているため、無数のオプションをすべて把握する必要はありません。また、CSS ファイル内の雑然とした部分を整理・並べ替えるエレガントな方法も提供しており、将来的に読みやすく理解しやすくなります。CSS を扱っているなら、ぜひこのプログラムを試してみてください。私のような初心者にとって、CSS がはるかに扱いやすくなり、熟練者にとっても、従来の静的ファイルを扱う方法よりもはるかに迅速にテストと変更の実装を行うことができるようになるでしょう。
CSSEdit 2は30ドルで、Mac OS X 10.4以降が必要です。無料でダウンロードできるデモ版では、保存できるCSSファイルの文字数が2,500文字以下に制限されています。