画像、写真に枠線をつける｜ぼくんちのバックステージ

画像、写真に枠線をつける

写真、画像をホームページやブログにアップする際、imgタグ内に
<img style="border:1px solid rgb(204, 204, 204); margin: 5px; padding: 10px;width: 150px; height: 200px;" alt="sample" src="画像のアドレス" />

と、ボーダー（枠線）Padding（枠線内側空白）、Margin（枠線外側空白）を指定してやると、現像所で焼いてもらった、昔ならがの「白枠の付いた」現像写真のような効果が出せます。

sample
▲こんな感じ。

もちろんスタイルシート内に記述しても、同様の効果が出せます。

.main img {
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
}

普通に指定すると、ページ内の全ての画像に枠線が付いてしまうので、上記例は
「mainクラス」内の画像のみに枠線を付けるようにしたスタイルシートの記入例です。

LivedoorBlogなんかの場合は、「pictクラス」に上記を適用すれば、ブログ管理画面から投稿した写真、携帯から投稿した写真に自動的に枠線を付ける事が出来ます。

画像に上手く枠線が付かない場合

上記を行っても、画像に上手く枠線が表示されない場合があります。
その原因の殆どが、IEが互換モードで作動している場合です。

IEの互換モード、標準モードについては過去に説明していますので、そちらを参照下さい。
とりあえず、表示するページのDOCTYPEが正しく行われていればIEも標準モードで作動します。

Category: スタイルシートとWebデザイン | 投稿:2008年10月 4日（最終更新:2008/10/04）
一つ前の記事 : IEとFireFoxの表示の違い：　画像の色もかなり違うよ(´Д｀；)
一つ後の記事 : Livedooblogのモバイル版って、無効なタグが多すぎる

カテゴリー

画像、写真に枠線をつける

画像,写真,枠,白枠,スタイルシートなどについて。

画像、写真に枠線をつける

画像に上手く枠線が付かない場合