有料＝優良？

有料＝優良？

WindowsでCSSの編集と聞かれたら、「Dreamweaver」あるいはOS付属のテキストエディタ「メモ帳」とWebブラウザを思い浮かべる方も多いでしょう。

しかし、経験から言ってCSSの編集でDreamweaverを使うのは重たすぎます。もちろん機能は充実していますから、 Dreamweaverの重さが気にならなければそれでもいいですが、軽快に作業したいとなればテキストエディタに勝るものはありません。しかしさすがにCSSを使って思い通りのレイアウトをデザインするためには、Webブラウザとテキストエディタを行ったり来たりしなければならず、もっと効率的に作業できるアプリケーションを利用したいものです。

クールでエレガントに編集

そこで今回ご紹介するのがSkybound Software社の「Stylizer」です。残念ながらこちらも英語版のみなのですが、センスのよいアプリケーションなので試す価値はあります。まず、StylizerのWebサイトよりダウンロードしてインストールしましょう。14日間の試用ができます。

WebサイトにVideo Tourもあるので、ご覧になるとどんな感じのアプリケーションなのかイメージしやすいと思います。さすがに有料というだけはあり、非常に良くできています。直感的な入力だけでなく、テキストエディタで入力する時の感覚でキーボードから操作できるところが、初心者からベテランまで幅広く支持される理由では ないでしょうか。

インストール後起動すると、クイックスタートチュートリアルが始まり、特徴的な6つの機能を紹介してくれるので、ぜひ一度確認してみましょう。

このアプリケーションは2カラムからなり、左側がプレビュー、右側がルール入力という画面構成になっています。右側で変更したプロパティを即座にプレビューとして見ることができるすぐれものです。プレビューは左上のアイコンをクリックするだけで、レンダリングエンジンを切り替えるこができ便 利です。

右カラムでのルールの追加とプロパティの指定は、クリックで選択することも可能ですし、直接タイプすることも可能なので、CSSをテキストエディタで入力していた筆者のようなタイプの方にとっては、作業効率がとても良くなります。また、入力時にバリデートしてくれるので、タイプミスも減るこ とでしょう。

ルールの追加においては、「Mozilla（Firefox）」や「WebKit（Safari）」用のCSS3も入力できるので、最新のCSSを使うことも可能です。

便利な機能の1つに「Firebug」やMicrosoft社の「Internet Explorer Developer Toolbar」のように、エレメントの領域を知ることができる機能があります。またクリックしたエレメントはプロパティを編集することもできます。

プロパティの変更では、数値を入力する以外にマウスのドラッグでも調節することができます。例えばフォントサイズを調整するとき、プロパティのフォントサイズの値をクリックして右にある矢印を上下にドラッグすれば、直感的にサイズを変えることができるのです。これは、マージンやパディング、ラインハイトといったプロパティにも適用できるので思いのままに位置調節をすることができ、大変便利です。

もう1つ忘れてはいけない機能が、「メディアタイプ&ブラウザフィルター」機能です。右側のカラムの一番右上のアイコンをクリック すれば、Internet Explorer用ハックやメディアの切替が簡単に行えます。いつも頭を悩ませるWebブラウザによるレンダリングで、必要不可欠といえるハックも思いのままですね。

こちらの製品も円高の時がお買い得になります。このようなアプリケーションが、ばっちり日本語化すれば、もっと声を上げてお勧めできるのに残念です。

次はフリーウェアについても語ってみましょう。