Studio Ponytail

紹介 : CSS に取り組む人必携

2005年3月10日 06:54 | コメント (0) | トラックバック (0)

　米国の Chris Pederick さんが日本語化した Firefox / Mozilla 用の拡張機能「Web Developer」は WEB ページを作成する人、中でも CSS に取り組む人必携のアイテムです。既に HTML や CSS に慣れている人のチェックツールとしてはもちろん、これから勉強しようとする人にとっても非常に役立つ機能が満載です。学習目的以外に、「配布されているテンプレートのこの部分だけ変更するには、どこをいじればいいんだろう」といった状況でも活躍します。

　ブロック要素のサイズや class 属性を表示させる事はもちろん、枠で囲んでどのような構造になっているかを視覚的に確認できます。さらに、クリックした要素の枠を表示させたり、カーソル部分がどのような入れ子状況になっているかをステータスバーに表示する機能も搭載しています。（「html > body > div#contents > div.entry > div.cc_0 > div.item_body > p.center > img」のように表示される）その他、表示中のページをワンタッチで Another HTML-lint gateway や W3C Markup Validation Service でチェック可能な機能も便利ですが、何より役立つのが表示中ページの CSS を直接編集してその場で効果を確認できる事です。

　CSS に限らず、良いと思ったものを参考に少しずつ学んで行くのが上達のコツですが、CSS の場合、変更して確認してという作業がやや面倒です。sb でテンプレートをいじっている場合は特に、その都度テンプレートに書き込んでリロードする必要があります。しかし、この拡張機能を使えば画面の左側に表示中のページのスタイルシートが表示され、直接数字や設定を変更する事ができます。例えば「margin: 15px」と書いてある部分を「30px」にすれば、右側に表示されている実際の画面がその設定に従って書き換えられるので、どの数字がどんな設定と結びついているのかがよく分かります。
　もちろん、サーバ上のデータを書き換えている訳ではないので実際のページには影響を与えずにいろいろ試す事ができます。逆に言えば、ここで頑張って修正してもサーバ上のデータは変更されないので、最後にコピーして CSS を保存する必要があります。

　このツールを日本語化した Infoaxia さんは Web アクセシビリティ向上のサイトを運営し、この他にもオリジナルのページ検証ツール「Infoaxia Web アクセシビリティ・ツールボックス」があります。こちらはその名の通り、自分の作成したページが多くの人にとってアクセスしやすいものかをチェックする事ができます。WEB ページ作成に興味がある人はぜひこちらもダウンロードして自分のページをチェックしてみると良いでしょう。

コメント(0)

トラックバック(0)

トラックバックURL : http://www.studio-ponytail.com/mt/mt-tb.cgi/87