集中連載企画「使える 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」も今回で最終回です。
ご愛顧を誠にありがとうございました。
今後とも現場で役に立つ情報をお送り差し上げていきますので、どうぞよろしくご期待ください！
コメント
いつもいろんな情報をありがとうございます。
pngファイルって時点でピーンときましたが
IE6系だと残念な結果になってしまいますね。
CSSテクには直接関係ないのですけど
IE対策とかのTipsも載ってるといいなぁ･･･
とか思いました。
ちょっと調べれば出てくるんですけどね（汗
これ | 2008年12月02日 18:00
コメントありがとうございます。
そうですね、pngファイルのIE6対策としては、現状だと下記のようなJavascriptライブラリを使用するのが手軽なところでしょうか。
●alphafilter.js
JSファイルを読み込んで、画像に直接クラスを指定するダケで、IE6でも透過画像を使用することができます。
nagai | 2008年12月02日 22:00
コメント投稿した後に更新して見たら
『※IE6では使用できません』の但し書きが
ちゃんと追加されてましたね･･･orz
Tipsありがとうございました。
私もあの手この手で各種ライブラリ使ってますが
alphafilter.jsは初耳でしたので
ぜひ試してみたいと思います。
これ | 2008年12月03日 17:28