サイトをプレビューしながらサイドバーでスタイルシートを編集できる「EditCSS」

最近のWebサイトはブログをはじめ、スタイルシート（CSS）を使ったサイトデザインが増えています。

スタイルシートを少し覚えるだけでデザイン編集が非常に簡単で楽になりますので、ブログ管理者などは是非覚えておきたいところですね。

スタイルシートは、記述を開きながら部分部分を変更し、その変化を見るだけでも基本的なことは十分理解できます。

そんなスタイルシートの編集を、タブ内のページを見ながら行うことができるFirefox用アドオンが「EditCSS」です。

スタイルシート編集ツールというのは、なぜかプレビューしながらリアルタイムで変化を確認できるものが少ないのですが、「EditCSS」なら、命令文や各部の数値をエディタで行うように書き換えるだけで即座にタブ内に表示されているページも変化します。

「EditCSS」をインストールしたら、スタイルシートを編集したいページをタブで開きます。

そして、サイドバーを”EditCSS”に切り替えると、そのページのスタイルシートが表示されます。





このサイドバー内でエディタのように書き換えを行うと、タブ内のページのカラーやフォントサイズがリアルタイムで変化します。

納得のいく編集ができればフロッピーのマークの保存ボタンをクリックして保存し、その内容をブログなどのスタイルシート記入欄にコピペすればデザイン変更が完了します。

当然ながら、ブログのスタイルシート部分に記入するまで実際にそのサイトのデザインが変更されるわけではありませんので、大胆に変化を試すことができ、わからない部分の数値を変更しても、どの部分が変化するのかがわかるため、CSSの勉強にもなります。

このような機能は、同じくFirefox用拡張機能である”Web Developer ”や、”Firebug”にも付いていますが、「EditCSS」は、スタイルシート編集に特化しただけの使い勝手の良さがありますので、上記のような高機能ツールは必要ないというブロガーの方などにはぴったりのツールだと思います。

ブログデザインを簡単に変更したい方は入れておいて損は無い拡張機能です。

＜関連記事＞

■ブロガーなら「Web Developer」でCSSをいじろう。

映画や音楽、ドラマなどイチオシ番組はここでチェック「GyaO」

ソニーのブログパーツ「FLO:Q」