[使えるCSSテクニックVol.2] CSS を使って自分のページにステッカーを貼る

集中連載企画「使える CSS テクニック vol.2」もいよいよ第 10 回になりました。
最終回の今回は、CSS を使ってページ上にステッカーを貼ってみます。

STEP 1

まずは貼り付けるステッカーを用意します。
ココでは PNG ファイルを透過設定にしました。
※IE6では使用できません。

STEP 2

あとは HTML 内に以下のように CSS を設定するダケです。
貼り付ける位置は positionで指定します。

<p style="position:absolute; top:0; right:0;"><img src="stecker00.png" alt="使えるCSSテクニック vol.2" width="360" height="210" /></p>

このページの上部に貼られているようにステッカーが表示されます。
とってもカンタンです。

キャンペーンページや特集ページなどに手軽に、でも効果的に使えるのではないでしょうか。

おまけ

サンプルをいくつか用意しました。
各コードを body タグ直下に挿入するダケで使用できます。

<p style="position:absolute; top:0; right:0;"><img src="http://c-brains.jp/blog/wsg/images/stecker01.png" alt="" /></p>

<p style="position:absolute; top:0; right:0;"><img src="http://c-brains.jp/blog/wsg/images/stecker02.png" alt="" /></p>

<p style="position:absolute; top:0; right:0;"><img src="http://c-brains.jp/blog/wsg/images/stecker03.png" alt="" /></p>

<p style="position:absolute; top:0; right:0;"><img src="http://c-brains.jp/blog/wsg/images/stecker04.png" alt="" /></p>

<p style="position:absolute; top:0; right:0;"><img src="http://c-brains.jp/blog/wsg/images/stecker05.png" alt="" /></p>

集中連載企画 「使える CSS テクニックvol.2」も今回で最終回です。
ご愛顧を誠にありがとうございました。
今後とも現場で役に立つ情報をお送り差し上げていきますので、どうぞよろしくご期待ください！