ホームページ作成SEOマニアックス

• お問い合わせ
• 相互リンク
• サイトマップ
• 上級編
• 中級編
• 初級編
• ホームページ作成SEOマニアックス

FireFox Add-ons Edit CSS

日本でのブラウザの使用率はインターネットエクスプローラーが7割とか言われています。

WindowsOSのシェアが多いので仕方が無いことなのだろうが、世の中にはインターネットエクスプローラーしか知らないというユーザーが非常に多い。というか多すぎる。。。

ブラウジングしかしないユーザーならいざ知らず、ホームページを作成しているユーザーまでそんな方が多いというのは如何なものか？

世の中、OSだってWindowsだけではないし、OSが違えばブラウザだって違うのだ。
という私もWindowsをはじめ、MacOS、Fedora core、Solarisなどを使用している。

何が言いたいかというと、ホームページを作成するのなら、すべてのブラウザで正常に表示できるサイトを作ることを心がけたいという事だ。

IEのみでしか確認していないと、他のブラウザで見たときにレイアウトが崩れていて、とても見られたものじゃないというサイトが結構多いのだ。

ここではそんな悩みを少しでも解決してくれる便利なブラウザFireFoxを紹介する。

なぜFireFoxを薦めるか？

それは数多くのフリーで使用できるFirefox Add-onsというものがあり、その中にはWebページ作成に役立つものが存在するからです。

中でも私が良く使用して便利だと思っているものが、EditCSS

これはサイトのスタイルシートをブラウザの左側（ブックマークとかが表示されるところ）に表示させ、タイムリーに編集できるプラグインである。

EditCSSのインストール

EditCSSのインストールは簡単で、https://addons.mozilla.org/ja/firefox/addon/179左のFireFox Add-onsリンクにアクセスし、Firefoxへインストールをクリックするだけ。

Firefoxがインストールされていれば自動的にダウンロードとインストールが終了する。

EditCSSの使い方

CSSを見直したいページをFirefoxで開いて、ページ上で右クリックする。

画像のようにメニューの一番下にEditCSSと出てくるのでクリックする。

または、Shiftキー+Ctrlキー+8キーの3つのキーを押すことで起動できる。

EditCSSを起動すると、ブラウザの左側（ブックマークなどが表示される所）にスタイルシートが表示される。

ここで目的の箇所を修正すると、リアルタイムで右側に表示されている画面に反映される。

納得いく設定ができたら、左に表示されているスタイルシートをコピーして、本番のスタイルシートに貼り付け反映させればよい。

Webサーバーにアップしたファイル（html）にしか使えないが、この機能はかなり便利である。

Firefoｘでちゃんと表示されていれば、ほとんどのブラウザでも正常に表示されるので、後はインターネットエクスプローラーでチェックして修正すれば良い。

というか、IEだけはスタイルシートの読み込み方が異なるので、レイアウトがずれてしまう場合がある困ったブラウザなのだ...（バグも多いし...）

IEだけレイアウトがずれてしまう場合は、IEでのレイアウトずれ対処を参照してください。