• ベストアンサー

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

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

  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

ブラウザの脇側が濃くなるのではなく、 おそらく、中央配置したコンテンツの両脇に影を付けたいのでは? ----------------------- 幅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でシャドウを付ける方法もあるけど。

kreuz_z
質問者

お礼

ご回答ありがとうございます。 申し訳ないのですが、影を表示させたいわけではないのです。 webサイトを中央配置にすると、両サイドが開いているブラウザの横幅分余白ができると思います。 その余白部分を少し暗い色合いにしたいのです。 最背面 ちょっとしたイラストが入った背景画像 1つ手前 (1)中央配置にしたwebサイト(背景の設定はしないので、最背面のイラストが直接見える)     (2)両脇に透過設定にした画像を表示(透過なので、最背面のイラストがうっすら見える) イメージとしてはこんな感じです。 さらに、ブラウザの横幅を広げた時に中央配置にしたwebサイトはなりゆきにまかせて移動するので、 それに合わせて両サイドの透過背景も必要な分だけ広げたいのです。 こんなのは実装するのは無理でしょうか?

その他の回答 (1)

回答No.1

>そのサイトの両脇だけを少し濃いめの色で表示させたいのですが、どうしたらいいでしょうか? borderじゃダメなんでしょうか? >一番後ろにある背景も透かして見せたいのです。 透かせたい場所をもともと薄くした画像を用意しておくのはどうですか?

kreuz_z
質問者

お礼

ご回答ありがとうございます。 >borderじゃダメなんでしょうか? webサイトとブラウザの余白全体を少し暗い背景にしたいのです。 >透かせたい場所をもともと薄くした画像を用意しておくのはどうですか? それでは、薄い場所と濃い場所と、背景が全く別に見えてしまうような気がするのです。

関連するQ&A

  • これから勉強をするWEBクリエイターはCSS3?

    windows7のサポートが切れて、PCサイトでもCSS3でWEBサイト制作の仕事が完全に出来るようになったら、アニメーションなども事足りるので、相当複雑なことをやるプログラマー出なければJQUERYいらな苦なるのでしょうか? PCサイト以外はすでにWEBクリエイターはCSS3だけで十分になっているのでしょうか? つまり、これから勉強をするWEBクリエイターはCSS3とJQUERY両方学ぶ必要があるのでしょうか? これからやるならCSS3だけでも良いのでしょうか?

    • 締切済み
    • CSS
  • 現在ウェブデザイナーを目指して勉強しています。

    現在ウェブデザイナーを目指して勉強しています。 ウェブのスクールには通っていますが、cssレイアウトの基本の部分にしか触れておらず、細かい設定がこれでいいのかどうか迷うことが多いです。 ブラウザ上では表示できても、見た目は同じでもスタイルの設定がかなり違うと思います。 プロの目から見て、このソースはどうなのだろうと悩むことばかりです。 htmlのソースはほかのページを参考にできてもスタイルの記述内容はみることができないので、悩みます。 スタイルのソースをチェックするのに、何かいいサイトやコミュニティーはないでしょうか? どなたか知っている方がいたら、教えてください。

    • ベストアンサー
    • HTML
  • CSSの設定

    CSSの初心者です。 両端に背景色が表示されるようなページを作りたいです。 どんな幅の画面でも中央にコンテンツが中央に配置されるようにしたいです。どのようにCSSを記述すればいいでしょうか?

    • ベストアンサー
    • HTML
  • サイトは中央配置、背景に画像、または色をつける

    css初心者です。 サイト(すみませんこの言葉でいいでしょうか?)を ブラウザ画面の中央に配置したいとき cssでbodyを中央配置にしています。 その両サイドにも、色または画像をつけたいのです。 テーブルを使用せず 下記のページのように サイトは中央に配置、背景に色や画像をつけるには cssでどのように指定すれば よろしいでしょうか? http://www9.nhk.or.jp/umechan/ http://www.nikoand.jp/ よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • Web制作 レイアウトの決め方について

    Web制作 レイアウトの決め方について HTML、CSSでWebサイト制作をしているWeb業界未経験のものです。 実際サイトを作る時に、何をどこに配置するといったレイアウトを決めると思うのですが、皆さんは綺麗に見せるためのレイアウト方法や、何か型や、テンプレートのようなものを参考にしながら作っているのでしょうか? 私は未経験からWebデザイナーへの転職用の作品を作っている最中なのですが、レイアウトはなんとなく自分の勘で決めて作っていたので、それだとあまり作品の完成度としてはイマイチになってしまう気がするのですが、何かアドバイス頂けると幸いです。 ちなみにお皿のブランドサイトを作っています。

  • 下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定する

    下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定するには? お世話になります。css初心者です。 このサイトみたいに、http://www.blackcatpedals.com/pedal_od_1.html (1)ヘッダー部分のデザインがコンテンツ部分にまで関わっている(参考サイト→top左上のエフェクター写真みたいなデザイン) (2)コンテンツ枠の背景(参考サイト→情報が表示される部分=中央白部分/両サイドに暗い壁のような背景)をtopから表示させ、情報量でheightが可変してもコンテンツ枠全体が違和感なく表示されている といったデザインのwebサイトを制作したいと考えています。 自分は全体の背景を#bodyにbackground-image no-repeatで表示していますが、#contensのbackground-colorを指定すると、ヘッダーからコンテンツ部分にまで関わっている上部のデザインが塗りつぶされてしまいます。 かといって、background-colorを指定しないと、背景が切れてしまいレイアウトが崩れます。これを解決するにはどうしたらよいのでしょうか? 参考サイトはどのようにcssを組んでいるのでしょうか? どなたか教えてください、よろしくお願いします。

    • ベストアンサー
    • HTML
  • html・cssによる背景の2重設定

    HP制作をしているのですが… 少々デザインを凝ってみようかなー、と考え、 背景の2重設定を思いついたのですが、どうしても表現できないのです。 私が言う背景の2重設定とは… 背景Aと背景Bがあり、背景Aは固定されているのですが、背景Bは画面中央に表示される-というものです。 画面をスクロールをしても背景Bは常に画面中央に表示されていて背景Aの上に背景Bは存在する-という形になっております。 私が試したhtml・cssを以下に記載したいとおもいます。 <html> <head> <title></title> <style type="text/css"> body{ background-image: url(B.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; } </style> </head> <body background="sozai/haikei/A.gif"> <table width="100%" height="1500" border="0" cellpadding="0" cellspacing="0"> <tr><td> </td></tr></table> </body> </html> -とこのような形になっております。 背景Aを透過gifを用いて背景Bを表示させようと試みたのですが、画面全体に透過gifを用いるとスクロール時に読み込みに時間がかかって…大変ユーザーに見にくくなってしまいました。 質問の回答の程、どうかよろしくお願いいたします。

  • WEBサイト制作初心者に役立ちそうなブログやサイト

    WEB制作を始めてまだ間もないのですが(今まで制作したのは3サイト)、今後制作をスムーズに行うにあたり役に立つサイト、便利なサイトなどをご存知の方がいらっしゃいましたら、教えていただけるとありがたいです。HTML、CSS、デザイン関連に詳しいサイトであると嬉しいです。よろしくお願いいたします。

  • webサイト制作、デザイン作成について

    webサイト制作、デザイン作成 適切な文字や画像の配置位置、大きさ、幅をどのように考えて作っているのかがよくわかりません。 現在未経験からwebデザイナーへの転職を考えているものです。 webサイト制作をするために、参考となるwebサイトを見ているとき、文字の位置や画像の幅など、なぜこの位置なのか、なぜこの画像はこの幅なのかと思うことが頻繁にあり、webサイトを自身で作成しているときも、文字の配置位置や画像の大きさなどを参考サイトに合わせながら作っているため、なぜこの位置に文字を置いたのか、なぜこの画像、このフォントサイズなのか、なぜここにこの見出しを持ってきたのか、と聞かれても答えることができません。 一応ノンデザイナーズ・デザインブック [第4版]を一通り読み終え、近接、整列、反復、コントラストの基本原則は学びましたが、実際HTMLで文字位置やロゴの位置、見出しの場所等は参考サイトの複数の共通一を見ながら決めているため、自分自身でもよくわかっていません。 webサイトを作成する方は、どの位置に文字を配置するか、画像はどの程度の大きさにすれば良いか等々考えながら作っているのは承知ですが、いったいどのようにして初心者の自分はサイトを作っていけばよいのでしょうか? ちなみに勉強を始めて1ヶ月15日目 HTML CSSの基礎学習 Photoshop、illustratorの基本操作 ノンデザイナーズ・デザインブック [第4版]の4原則まで既読済み

  • Webの背景について

    今HTML、CSSなど使ってHPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか? 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですがどうしてもチェックの上に加工した画像を右下に固定したいので教えてください。 メモ帳より作成しています。 今月中に仕上げたいのでよろしくお願いします