画像の周りに写真風の枠をつける

他のサイトでも良く紹介されているネタですが、いまいち腑に落ちないって言うか、綺麗な書き方じゃないって言うか・・・とにかく自分で考えたので載せておきます。

img要素にpaddingは設定しない方が良い

どういうこと？って思われている人。サンプルを載せておきますので、表示してみてください。（WinIE6.0以前とFirefoxの両方で比較したらわ分かりやすいです）

→img要素にpaddingを指定したサンプル

「WinIE6.0以前の場合、枠線と画像の間に余白がありません。」「Firefoxの場合（Opera等も）、枠線と画像の間に余白があります。」
何故かと言うと、WinIE6.0互換モード及び5.5以前ではimg要素にpaddingが効かないからです。
ちなみに、WinIE7.0の互換モードでも同じ現象が起きます。

じゃあ、WinIEを「標準モード」で表示させればいいのですが・・・

「標準モード」にさせる方法は以下の通りです。

• ・HTMLにDOCTYPE宣言を書く
• ・XHTMLのXML宣言を削除する

ただ、今まで「互換モード」での描画を前提としてHTMLやスタイルシートを記述している場合、いきなり「標準モード」に切り替えるとレイアウトが崩れてしまうこともあります。なのであまりオススメしません。

この方法が一番いいかな

1.HTML記述方法

 
<p class="frame"><img src="photo.jpg" alt="写真" width="100" height="80" /></p>
<p class="clear"></p>

2.CSS記述方法

 
.frame {
    float: left;
    margin: 0;
    padding: 5px;
    border-color: #BBBBBB;
    border-width: 1px;
    border-style: solid;
    background-color: #FFFFFF;
}
 
.clear {
    clear: both;
}
 

→写真風の枠サンプル

ポイントは「frame」クラスの「float:left」です。これを指定しないと枠が右側いっぱいに広がってしまいます。

次回はこれを応用して画像リストを作ってみます。