ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトするテクニック

カテゴリ:CSS小技 2009年8月10日 10:48

ドロップシャドウ。いまや web デザインにはなくてはならない要素ですよね。
Firefox や webkit 系ブラウザなんかでは box-shadow が実装されはじめていますが、ないブラウザの場合はどうしても画像で用意しないといけません。n

しかしその場合、コンテンツの幅は影の幅を含んだものになってしまいます。
全体を覆う背景がそれであれば、ただ余白の数値を多めにすればいいだけですが、例えば影がある要素とない要素が縦に並んでいる場合、そのまま並べたのでは視覚的に影の分だけずれたように見えてしまいます。n

↓こんな感じでずれが生じてしまいます。
ドロップシャドウ分のずれを説明している図

今回はこの影の部分のずれを CSS で解消してデザイン通りの幅を確保するテクニックの紹介です。n

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトする デモ

サンプルダウンロード

テクニック詳細

ネガティブマージンを使う

このテクニックにはネガティブマージンを使います。
上記 CSS のmargin: 0 -8pxの部分です。n

この -8px というのが影の部分の幅です。なので、影の具合によってこの数値は適宜変わることになります。
こうしてマイナス値のマージンを与えることで、(感覚的に)影の幅の分だけコンテンツ領域が縮小したことになります。n

これにもともと想定していた(影の部分を加算しない)幅をボックスに与えてます。
float して左右に分けているマルチカラムでも、ネガティブマージンによってカラム落ちするのを防ぎます。n

最後に、このままだとテキストなどのコンテンツ内容が影の部分にかぶってしまうので padding で適切に余白を取ることによってドロップシャドウを使ったデザインをすっきりと見せることができます。n

このテクニックを使うことで、マルチカラムなどのデザインをする際にボックスを意識してあらかじめ小さくボックスを作る、というようなデザインを殺すことがなくなります。n

IE 対策

IE の場合、ネガティブマージンを指定すると思ったような表示がされない場合があります。
その場合は "IE6で背景が表示されない際にチェックすること" で紹介している「背景が表示されない要素に「position: relative;」を指定」を利用します。n

これで IE 含め、ドロップシャドウの部分だけを無視させてデザイン通りに表示することができるようになります。n

この記事のカテゴリー一覧を見る⇒CSS小技

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/153