スタイルシートを利用して画像に枠をつける小技

こんにちは。渡部です。
今日はスタイルシートを利用してこんな感じの枠をつける小技をご紹介します。

PNG Overlayという技法

 
PNG overlayという技を応用しているのですが、この技法でJPEGやGIFの上にマスクのような感じで透過GIFのフレームを乗せることができます。



まずHTMLこう書きます。

<div class="frame">
<img width="157" height="102" src="./food_photo.jpg">
<div class="photo_frame"> </div>
</div>

次にCSSは以下のように定義します。

.frame {
position:relative;
margin:5px;
}
.photo_frame {
background:url('./photo_frame.gif') no-repeat;
overflow:hidden;
position:absolute;
top:0px;
left:0px;
width:180px;
height:105px;
}



たったこれだけです。

原理としては、positionという要素を上手く使います。まずはrelative属性でブロックを囲い(.frame)表示させたい写真を置きます。フレーム画像は absolute属性を付けることで(.photo_frame)、最初に置いた写真に重ね、枠の付いた写真になるといった具合です。
※枠となるGIFとクラス名は適当に命名してください。

言われてみればなるほどな、という感じ。これならわざわざPhotoshopなどで加工しなくても1度定義してしまえば再利用が可能なので、便利だと思います。


スタイルシートだけでやってみる

もう少し簡単にやりたい場合だと、こんな感じですかね。多くのblogでも見かけるこのやり方は透過GIFなど用意する必要なく写真に枠をつけることができます。


スタイルシートはこんな感じです。

.pict{
padding:4px 6px 6px 4px;
background-color:#ffffff;
border-color:#dddddd #aaaaaa #aaaaaa #dddddd;
border-width:1px 2px 2px 1px;
border-style:solid;
}

こちらはimgタグにpaddingとborder属性を上手に付けることで写真の枠、ドロップシャドウの効果などを見せています。線の太さを少し変えて影っぽくするのも効果的です。



スタイルシートだけでやってみる(応用)

ポラロイドみたいにしたい場合はこんな感じでしょうか。単純にpadding-bottom(paddingだけで指定する場合は3番目数値)を広くしてあげるだけです。



トリッパの煮込み

キャプションをつけたのがコチラです。こちらは少しHTMLの記述が違います。


<div class="pola_cap position_left">
<img width="157" height="102" src="./food_photo.jpg" />
<div class="caption">トリッパの煮込み</div>
</div>

imgタグではなくdivタグに枠のデザインをあらわすCSSを定義し、divタグ内にimgタグをキャプションを記述します。あとはpadding-bottomの値を適当に指定してあげればOKです。


ちなみに、imgタグのpadding属性はXHTMLやHTML staticでは効きませんのでHTML Transitionalにするか、divタグで囲んでください。

One Response to “スタイルシートを利用して画像に枠をつける小技”

  1. 独り言ブログ said:

    6月 08, 07 at 9:44 am

    CSSでブロック要素を中央寄せするには

    text-align:centerでOK! ・・・・・って、ずっと思ってたんです…


Leave a Reply