本文と画像との境目が曖昧で間の文章が目立たない感じだったので、画像の周りに枠線を表示させるようにして、ついでに今回は画像の上下に10ピクセルのマージンも入れました。下はこの記事のスクリーンショット画像です。

枠線が無いと本文と画像との境目が曖昧で間にある文章(↑が↓こうなりました)が目立ちません。

枠線なしの場合

枠線があると画像と画像の間に文章があるということがはっきりとわかります。

枠線ありの場合


.conimg{
margin-top: 10px;
margin-bottom: 10px;
padding: 1px;
border: 1px solid #ccc;
}

 

というのをスタイルシートに記述し、本文中の画像タグにclass=”conimg”を追加すると上のような感じになります。例えば以下のような感じで。


<img src="http://www.snizm.com/img/a2011110508.jpg" alt="枠線ありの場合" class="conimg" />

 

ちなみに


.conimg2{
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 0 0 5px 2px grey;
border: 7px solid white;
}

 

というのをスタイルシートに記述しておいて、画像タグにclass=”conimg2″を追加すると、下のように写真みたいな枠線を作ることもできます(CSS3 IE9だと表示されないっぽい)。

グアムのイルカ

写真を紹介するサイトなんかはこんなふうにしておくといいかもしれませんね。