Firefoxで壊れた画像をわかりやすくするCSS

僕はWEB制作にはFirefoxをメインに使っています。

世の中の制作者は結構chromeに移行したりしてますが、なかなかアドオンとか使い慣れてるものの代用品がなかったりするので僕は制作に関してはまだまだFirefoxから離れるつもりはありません。

Firefox4になってスピードも負けてないですしね。

ただ開発してるときに少し嫌なとこで画像が壊れてても何も表示されないってことがあります。

バナーがまだできあがっていないとかでとりあえずHTMLを先に組んでる場合とか画像が無いと若干イメージしづらかったりしますね。

そのためにわざわざダミー画像入れるのも後で画像パス変えたりするのがめんどいです。

そこでCSSを書いて画像がどんな感じで入るのかわかりやすくしてみます。

例えばこんなHTML

<h1>この下に画像があるよ</h1>
<img src="#" width="500" height="500" />
<p>この上に画像があるよ</p>

Firefoxだと通常こうなります。
firefox

これだと画像が壊れてたりすると気づかなかったり、レイアウトの感覚とかが分からなかったりしてやりにくい。

そこでこんなCSSを書きます。

img:-moz-broken{
     display:block;
     border: 2px solid #ff0000;
     background: #000000;
     color:#ff0000;
}

そうするとこうなります。
firefox-CSS

画像が壊れてる場合のみブロック要素にして背景色を変えています。

まあなんてことないですが、以外とやりやすくなったりするので便利です。

ちなみにfirefoxのファイル内にあるCSSファイルに書き込んでおけばいちいち書かなくてもこのスタイルを効かせてくれて、CSS消し忘れたみたいなことにもならないのでオススメです。

ファイルの場所はユーザーフォルダ→AppData→Roming→Mozila→Firefox→Profiles→×××(何かランダムの文字列).default→chrome→userContent-example.cssです。

このuserContent-example.cssにCSSを書き込んで-exampleをファイル名から外して同じファイルの中に入れておけばOK。

まあちょっと便利になるかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pagetop

Copyright© echolabo All rights reserved.