« Firebirdのシステムテーブル一覧 | トップページ | 12台分の画像を追加 »

2007年10月15日

スタイルシートをリアルタイム編集するFirefoxプラグイン

私は普段、ブラウザとしてFirefoxを使用しています。サイトを見るときに便利な機能もたくさんありますが、特にサイトを製作する側として便利な機能が多いのも魅力だと思います。そんな中、Firefoxの便利なプラグインをひとつ紹介したいと思います。

Mozilla Re-Mix: サイトをプレビューしながらサイドバーでスタイルシートを編集できる「EditCSS」
http://mozilla-remix.seesaa.net/article/57764011.html

スタイルシート(CSS)を修正したり調整したりするときは、ちょっと数値を変えてはアップロードしてリロード、あるいは、数値を変えては「保存と再構築」を行ってリロードというやり方でした。でもこれは非常に面倒だし、他人が作ったスタイルシートの場合は特に、どこを変えると何がどう変わるのかわかりにくいという問題点がありました。

その点、このプラグインを使うと、スタイルシートの変更結果をリアルタイムに確認できるので非常に便利になり、ストレスも軽減されます。

右クリックメニューから「EditCSS」を起動すると、現在表示中のウェブページのスタイルシートが、左側のサイドバーに表示されます。(私は普段サイドバーは非表示にしているので OutSidebar が便利です)。

おもむろにスタイルシートを変更すると右側に表示されているページのデザインがリアルタイムに変わります。

edit_css1.png

たとえば、font-weight: normal のところを、font-weight: bold に書き換えてみます。

edit_css2.png

すぐにフォントが太字(bold)になり、修正結果を確認できます。

EditCSSで編集した内容はどこにも保存されませんので、こころおきなくスタイルシートをいじり倒してから、最終版のスタイルシートをコピー&ペーストして保存します。

[技術情報] 投稿者 はるてん : 2007年10月15日 11:49

トラックバック

このエントリーのトラックバックURL:
http://hellototomica.com/apps/mt-tb.cgi/210

コメント

コメントしてください

サイン・インを確認しました、 さん。コメントしてください。 (サイン・アウト)

(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)


情報を登録する?