CSSEdit 2.5

先日、天才的 CSS エディタ「CSSEdit」の最新版、バージョン 2.5 が登場しましたので、速報!とまではいかなかったものの、さっそく新機能をチェックしてみたいと思います。CSSEdit 2 にも 感動 させられましたが、今回はその、わずかなスキがさらに埋められた印象です。(CSSEdit 公式サイト

タブ機能

CSSEdit 2.5 では、編集ウィンドウとプレビューウィンドウにそれぞれ、タブバーが新設されました。この機能の搭載はまったく予想していませんでしたが、うれしい変更です。

僕が使っている iMac の 17 インチディスプレイが、決して狭いとは思いませんが、CSS を編集するときには、編集ウィンドウもプレビューウィンドウも、できるだけ大きく表示できた方がよく、それに十分な広さがあるとは言いがたいものがあります。

そして、編集ウィンドウとプレビューウィンドウを最大限に広げて使うと、複数の CSS を編集しているときに、他の CSS の編集ウィンドウにアクセスするのが困難になり、Exposé や コマンド + F1 を連発する羽目になります。これはかなりストレスフルで、僕も実際、リアルに頭が痛くなることがありました(涙)。

CSSEdit 2.5 では、タブ機能によって、最低2枚のウィンドウを配置できれば、プレビューしながら快適に、CSS 編集を行うことができます。この機能は、ノートブックユーザーの方には、さらにうれしい変更なんじゃないかと思います。

ちなみに、僕と同じくタブ絶対主義(?)の方は、環境設定パネル → 「General」→ 「Open style sheets:」を「in a new tab in the current window」にしておくのをお忘れなく。

X-ray 機能の強化

これは、期待していたとおりの機能の追加です!

X-ray 機能といえば、プレビュー画面でクリックした HTML 要素の領域・マージン・パディングと、その要素の HTML 文書内での階層(どんな要素に内包されているか)をビジュアルで確認できる、とても便利な機能です。こういう機能があると、「そのクリックした要素のスタイルをパッと編集できたらいいな」と期待してしまうのですが、以前は、まだそこまでは行っていませんでした。

CSSEdit 2.5 では、プレビューウィンドウに「Inspector」ボタンが追加され、これを押すと、その要素に適用されているスタイルをすべてリストアップしたウィンドウが表示され、各スタイルをクリックすると、該当の CSS ファイルをすでに開いている場合は、編集ウィンドウでそのスタイルが定義されている部分に移動し、すぐに編集することができます。

CSS ファイルをまだ開いていない場合は、CSSEdit 2 ユーザーにはおなじみですが、その CSS ファイルをダウンロードしてくるか、ローカルのファイルで Override するか、確認するダイアログが表示されます(以前追加された機能に関しては 以前の記事 などをご参照ください)。

実はこの機能、想像していたよりも複雑な印象があって、最初はピンと来なかったのですが……使い方は、例えば:

このサイトでは現在、Ash Haque 氏による「 Pearly Grey 」というテーマを使っているのですが、細かいところまでガチガチにスタイル指定がされているらしく、あとから自分のスタイルを追加して微調整しようとしても、もとのスタイルの優先度が高くなっているようで、うまく変更が反映されないことがよくあります。

これを解決するには、もとの CSS ファイルから、自分が変更したい要素のプロパティを先に設定している部分を探し出して、それと同じかたち(同じセレクタ)でスタイルを定義し直せばいいのですが、それはなかなか気が遠くなる作業なので、 !important を連発することでお茶を濁していました(おい)。

そこで Inspector を使うと、アレンジしたい要素にすでに適用されているスタイルが、すべて表示されるので、もしかぶっているものがあればすぐに探し出して、適切に値を上書きすることができるので、 !important を一掃することができました。こんな使い方もあります。

セレクタ・ビルダー

以前から CSSEdit では、ビジュアルエディタで快適にスタイルの定義を行うことが可能でしたが、セレクタだけは手で入力する必要がありました。バージョン 2.5 では、そこに「Selector Builder」 機能が投入され、CSS ソースをまったく見ないでスタイルシートを作ることも可能になりました!

編集画面はおなじみの、スマートフォルダの設定画面と、Automator の編集画面を組み合わせた感じになっており、条件を増減したり、順番を入れ替えたり(これが必要なのはミスったときだけかもしれませんが)して、「 body 要素より下の階層の p 要素」などという文章を作る感覚で(もちろん、日本人にとっては、英語という壁がありますが)、セレクタを生成することができます。

これで CSS の知識がまったく不要になるとは思いませんが、初心者の人(覚えなくなっちゃう?)や僕のようなうろ覚えの人はもちろん、スタイルシートの作成に慣れている人でも、複雑なセレクタを書くときのケアレスミスを防いだり、「この要素にスタイル指定したい」というイメージ優先で(それを自分の頭で変換することなく)セレクタを作ることができるので、頭の回転を節約(?)するのに役立つかもしれません。

また、お気づきの方もいらっしゃるかもしれませんが、この Selector Builder は、セレクタを新しく作るときだけではなく、既存のものを編集するときににも使えますし、前述の X-ray 機能で選択した要素に新たにスタイル指定したいときは、Inspector の「New Style」ボタンから(選択されている要素の情報を基準にして)開くことができます。

ただ残念ながら、今のところ、グループ化されたセレクタには対応していない様子なので、さらなる機能向上を期待します。

…という感じです。いかがでしたでしょうか。今回「GUI にアシストしてもらえる部分は十分にアシストしてもらいながら、ストレスなしにスタイルシートを作成する」という部分において、必要な機能はほぼ揃った、という印象です。まだ試していない方は、ぜひダウンロードを!

MacRabbit – CSSEdit – Web 2.0 in Style

2 thoughts on “CSSEdit 2.5

  1. I often change my site’s theme (not good behavior), so I don’t use your theme now, but I really like your simple & beautiful theme.

    I’m looking forward to seeing your new theme and improved theme 😛

Leave a Reply

Your email address will not be published. Required fields are marked *