- ベストアンサー
CSSで背景とページの境界の枠に影をつけたい。
表題どおりなのですが、 CSSで、背景とページの間の境界線に影をつけたいのですが、 やり方がわかりません。 参考までに以下のように、背景の灰色と、サイトの白の間の境界線にうすい黒い影をつけたいのです。 http://www.sanyo.co.jp/ テーブルならできるのですが、CSSだとちょっとわかりません。 詳しい方、恐れ入りますがご教授願います。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>影を ドロップシャドウ・・・？ >テーブルなら ああ、テーブルみたいなやつね それは枠線の種類を指定すればできるよ。 テーブルで使われてるのは"ridge"じゃないかな http://msugai.fc2web.com/web/CSS/border.html ドロップシャドウは対応ブラウザの問題できびしい http://www.google.com/search?lr=lang_ja&q=css%20%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%82%B7%E3%83%A3%E3%83%89%E3%82%A6
その他の回答 (3)
- dezimac
- ベストアンサー率56% (2365/4208)
テーブルと考え方は極端にかわらないのだけど、 （両）端にぼかし影つけた画像用意して、背景に置いて、マージン等でその部分が見えるように調整するだけです。 気になったページのソースを表示して、余計な部分取り除いていって、よく解読すればわかります。 細かい部分は省くけど、概ねこんな感じ。 両端に影付いた画像を用意（幅：820px、影の幅は10px） <head> <style> <!-- #stage { margin: 0px 5px 0px 5px; background: url("影付き背景画像.gif") repeat-y; } #content { margin: 0px 10px 0px 10px; width: 800px; border: 1px solid red; } --> </style> </head> <body> <div id="stage"> <div id="content"> 内容いろいろ </div> </div> </body>
- neko-ten
- ベストアンサー率55% (1287/2335)
レンダリングで影を付ける場合、ブラウザの仕様によっては意図した動作をしないのでお勧めできないです。。 サンヨーのサイトの場合、DIVの背景画像として使ってるようです。 （影の部分で右クリックして、背景画像を保存すると、影の画像が保存されますね。） 簡単には ・DIV幅と同じ幅で、グラデーション画像を作成 ・影にコンテンツが重ならないようにpaddingの指定 で実装できるかと思います。
- nori_007
- ベストアンサー率35% (369/1048)
背景との境目ですよね。 それなら、バックグランド画像を用意して、Y 方向に繰り返しているだと思います。自信はないのですが、下記の画像かもしれません。 http://www.sanyo.co.jp/koho/img_lib/stage_bg.gif です。
お礼
えっ、じゃあ、なんで私が参考にあげた三洋電機のページは しっかりと影が出てるのですか? >>テーブルで使われてるのは"ridge"じゃないかな テーブルではなくCSSでのやり方を知りたいです。