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




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

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

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

著者:まつむらよしあき

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

Macならこれだ!

今回はCSS関連のツールの選び方をご紹介していきましょう。最初に紹介するのはMac OSのアプリケーションです。

「なんだ、Macか」と思ってしまう読者も多いかもしれません。WebのスタンダードはWindowsとInternet Explorerですから、もっともな意見です。冒頭でMacの製品を取り上げたのは普段知らないツールやアプリケーションでも「なるほど、そんなツールもあるんだ。オープンソースで機能追加してみようかな」などとポジティブに読み進んでいただきたいと思ったからです。

取り上げるのはMacRabbit社の「CSSEdit 2」です。このCSSEdit 2はCSSの初心者から、バリバリとコードを入力していく方まで幅広く勧められるとても使いやすいアプリケーションです。ただ、残念なことは日本語版が無いことです。といっても直感的に使えますし、難解な英単語が出てくるわけではないので、英語アレルギーでなければ、筆者のようにあまり英語力が無くても問題なく使えると思います。

図1:CSSEdit 2

早速使ってみよう

では、MacRabbit社のWebサイトから「Download v2.6」をクリックしてダウンロードし、実際にインストールしてみましょう。

まず、このアプリケーションを使う上で注意するべきことは、出力されるCSSファイルの文字コードが「UTF-8」だと言うことです。ですから、新規ファイルの1行目には「@charset "utf-8";」と記入しておきましょう。

基本的な画面レイアウトは3カラムで、左がID、Class、グループ、コメントなどが表示され探したいルールに簡単にアクセスできます。中央は実際にコードが書かれている部分で、テキストエディタで編集する感覚で作業ができます。

右側はプロパティを編集できる部分です。ここを使えばCSSのプロパティの書き方が分からなくても簡単に入力ができます。また、これらのカラムは右上のアイコンで表示、非表示の選択が可能なのでお好みで作業領域を広くとることができます。

さて、ここまではよくあるCSSエディタも備えている機能ですが、CSSEdit 2のお勧めの機能をあげてみましょう。

まずはグループ機能です。これは、左から2番目のアイコンを押すことで、CSSのルールをグループ分けすることができます。煩雑になりがちなルールですが、ヘッダや色などをまとめておけば、どこに必要なルールがあるのか探しやすくなるので大変便利です。

2つ目がプレビュー機能です。右上にある「プレビュー」アイコンをクリックするとプレビューウィンドウが立ち上がり、ファイルまたはURLのプレビューが可能です。このプレビューでは、「X-ray」アイコンをクリックすることでエレメントのマージンやパディング、親エレメントなどを確認することができるので、修正に役立ってくれるでしょう。

3つ目がマイルストーン機能です。「プレビュー」アイコンの横にある「マイルストーン」アイコンをクリックすると、設定されたマイルストーンまで1クリックで戻ることが可能です。ただし、マイルストーンを設定したあとにファイル名やパスを変更してしまうと機能しなくなるので注意が必要です。

最後に紹介するのがバリデート機能です。「マイルストーン」アイコンの右側にある「バリデート」アイコンをクリックすると、名前が示すとおり、ファイルのバリデートを行ってくれるので、ミスが無いかしっかりチェックしましょう。

もちろん他にも便利な機能がたくさんありますからぜひ使ってみてはいかがでしょうか。円高を狙って買えばお得になります。

では続いてWindowsのアプリケーションを紹介しましょう。 次のページ




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


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

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