ブログ練習帳CSSに書かれた背景画像をゲットする方法

CSSに書かれた背景画像をゲットする方法

ボタンとか、画像を背景扱いにして、CSSに書くことって、よくあります。
でも、あとから、その画像ファイルを探すの結構たいへん。とくに、CSSがHTMLファイルと離れたところにあって、相対パスで書いてあって…うんぬんうんぬんとなると、「1つディレクトリ上がって、下がって…」とぐるぐる回っちゃって、ワケ分からなくなります。

まあ、キホンといえばキホンかもしれないですけど、見習は、かなーりニガテ。
でも、Firefoxのアドオン、Firebugを使えば、カンタンに行きました。って、見習、いままで何やってたんだか。とほほ。やっぱり、見習駆け出しさんねと思います。

ということで、背景画像を取り出す方法いってみます。

Firefoxで目的のページを見ます。

では、この「森のみどころMAP」の画像を保存してみます。

まず、森のみどころMAPを右クリックし、「要素を調査」を選択します。これでFirebugが開きます。

ただ、ここでFirfoxのバージョン10以降は、ちょっとメニューが違います。
というのはfirefox10からは、Fireugをいれなくても、開発者用のツールが備わっていて「要素を調査」ができるようになりました。でも、Firebugのほうの「要素を調査」のほうが、見習にとっては簡単にファイルの場所が探しやすいです。Firefox10では、右クリックして「要素を調査」を選ぶと、FireFoxのほうの機能を呼び出してしまうので、「Firebugで要素を調査」を選びます。これできっちりFirebugのほうの要素を調査が使えますぅ。

この状態で、該当するあたりのHTMLとかCSSが見れます。

firebugの右側にある、スタイルのところをクリックすると、「要素を調査」を選んだところの要素についてのCSSが見れるので、backgroundとかのところを探し、background-imageを見つけます。該当するCSSのところにマウスオーバーすると、その画像が見えるので、それを頼りに探します。