スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
2006-01-25 注記
スキン変更してウインドウズ IE は互換モードで動作するようにしたため以下の例は意図した反映状態になりません。IE6 なんて非対処だ！とも思ったのだけど「そんなことも知らんのか」と思われるのもシャクなので XML 宣言とっぱらってやったページをいちおつくりました。準拠モード IE6 に対処させたい方は見てください。（ソッチのほうが多いのかな？）
CSS を画像で飾るんではなく、img要素で普通に配置した画像にclass（またはid）指定をいれて、CSSで飾る方法。
border: 3px inset #fff; padding:3px; とかで簡単に「額縁効果」とかはできますが、ここではCSSでビジブル効果のために必須の「背景画像効果」をかいてみた。
画像にカゲつけるとかの効果を CSSでよくやっているのだけど、通常は画像の上位ブロックを作って（画像はインライン要素だから、通常ブロックレベル要素で囲うことになる）そこに背景画像を指定していた。だけどある日フト思い付いた。インライン要素の画像自体に背景指定をすることだってできるということに。
カゲ画像の位置は、padding でも background-position でも動かせる。上と下のカゲ画像は同じもの。padding で元の画像位置をずらす。
background-position でカゲ画像位置をずらす。
たまにはみんながつかえるワザなんかもかいてみなきゃ。画像にカゲつけるのって、デザインの基本として、簡単にソレナリに効果的な表現になる基本みたいなモンですしね。
尚、この CSSは「インライン要素への padding 指定が必須なので、標準準拠仕様ブラウザでなければカゲみえません。そうでない状況でも「画像が GIF、PNG等で背景透過するもの」であれば、ここのパディング分透過すれば同じようになります。あ、でもそもそもインライン要素に背景画像が指定できるかどうかという問題もある。少なくとも IE5（Windows）は、インライン要素にパディング指定はできません（無視する）が、背景画像は指定できます。
カゲつけでなくても 2枚重ねレイアウトということはあったりするわけで。
ナニゴトもやりすぎは禁物だが、この画像を上位ブロックで囲むと、3枚以上重ねることもできるわけです。で、透過画像なんかを使うと。
あとはご自分で好きに実験してください。
更新 2007-02-14 09:06 初回投稿 2004年10月29日 00:08
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto