さて近頃は、ホームページを作るのがCMS主体となってしまい、かつてのように何ページものホームページを作ることはほとんどなくなり、CMSやASPを活用すればほとんどがマスターページであるテーマやスキン、あるいはテンプレートを作ることになる。こうした場合、基本的には1点物のデザインなので、テキストエディターとブラウザの組み合わせで十分作れてしまっていた。

TopStyle

ところが、ちょっと気になって、CSSエディターで便利なものが無いか調べてみると「TopStyle」というのが見つかった。みんながすでに知っていて、私だけが最近気が付いたのなら、お笑いの「ナイツ」の「ヤホー」状態だが、まだまだ知られていないツールのようだ。
実はこれ、以前には無料版の「TopStyle lite」というのがあって、ある程度認知されていたようだが、今は有料版とトライアル版が出ているようだ。トライアル版を利用してみているのだが、利用期間に制限があるのか機能に制限があるのかさえわからずに試用している。その内、なんなのかわかってくるだろう、、、。

このTopStyleは起動して見ただけで、なんとなく「優れもの感」が漂っている。
英語版なので詳しい説明はできないが、古いDreamweaverしか高性能オーサリングソフトが無い我が家としては、このTopStyleは最強かもしれない。あるサイトではDreamweaverと比較して、マスターのCSSを使用したページ制作ではTopStyleの方が便利だと書いているサイトもあった。
確かにAptanaなどを利用したことがある方なら、おそらくTopStyleの方を気に入ることだろう。
とにかく、機能豊富でまだまだ開いていない機能だらけで、本当のところは何がどの程度までできるのか、便利なのかさえわかっていない。

この他、CSSだけを簡単に作成したり、変更したい方には今のところ以下の２つのエディターが直感的で便利そうだった。

JustStyle CSS Editor
SimpleCSS

phpspotでおすすめのCSSエディターを紹介しているのでここに紹介する３つのツールで不満の向きはそちらを参考にされたい。
でも、探す時間があったら、まずはここで紹介する３つをいじり倒すことから始めることをおすすめする。私もこうしている場合ではない。TopStyleをいじってみることにする。

例えば初歩的なホームページを個人で作ろうとすれば、これまで多くの方がホームページビルダーを利用してサイトを作っていたと思います。
一方、ある程度以上の規模で仕事としてホームページ制作を行う場合、多くの方がDreamweaverを使用しているでしょう・・・と思っていたら、そうでもないようで、htmlエディターやIDE、FirefoxのFireBugなど様々なツールを利用して作られているようです。

実は先日、久しぶりにDreamweaverの操作を「リハビリ」していたのですが、以前感じていた感覚と少し異なったイメージを持ちました。それは、かつてはtableを配置してレイアウトする方法が中心でしたが、今はdivを使用してCSSとの連携でデザイン制作することが多くなってしまいました。
特に、WordPressのテーマなどを利用したり、オープンソースのhtmlテンプレートをWordPressに移植したりすると、ほとんどはhtmlとcssの連携でデザインを作成しています。

どうしてもこのような制作方法になってくるとエディター機能が重要になってくるので、デザインに関しては「今時コーディングじゃないよ」とも言っていられず、優れたエディター機能が欲しくなったりします。この場合、必ずしもDreamweverが飛びぬけて便利なソフトだとは言えない気がします。

そこで今日は紹介だけにとどめて起きますが、以下のようなツールが結構おすすめです。
申し訳ないですが、私自身使い込んでいるわけではないので、現時点で詳しくご紹介できませんが、基本的な操作を行っているだけでもかなり使えるツールたちです。

●ホームページ制作
AptanaStudio
Bluefish

●WEB開発 (Firefox+)
Firebug
DOMInspector

Eclipseは大いに有効なツールですし、AptanaStudioも同様ですが、我が家のボロパソコンでは今となっては大変重いツールたちで、動作がかなり鈍くなってきています。
近日中に、これらを活用しつつ、当サイトらしくテーマの制作やカスタマイズの際のこれらツールの働き振りをご紹介できればと思っています。

ホームページを作る場合に tableを便利に使っていた場合には、ＣＭＳの場合にはdivによる方法に変わっているのでこれまた少し戸惑う点ではないでしょうか？
divを使用する場合には書き方が簡易になって便利ですが、tableよりはその位置関係のコントロールが少し面倒で、きちんと数値をあわせて書いておかないと、思い通りの場所に表示されない場合も多く、また表示するブラウザによって微妙にずれたりするのも厄介な点です。

いずれにしても、こうした環境を少し便利にできないかと思うのが人情です。そこでCSSを便利に書くためのツールが無いかと探して見ましたが、とりあえずエディターとしては「TopStyleLite」 というのが便利そうです。有料版と無料版があり、Liteは無料版の方でこれでも相当機能が高いようです。まだチェックだけなので細かな説明はできませんが、ちょっとよさそうです。また、日本の制作者がＣＳＳ用のエディターを出していますが、確かこれはJISかＳＪＩＳしか使えなかった気がします。（「StyleNote」）
もうひとつ面白いのがあったのでご紹介しておきますが、WebDeveloperというFirefoxのプラグインがありますこれはなかなかユニークなツールのようで、ブラウザにページを表示させてそのままスタイルシートを編集できてしまうものです。ざっくりメニューを一覧しただけなので操作方法はまだよく分かりませんが、ローカルサーバー上に立ち上げたＣＭＳやＢｌｏｇのページを表示させ、ブラウザの左や下の部分にCSS書類を表示させて直接編集できてしまいます。これがどの程度使えるものかよく分かっていないのですが、発想がなかなかユニークですし大変面白いツールです。
今後自分自身がCSSのカスタマイズの際に便利なツールが欲しいので機会があればチェックしたいと思っています。MoonGiftさんで結構紹介されていますが、なかなか総てを使って見ることもできないところが厄介なところです。この記事の中のツールはリンクを参照してください