ITプロデュース熊本

開発に便利なブラウザ

2009年12月28日 | Author: 天狗大臣

今回は WordPress テーマのカスタマイズに限らず、Web開発をするために便利なブラウザを2つ紹介します。

両方とも、歴史などの説明は割愛しますので、興味があれば調べてみてください。今回は、CSSを解析する機能に絞って説明します。

ブラウザは、ここで紹介する2種類以外にもたくさんあるので、自分にあったものを探してみるものいいでしょう（開発に便利かどうかは調べてません）。

ただし、自分が気に入ったブラウザを、「みんなが使っている」なんていう幻想は持たないでください。どんなに素晴らしいデザインも画期的な機能も、Internet Explorer で正しく表示されなければ価値が半減します。

FireFox は Firebug という拡張機能を追加することで、右クリックに「要素を調査」というメニューが加わります。

左側のHTMLソースの各行にマウスポインタを合わせると、ページを表示している元のウィンドウの該当部分がハイライト表示されます。

カーソルキーでカレント行を動かす（またはマウスでクリックする）ことで、右側にその部分の属性値が表示されます。

スタイルの各行にマウスポインタを近づけると、行頭に灰色の通行止めマークが現れます。それをクリックするとマークが赤くなり、その行のスタイルが無効になります。

また、属性の名前や属性値をクリックすることで、内容を自由に変更することもできます。右クリック→新しいプロパティで任意の属性を付加することもできます。

このように変更したものは、あくまでも一時的なもので、再読み込みすれば元に戻りますし、実際のサーバのデータが書き換わることは絶対にないので、安心して試すことができます。

前回も少し触れましたが、インストールしたままの状態で、「要素の検証」機能が使えます。

左側のHTMLソースの各行にマウスポインタを合わせると、ページを表示している元のウィンドウの該当部分がハイライト表示されます。

カーソルキーでカレント行を動かす（またはマウスでクリックする）ことで、右側にその部分の属性値が表示されます。

その属性値のグループの中の “Styles” で、どのようなスタイルが指定されているのかを見ることができます。マウスポインタを、この部分に近づけてみると、右端にチェックボックスが現れます。

このチェックを外すことで、一時的にそのスタイルが指定されていない状態を見ることができます。Firebug とは違い、属性値を変えることはできないようです。

もちろん、チェックをはずしてもサーバーのデータが書き換わることはありません。

上の2つのブラウザ（とブラウザ＋拡張機能）には、他にも便利な機能として、JavaScriptの実行を監視したり、ページ読み込みの時間を測定・分析したりする機能がついています。

この研修では触れませんが、Web関連の仕事をしていく上で必ず必要になる日が来ると思います。