枠線をつけてかざる

素材サイトさんなんかでは、よくこの方法で写真素材を、
レイアウトしてますよね。

やっぱり、ただ写真を配置するより、こういった枠線で囲んであげるとことで、
写真がはっきりする感じがします。

ただ、この方法は、写真そのものを見せるときに使用するもので、
グラフィックパーツとして、見せるのに使うのはむずかしいかな。

■枠線で囲む方法
枠線で囲むもっともかんたんな方法は、
画像の<img>タグ内に「border="1"」と入れてあげれば、
カラーが黒で、太さ１ｐｘの枠線が表示されます。

もっと、カスタマイズして枠線を表示させたい場合は、
スタイルシートを使うと、いろんな設定をスッキリと反映させることが、
できるので、おためしください。

基本的には、クラスセレクタで設定すると楽です。


線種は以下のとおり。

solid → １本線
double → ２本線
groove → へこんでるように
ridge → 飛び出して見えるように
inset → 枠の内側がへこんでるように
outset → 枠の内側が飛び出して見えるように
dashed → 枠線で表示
dotted → 点線で表示

こんなふうに、定義したら、


のように、クラス設定すればＯＫです。