記念すべき初回のエントリーはCSSによるborderのスタイルを色々試してみます。やっぱりフォトサイトで一番気を遣うのは写真(画像)を表示するための <IMG>タグ だと思います。で、border(枠線)を付けるか付けないか、どんな色にするかとか、迷うと思います。なのでその参考になれば良いなと思います。
■ 枠なし
基本は枠なしでしょうね。
シンプル・イズ・ザ・ベスト(だったら、このエントリーの意味ないじゃん・・・)
□サンプルコード
img.borderless { border: 0; }
■ シンプルな細い枠
1ピクセルの細い線で囲んだサンプルです。
画像の端の色がページの背景色と近似色の場合、画像の範囲をハッキリさせるためにborderを付けると効果的な場合があります。border色は写真の色彩を邪魔しないようにモノクロ色(白・グレー・黒)が基本です。
□サンプルコード
img.thinborder { border: 1px solid #999999; }
■ 縁ありな太い枠
5ピクセルの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; }
■ 2重線
使い道あるかな。
□サンプルコード
img.doubleborder { border: 3px double #999999; }
■ 右下だけ2重線
borderが影のように、見えないかな・・・。
□サンプルコード
img.shadowborder { border-right: 3px double #999999; border-bottom: 3px double #999999; }