Macならこれだ！

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

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

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

早速使ってみよう

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

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

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

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

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

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

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

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

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

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

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