FirefoxとFirebugで、簡単にHTMLとCSSをお勉強！

2008年10月6日

インターネットをする時のブラウザは、ほとんどの人が初めからパソコンに入っているインターネットエクスプローラー（IE）を使っていると思います。

でも、Firefoxという無料のブラウザも使う人が増えています。僕もメインで使っています。下の画像をクリックすると、Firefoxのダウンロードページが表示されます。

動作も速く、ひとつのウィンドウで複数のWebページを表示できるタブブラウザ機能や、ポップアップブロック機能、ツールバーに統合されたGoogle検索、RSS リーダーを統合したライブブックマーク機能、高速な動作、拡張性の高さなどの特徴があります。セキュリティ面も安心できる設計になっています。

また、世界中にユーザーがいて、様々な拡張機能が用意されています。

その中でもぜひ追加をオススメしたい機能をいくつかご紹介します。

「SEOアクセス解析ツール」で検索エンジン最適化状態をチェック！で紹介した、「SEOTOOLS」アクセス解析ボタンをツールバーに追加することもできます。
標準では、画像の代替テキストが表示されませんが、「Popup ALT Attributes」をインストールすることにより表示されるようになりますので、必ずインストールして下さい。
FirefoxとIEでは、HPの表示に若干違いがあります。そのため、HPを作る際には両方のブラウザでの表示を確認する必要があるのですが、IE Tabをインストールすると、FirefoxとIEでの表示を１クリックで切り替える事ができます。
Firebugを使うと、任意の部分のHTMLタグやスタイルシートを調べたり、一時的に編集したりする事ができます。（編集がそのまま保存されるわけではありません。）便利で、かなり勉強になりますよ！（下図参照）
Firebugを表示させて、「調査」をクリックする。

次に、HTMLやCSS（スタイルシート）を確認したい部分にマウスのカーソルを移動すると・・・、

下の部分に、その箇所に対応するHTML（左側）とスタイルシート（右側）が表示されます。

気になるサイトやライバルサイトがあれば、これで研究してみては！？