TOPシステム開発【即実践!HTML+CSS】私流、ツールの選び方> 第2回:助けて、CSSエディタ!(2/3)




【即実践!HTML+CSS】私流、ツールの選び方

【即実践!HTML+CSS】私流、ツールの選び方

第2回:助けて、CSSエディタ!

著者:まつむらよしあき

公開日:2008/04/11(金)

有料=優良?

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

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

図2:Stylizer

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

そこで今回ご紹介するのが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ブラウザによるレンダリングで、必要不可欠といえるハックも思いのままですね。

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

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




まつむらよしあき
著者プロフィール
まつむらよしあき
Webデザイナー
舞台役者をやりながら舞台美術の世界でデザインに目覚め、ファッション誌のエディトリアルデザインからwebデザイナーに転身。現在イー・アクセス株式会社にて更なる技を磨いている。


この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。

INDEX
第2回:助けて、CSSエディタ!
  Macならこれだ!
有料=優良?
  タダの魅力と実力
【即実践!HTML+CSS】私流、ツールの選び方
第1回 ベストなコーディングツールを探せ!
第2回 助けて、CSSエディタ!
第3回 あると安心、孫の手アプリ
第4回 Aptana Studio始めました
関連記事
ポストWebコーディング
テーブルレイアウトから脱出せよ!
身につけたい!正しいコーディング作法
チームによるWeb制作の現場
私流、ツールの選び方
Webデザイナは知っていた