CSSで画像の装飾：css Tips7

前回は、背景画像を使用したCSSのボックスデザインにつきまして、サンプルコードをご紹介しつつ詳しく記載いたしました。

CSS3を使用すれば、あえて画像を使用しなくとも、ボックスデザインを装飾することは可能ですが、デザインの幅を広げたい場合は、やはり画像を使用したほうが、ありきたりのデザインではなく、オリジナルのデザイン性に優れたデザインをおこなうことが可能になる事から、あえて背景画像によるボックスデザインをご紹介いたしました。

サイト作成時、ワイヤーフレームでデザイン作成をおこなうことと思いますが、実現できるか、できないにとらわれることなく、幅広いスキル、表現方法など、身につけておくことをおすすめいたします。

それでは今回はッ、

・CSSで画像の装飾
・背景全体にテクスチャを使用
・画像とキャプションをポラロイド風に
・透過PNGを使って画像にフレーム

上記について記載していこうと思います…。

CSSで画像の装飾

余白やボーダー、背景画像などを工夫して画像をさまざまに装飾することが出来ます。

グラフィックソフトなどで直接画像に装飾を加えなくても、CSSだけでもかなりの範囲をカバーすることが出来ます。
また、グラフィックソフトで加工をおこない、重い画像になってしまうのであれば、CSSで加工したように表現することが出来れば、ページ全体のサイズも抑えることができ、SEOにも有効なように個人的には思っています。

今回は、下記の画像とHTMLソースにCSSで装飾を加えたパターンをご紹介いたします。

背景画像にテクスチャを使用

画像とキャプションをポラロイド風に

透過PNGを使って画像にフレーム

画像の装飾

ここではCSSを駆使して画像に3パターンの装飾を施す方法をご説明いたします。

使用する画像そのものには一切装飾は施していません。
HTMLソースも単純で、画像をdiv要素で囲っただけの状態になります。

この状態を変更せずにCSSだけで装飾できる例と、HTMLソースにキャプションやspan要素を加えることで実現できる例をご紹介いたします。

装飾前の状態

<!– html –>
<div class="box">
<img src="image.jpg">
</div>

背景全体にテクスチャを使用

背景で使用するテクスチャ画像を用意します。
img要素に余白を10pxと設定し、背景画像に作成したテクスチャ画像を適用します。

<!– css –>
.box img {
border: 1px dashed #fff;
padding: 10px;
background-image: url(bg1.jpg);
}

※こちらでは背景と同じ色で1pxの点線のボーダーを設定し、ギザギザとした風合いを表現しています。

画像とキャプションをポラロイド風に

こちらではポラロイド風の表現にするため、HTMLソースにp要素を加えキャプションを追加、img要素に背景色やボーダーを指定し、下側の余白を多めに設定します。

キャプションであるp要素は適切な位置に表示させるため、幅を画像と同じ364pxと設定し、中央揃えになるよう指定します。
また、p要素をpositionプロパティで絶対配置として指定、bottomとleftを0とし、親要素であるdiv要素は絶対配置の基準となるようにpositionプロパティで相対配置として指定します。

<div class="box">
<img src="image.jpg">
<p>めがね橋の下でパシャリ！</p>
</div>

<!– css –>
.box {
position: relative;
}
.box img {
background: #fff;
padding: 10px 10px 40px 10px;
border: 1px solid #c3c3c3;
}
.box p {
width: 364px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}

透過PNGを使って画像にフレーム

透過PNGを使うと、上に記載したサンプルのように画像にフレームを付けたり、半透明の画像を重ねたりする処理が可能です。
まず、フレームとして使用する画像を用意します。画像の縦横幅は、写真サイズと同一としました（frame.png）。

<!– html –>
<div class="box">
<span></span>
<img src="image.jpg">
</div>

<!– css –>
.box {
position: relative;
}
.box span {
background: url(frame.png) no-repeat center top;
width: 364px;
height: 273px;
position: absolute;
}

画像に透過PNGを重ねて表示させるため、HTMLソースにspan要素を加える必要があります。
span要素はpositionプロパティで絶対配置として、画像と同じ幅と高さを設定、backgroundプロパティで作成した透過PNGを設定します。
また、親要素であるdiv要素（box）が基準となるようにpositionプロパティを相対配置としています。

ECサイトでよく見かける方法

<!– html –>
<div class="box">
<span>sold out</span>
<img src="image.jpg">
</div>

<!– css –>
.box {
position: relative;
}
.box span {
position: absolute;
width: 364px;
height: 273px;
text-align:center;
line-height: 273px;
font-size: 2em;
font-weight:bold;
background:rgba(0,0,0,.5);
color:red;
}

少しご説明いたしますと、初め画像を通常通り表示していたものに、「売り切れ」になってしまった場合、span要素をインライン要素として付け加え、テキストで「sold out」、そして、span要素をCSSで装飾すると上記のように、あっという間にユーザーに売り切れたことをお知らせすることが可能になります。

今回は、CSSで画像の装飾につきまして記載いたしました。

個人的のよく使用しますテクニックといたしましては、ポラロイド風にCSSで加工する方法になります。
こちらの方法であれば、画像を入れ替えるだけで、それ以外の装飾はCSSで記載してございますので、ページの更新などが楽におこなえることとなります。

また、透過PNGで画像にフレームを付ける方法も、透過PNG如何でデザイン的に優れた表現方法となる事と思います。

関連記事といたしまして、CSS3による複数の画像を指定する方法を下記に記載します！