写真、画像をホームページやブログにアップする際、imgタグ内に
<img style="border:1px solid rgb(204, 204, 204); margin: 5px; padding: 10px;width: 150px; height: 200px;" alt="sample" src="画像のアドレス" />
と、ボーダー(枠線)Padding(枠線内側空白)、Margin(枠線外側空白)を指定してやると、現像所で焼いてもらった、昔ならがの「白枠の付いた」現像写真のような効果が出せます。
▲こんな感じ。
もちろんスタイルシート内に記述しても、同様の効果が出せます。
.main img {
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
}
普通に指定すると、ページ内の全ての画像に枠線が付いてしまうので、上記例は
「mainクラス」内の画像のみに枠線を付けるようにしたスタイルシートの記入例です。
LivedoorBlogなんかの場合は、「pictクラス」に上記を適用すれば、ブログ管理画面から投稿した写真、携帯から投稿した写真に自動的に枠線を付ける事が出来ます。
画像に上手く枠線が付かない場合
上記を行っても、画像に上手く枠線が表示されない場合があります。
その原因の殆どが、IEが互換モードで作動している場合です。
IEの互換モード、標準モードについては過去に説明していますので、そちらを参照下さい。
とりあえず、表示するページのDOCTYPEが正しく行われていればIEも標準モードで作動します。