こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

htmlとcssを使って、現在webサイト制作の勉強を行っています。

htmlとcssを使って、現在webサイト制作の勉強を行っています。
現在、<body>にスタイルシートから背景画像を固定で表示させ、
その上に画面中央に配置する形でwebサイトを表示させています。
そのサイトの両脇だけを少し濃いめの色で表示させたいのですが、どうしたらいいでしょうか?
できたら、一番後ろにある背景も透かして見せたいのです。
どうか知恵をお貸しください。
宜しくお願いします。

投稿日時 - 2010-09-30 18:09:51

QNo.6218633

すぐに回答ほしいです

質問者が選んだベストアンサー

ブラウザの脇側が濃くなるのではなく、
おそらく、中央配置したコンテンツの両脇に影を付けたいのでは?
-----------------------

幅1200px程度×高さ適当で、
コンテンツの影が出来るようにその部分だけをグラデーションを掛けて濃くした画像を用意する。
body{ background: url(その画像) center top; margin: 0; padding: 0;}
#wrap{ background: white; margin: 0 auto; width: 幅px;}


もしくは、body直下にもう1つのdivボックスで全体を囲い、
全体より影の分の幅を増やす。
その背景に影画像を配置する。
(.pngならbodyの背景が透けて見えるようになるけど、IE6未対応)
背景色となんとなく合わせながら透過グラデーションで馴染ませるのが良いかと。
<body>
<div id="wrap"> <!-- 例:840pxの影の為のボックス -->
<div id="wrap2"> <!-- 例:800pxのコンテンツボックス -->

body{ background: url(背景画像); margin: 0; padding: 0;}
#wrap{ background: url(影画像) center top; margin: 0 auto; width: 840px;}
#wrap2{ background: white; margin: 0 auto; width: 800px;}
-----------------------
以上、DTD、標準モードで。


IEやCSS3でシャドウを付ける方法もあるけど。

投稿日時 - 2010-09-30 22:11:15

お礼

ご回答ありがとうございます。

申し訳ないのですが、影を表示させたいわけではないのです。
webサイトを中央配置にすると、両サイドが開いているブラウザの横幅分余白ができると思います。
その余白部分を少し暗い色合いにしたいのです。

最背面 ちょっとしたイラストが入った背景画像
1つ手前 (1)中央配置にしたwebサイト(背景の設定はしないので、最背面のイラストが直接見える)
    (2)両脇に透過設定にした画像を表示(透過なので、最背面のイラストがうっすら見える)

イメージとしてはこんな感じです。
さらに、ブラウザの横幅を広げた時に中央配置にしたwebサイトはなりゆきにまかせて移動するので、
それに合わせて両サイドの透過背景も必要な分だけ広げたいのです。
こんなのは実装するのは無理でしょうか?

投稿日時 - 2010-10-01 14:42:46

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

>そのサイトの両脇だけを少し濃いめの色で表示させたいのですが、どうしたらいいでしょうか?
borderじゃダメなんでしょうか?

>一番後ろにある背景も透かして見せたいのです。
透かせたい場所をもともと薄くした画像を用意しておくのはどうですか?

投稿日時 - 2010-09-30 19:38:21

お礼

ご回答ありがとうございます。

>borderじゃダメなんでしょうか?
webサイトとブラウザの余白全体を少し暗い背景にしたいのです。


>透かせたい場所をもともと薄くした画像を用意しておくのはどうですか?
それでは、薄い場所と濃い場所と、背景が全く別に見えてしまうような気がするのです。

投稿日時 - 2010-10-01 14:37:56

あなたにオススメの質問