第１回：CSSで画像にborderをつけてみる

記念すべき初回のエントリーはCSSによるborderのスタイルを色々試してみます。やっぱりフォトサイトで一番気を遣うのは写真（画像）を表示するための <IMG>タグ だと思います。で、border（枠線）を付けるか付けないか、どんな色にするかとか、迷うと思います。なのでその参考になれば良いなと思います。

■ 枠なし

基本は枠なしでしょうね。
シンプル・イズ・ザ・ベスト（だったら、このエントリーの意味ないじゃん・・・）
□サンプルコード

img.borderless {
border: 0;
}

■ シンプルな細い枠

1ピクセルの細い線で囲んだサンプルです。
画像の端の色がページの背景色と近似色の場合、画像の範囲をハッキリさせるためにborderを付けると効果的な場合があります。border色は写真の色彩を邪魔しないようにモノクロ色（白・グレー・黒）が基本です。
□サンプルコード

img.thinborder {
border: 1px solid #999999;
}

■ 縁ありな太い枠

５ピクセルのborderで縁あり現像したような表示になります。
border色は白（#FFFFFF）、って事は背景が黒系じゃないと合わないかも！？
□サンプルコード

img.thickborder {
border: 5px solid #FFFFFF;
}

■ ポラ風の変形枠

下側のborderを少し太めに設定して、ポラ風な表示。
border色は白（#FFFFFF）、って事は背景が黒系じゃないと合わないかも！？
□サンプルコード

img.polaborder {
border-top: 10px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
border-bottom: 30px solid #FFFFFF;
border-left: 10px solid #FFFFFF;
}

■ 点線

これはあまりオススメはしない。
が、ポップなイメージを演出する際に使えそう。
□サンプルコード

img.dashedborder {
border: 1px dashed #999999;
}

■ ２重線

使い道あるかな。
□サンプルコード

img.doubleborder {
border: 3px double #999999;
}

■ 右下だけ２重線

borderが影のように、見えないかな・・・。
□サンプルコード

img.shadowborder {
border-right: 3px double #999999;
border-bottom: 3px double #999999;
}