80 エリアを重ねたような立体感のあるレイアウト

80　エリアを重ねたような立体感のあるレイアウト
制作・文＝高津戸壮（zudolab）

To Use XHTML CSS JavaScript Photoshop Illustrator Fireworks 透過PNG

---

【1】サンプルで用意したデザインは、ページの一部であるが、エリア同士が重なり合っているように見える。このようなデザインを実現するのに、難しいCSSの知識は何も必要ない





【2】このデザインをXHTMLで組んだときの各エリアの枠は、このようになっている。エリア同士を重ねているわけではなく、指定している背景画像に工夫することで、重なり合っているように見せている。これは緑の枠でくくった部分で囲まれている部分に、背景画像を指定している


XHTML


CSS

【3】エリア同士をただ並べてみても、いまひとつ印象が薄い。そんなときは、エリア同士を重ねたような立体感のある表現を試してみよう。背景画像の工夫ひとつで、立体的に見せることが可能になる

▼使いどころ エリア同士をただ並べてみても、いまひとつ印象が薄い。そんなときは、エリア同士を重ねたような立体感のある表現を試してみよう。背景画像の工夫ひとつで、立体的に見せることが可能になる。