ホームページのデザインが柔軟にできるようになり、ブラウザも整備され、ほぼ表現できるようになってから、「紙のような」デザインであったり、「透明な部分があるように」思わせるデザインであったりというものがたくさん発生しています。「これ、どうやってやってるの？」「ありえない！」とホームページをみて思ったことはありませんか？　

これらは、画像をパズルのように組み合わせることによって表現していることがほとんどです。理解することによって、より深いウェブデザインが可能になるはずです。

よく見かけるテクニック

• 直にスライス切りで対応


• 背景対応＋imgタグでボタン化


• 背景対応＋ｐもしくはdivのブロック要素を配置


• 背景対応＋aタグ（divタグやspanタグの場合も）にdisplay:block;をかけてブロック要素にしてからpositionで任意の場所にボタン化

この４点の方法をきちんと押さえておけば、いろいろと応用がきくはずです。

※どうしてもＣＳＳの要素や反映しているタグを予想＆把握できないときは、safariの開発メニュー「要素の詳細を表示」やfirefoxのfirebugなどのチェックツールを使うと便利です。


・直にスライス切りで対応


デザインカンプから画像を切り出し、そのままレイアウトに組み込む方法です。


・背景対応＋imgタグでボタン化


背景画像の上にイメージ画像をのせて、ボタン化し、リンクなどをはる方法です。このblogでも利用しています。


・背景対応＋ｐもしくはdivのブロック要素を配置


背景画像を反映するブロック要素に対して、枠組みをデザインしたものを背景とし、その上にブロック要素を配置し、marginやpaddingで配置を決める方法。よく使われます。その上に通常のＨＴＭＬの画像が乗ったりします。


・背景対応＋aタグ（divタグやspanタグの場合も）にdisplay:block;をかけてブロック要素にしてからpositionで任意の場所にボタン化


これは、空白のdivが乗っている状態。ボタン画像にみえるところもすべて背景画像という技。aタグのテキストは入れておいて、display:none;で非表示にする。背景画像が大きすぎると読み込みに時間がかかるかもしれません。手抜きなイメージや、各ブラウザでのポジショニングがずれる可能性があるので利用には十分注意を。

あわせてお読みください：
imgタグとＣＳＳでのbackground-image:urlとの違い « vanillate
http://vanillate.org/archives/222