Regen Press

背景画像だけを表示したいけど空divを使うのはちょっと･･･という場合に使えるテクニックを紹介します。

使うタグはimgタグのみ。ただし、imgタグのsrcには1x1pxの透過GIF画像を指定します。そしてCSSでそのimgタグに背景画像を指定します。

幅や高さはXHTMLで指定してください。これで背景画像として表示できます。CSSで画像を指定できるので、最近流行の CSS Sprite も使えます。

普通の画像	背景画像で

XHTMLで中身がないタグを書くと、構文の検証サービスで中身がない、と怒られます。例えば、

のようなタグです。

しかし、エラーから逃げる技を見つけてしまいました。それは･･･

当然ながら、<br />タグは改行のためのものであり、このような使いかたは想定外だと思われます。書いといてなんですが、私は推奨しません･･･。

ただ、絶対エラー出したくない！などの場面では使えないこともないような気もしないでもないです。

XHTMLのタグにはclass要素でクラスを指定できますが、半角スペースで区切って指定すると、複数のクラス名をつけて複数のスタイルを適用することができます。

このように指定します。

意外と知らなかったのでメモ。