てんぽ: 可変幅で両側にドロップシャドウ(div一重で)

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

可変幅で両側にドロップシャドウ(div一重で)

2007年08月16日(木)

background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン(画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような)を実現できます。 しかも必要となるdivはひとつだけです。


このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。

<div id="left">
  <div id="right">


  </div>
</div>
#left {
 width: 90%;
 margin: auto;
 background: url(shadow-left.gif) top left repeat-y;
}

#right {
 background: url(shadow-right.gif) top right repeat-y;
}

なお、ここでいう「リキッドデザイン」とはコンテンツ幅を%で指定した(=左右の余白率一定の)レイアウトを指しています。 コンテンツ幅をemで指定したいわゆるエラスティックレイアウトや余白の幅をemやpxで固定したものは含みません。

さて、個人的に、このdivが二重になっている構造が気に入りません。 CSS2.1ではひとつのボックスに背景画像はひとつしか指定できないので、可変幅で両側に影をつけるにはふたつのボックスが必要です (固定幅なら両側の影をひとつの大きい画像にまとめられるので必要なボックスはひとつで済む)。

ふたつのボックスとしてhtml要素とbody要素にそれぞれ背景画像を指定する方法が考えられますが、 IE6では初期コンテナブロックを生成する要素の幅を指定できないバグのためにうまくいきません。

二重のdivが気に入らないので、せめてdivひとつでどうにかしたい。というわけで、body要素とdiv要素に背景画像を指定する方法ですが、 同じバグのせいでIE6の後方互換(Quirks)モードでうまくいきません。 このようにdiv二重の場合と同じやり方ではうまくいかないのですが、実はある工夫をすることでこのレイアウトが可能になります。

その工夫とはbackground-positionです。body要素に幅を指定せずに、bodyの背景画像の位置がdivの左端になるようにbackground-positionで調整します(右側の影はdivの右端に指定する)。 divは幅90%でしかもセンタリングされているとすると、左側の影の画像はbody要素の左から5%の位置に表示されなければなりません。

background-positionを%単位で指定した場合の仕様はややこしいもので、 background-position:5%とは「画像の左端を該当ボックスの左端から5%の位置にする」のではなく、 「画像の左から5%の位置と該当ボックスの左から5%の位置を一致させる」という意味になります。

したがって、左側の影の画像は「幅100pxで、左から5pxの位置から影が始まる」ように作っておき、 bodyに対してbackground-position:5%と指定することで、影の位置がdivの左端になるようにします。

#133
カテゴリ:HTML・CSS
タグ[ CSS HTML ]

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/133-bea088ee

<<フォーム部品はデフォルトスタイルで | FC2ブログで管理人のコメントを区別して表示するカスタマイズ>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。