画像にスタイルシートで枠線を付ける場合

枠線と画像との間に余白がある場合とない場合のサンプル画像

スタイルシートを使えば、画像を加工することなく画像に枠線を加えられます。 方法はとても簡単ですから、スタイルシートを少しでも使ったことのある方々なら、方法は簡単に思いつくでしょう。

では、画像と枠線との間に、少し余白を設けたい場合はどうでしょうか?
すぐにスタイルシートの記述方法を思いつきますか?

そこそこスタイルシートを活用しているなら、きっと思いつくでしょうね。paddingプロパティを使えば、内側の余白を調節できるはずだと。

ところが!
それでは、うまくいかない場合があります。 なんとも困ったことですが、現在最も普及率が高いと考えられるブラウザ「Internet Explorer」では、その方法ではうまくいかないことがあるのです。(最新の IE7.0 でも同様)

今回は、その対策をご紹介したいと思います。

画像に枠線を加えるスタイルシート

画像の周囲に枠線(緑色の実線で1ピクセル)を加えて、その枠線と画像との間に1ピクセルの余白を設けるスタイルシート…と聞いて思いつくのは、次のようなソース(スタイルシート)でしょう。

img {
   border: 1px solid green; /* 枠線:1ピクセル・実線・緑色 */
   padding: 1px; /* 内側の余白:1ピクセル */
}

非常に簡単ですね。たったこれだけです。borderプロパティで枠線の太さ・線種・色を決定し、paddingプロパティで内側の余白サイズを決定しています。 これだけで問題ない…はずなのですが、そうはいかない場合があるのです。

IEの互換モードだと画像の内側の空間が作れない

答えから言ってしまうと、Internet Explorerでは、「互換モード」で解釈(描画)されている場合に限って、 画像(=img要素)の内側の余白(=padding)が無視されてしまいます。
※IE6.0以降には、HTMLの記述方法によって、標準モードと互換モードの2種類のレンダリング(描画)モードが用意されています。

以下の画像を見て下さい。320×240ピクセルの画像の周囲に、1ピクセルの実線を引いています。 枠線と画像の間には1ピクセルの余白を設けるようスタイルを記述しています。(=上記に示したスタイルシートのソースそのまま)
果たして、枠線と画像との間に1ピクセルの余白があるように見えるでしょうか?

サンプル画像

今、この記事が掲載されているページが、果たして「標準モード」で解釈されているのか「互換モード」で解釈されているか分からないので、 以下に、両方のサンプルページを用意しました。以下のページをInternet Explorerで表示させて比較してみて下さい。

枠線が画像にぴったりくっついていると、画像が濃い色の場合は、枠線がほとんど見えません。 枠線の効果を出すには、1ピクセル程度の余白がある方が望ましいですね。
以下は、IEとFirefoxで表示させた場合の上記画像(キャプチャ画像)です。比較してみて下さい。

比較
(左)互換モードでのIE / (右)Firefox

では、Internet Explorerでもうまく表示させるにはどうすればよいでしょうか?
その方法は、次のページで!

枠線と画像の間に余白をうまく設ける方法は? >>