- ベストアンサー
CSSで背景とページの境界の枠に影をつけたい。
表題どおりなのですが、 CSSで、背景とページの間の境界線に影をつけたいのですが、 やり方がわかりません。 参考までに以下のように、背景の灰色と、サイトの白の間の境界線にうすい黒い影をつけたいのです。 http://www.sanyo.co.jp/ テーブルならできるのですが、CSSだとちょっとわかりません。 詳しい方、恐れ入りますがご教授願います。
- ken_0401
- お礼率30% (152/504)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （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 です。
関連するQ&A
- ページと背景画像との境界線の影の付け方
同じような質問なのですが少し違うのでご質問させていただきました。 ページと背景画像との境界線に影をつけたいのですが 背景の画像はどんなモニターのサイズでも画像の中心やデザインを変えたくなかったので http://webdesignrecipes.com/full-page-background-image-sample-01.html こちらのサイトを参考にcssで背景画像を配置しています。 よろしくお願いいたします。
- ベストアンサー
- HTML
- Netscapeで見たら、テーブルの背景色がなくなっていました！！
Mac,WindoiwsのIEで自分の作ったホームページを見るとうまく表示されるんですが、MacのNetscapeで自分のホームページを見て唖然としてしまいました。 私のホームページは基本的に灰色の背景のテーブルの中にテキストを白で入れているんですが、MacのNetscapeで見てみると、その背景の灰色がなくなっていて、テキストの色が白だけに文字がまったく読めない状態になっていました。これはどうしてなんでしょうか？ 青とかの背景のテーブルの色はちゃんと色が出てるのに、なんで灰色だけなのでしょうか？ また灰色の背景のテーブルの中でもちゃんと色が出てるものもあるのです。あまりにも意味不明なので、どなたか分かる方教えてください。これでは文字の読めないホームページになってしまいます。
- ベストアンサー
- CSS
- テーブルレイアウトしてしまっている後でCSSの背景を適用したいです。
私HPをつくっているのですが、 テーブルレイアウトをしているのですが、 最近CSSを勉強しだしまして、 テーブルレイアウトのうしろの背景色を設定しようと思っております。テーブルはすべて中央揃えにしておりまして、 そのテーブル以外の部分に背景色を設定したいと思っております。 どのようにしたいかというと 参考HPをあげておきます。 http://www.neutrals.jp/works.html http://www.kekkon-navi.org/ http://www.plusmoney.jp/ この用な感じにメニューや本文の部分は白くて、 それ以外のところの背景が色をついている状態にしたいです。 外部CSSで全ページに適用していこうと思っているのですが、 CSSにはどのように記述したらよろしいでしょうか？ お詳しい方よろしくお願いいたします。
- ベストアンサー
- HTML
- 背景にグラデーション、外枠に影をつけたい
http://www.musclemusical.com/ ドリームウィーバーでこちらのサイトのように、 背景はグラデーション、更に外枠テーブルの左右と下に影をつけたいと思っています。 調べていたところグラデの背景は、 cssスタイルのbodyでバックグラウンドで指定するということで、 やってみたら成功したのですが、 ネットで外枠の影のつくりかたを調べたところ、それもbodyタグを使うとなっていました。 両方bodyタグのbackgroundで指定できるのでしょうか？ どちらかしか使えないようなのですが.... CSS等ははじめてでさっぱり分かりません。 言っている事が意味不明かもしれませんが、 背景と外枠の影と両方どう実現すればいいか教えていただけると嬉しいです。 宜しくお願い致します。
- 締切済み
- HTML
- Dreamweaver CS4＿影のつけ方
お世話になります。 まず最初に、、HTMLどころかWeb全般についても、ど素人です。。 質問についてですが、どのように説明したらいいのかわからないので、まず参考URLをご確認いただけたら幸いです。 http://www.yokumoku.co.jp/index.html このような感じで白バック背景にうっすら影を入れたいと思っているのですが、CSSルール定義で背景に影つき白バック画像を配置しても、もちろんその他のページで縦の長さが変わってきますし.....ページのサイズに合わせてY軸に伸びる影など付けられるのでしょうか。。 文章を読んでお分かりと思いますが本当に素人で申し訳ございません。せめてHTMLの基本を覚えてから質問するべきなのですが、PCを唯一触れる私が急遽対応しなければいけない状態になってしまい、参考書片手に悪戦苦闘しております。。なんらかのヒントを頂けましたら本当に助かります。ちなみに関係ないかもしれませんがphotoshop、illustratorに関しては熟知しております。では、何卒よろしくお願い致します。
- ベストアンサー
- グラフィックソフト
- word-ページの背景印刷
こんにちは。只今ワードで年賀状作成しております。 ページレイアウト→ページの背景→ページの色→ 塗つぶし効果をし背景を色々変えてるのですが、印刷すると背景が白のままなんです。 どうしたら画面どうりに印刷できるのでしょうか？？
- ベストアンサー
- 正月・年末年始
- dreamweaverMXテーブル背景に影を付けたいのですが…。
いつもお世話になっております。 会社のHP作成をまかされたのですが、HP作成はまったくの未経験のため 悪戦苦闘しています。 けど、何とかクオリティの高いものを作りたいです。 いろいろ参考書も読みましたが、CSSとかいまいち理解できません。 HPのテーブルがシャドウによって浮き出ているようにしたいです。 http://www.lithmatic.net/lithApService/ このようなイメージです。 スクロールしても切れる事無く、なおかつ最後尾には下影で 終わる(参考urlのような感じで)にしたいのですが、どうすれば良いのでしょうか？テーブルで影を付ける方法なら分かるのですが、 それだとスクロールでは切れてしまいますよね？ 背景としてシャドウを使いたいと思います。 色々調べて、こちらのサイトで http://oshiete1.goo.ne.jp/qa3551329.html の回答を見て、illustratorにて同じ比率のバックでで壁紙を作成しました。ただ、作成HPの幅は800pxにしているので800pxのボックスに シャドウを作っているような形です。 ですが、ページプロパティの背景で入れると、横に作成したはずなのに 縦に配置されてしまいます。 CSSにてY軸繰り返し(？)で作成したものの、今度は作った壁紙が まったく反映してくれません。真っ白なままです。 どうすればいいか分かりません。 あと最後尾部分のシャドウはイメージを貼付ける方法しか思い 浮かばなかったのですが、壁紙として作る事は可能なのでしょうか？ 初心者のため分かりやすく教えて頂けると助かります。 使用ソフトDreamweaverMX MacOS10.4になります。 アドバイス宜しくお願い致します。
- 締切済み
- ホームページ作成ソフト
- 背景に画像を使ったページを作りたい。
タイトルの通り、DreamWeaverを使って背景に画像を使ったページを作りたく方法を考えています。ちなみにレイヤー、ＣＳＳは使いたくありません。 自分の少ない知識で考えると、ページプロパティで背景画像を選択して、その上にテーブルを使ってテキスト等を配置する…それしか思いつかないのですが、他に方法はあるのでしょうか？ あと、ページプロパティで背景画像を選択すると、ずっとリピートしてしまうと思うのですがリピートさせない方法はあるのでしょうか？ また、大きく重い画像をページプロパティで背景に設定した場合、やはりページの立ち上がりの時間は重くなるのでしょうか？ 経験が浅いため、ＨＰ制作中にいくつも疑問にぶち当たってしまいます。 どなたか、初心者（私が）と言うことを踏まえて、教えていただけないでしょうか。お願いいたします。
- ベストアンサー
- CSS
- CSSを使用したページデザイン・背景色が変わらない
現在CSSを多用したページのレイアウトを作成しています。 ある程度のレイアウトが出来てきたので背景色を付け加えてみようと思ったのですが 何故か背景色が変更できません。 中身としてはフッターの固定のために<BODY>内に親要素としてコンテナを作成して その中にメインコンテンツを入れています。 BODYに対して背景色の指定をしてもコンテナの外の色の変化もないく コンテナの背景色を指定しても同じ状態です。 CSSの知識も乏しいので原因がわからずお手上げ状態となってしまいました。 下記にhtmlとCSSのリンクを掲載しますので 原因が分かる方がいれば教えてください。 素人なのでソースは汚いですがそこはそっとして置いてください… http://beatprovider.info/oshiete/index.html http://beatprovider.info/oshiete/style.css
- ベストアンサー
- ホームページ作成ソフト
- CSSで背景に角丸長方形を置く方法
CSSで背景に角丸長方形を置く場合はどのようにすればいいのでしょうか？ テーブルだと一番上と一番下、さらにその他の部分と分けて背景をつければ大丈夫だと思いますが、CSSだとどのようにして作るのでしょうか？ やっぱり3つのdivで分けて作成するしかないのでしょうか？ http://www.takasu.co.jp/about_operation/price/index.html また、上記の参考サイトのようになあにテーブルが入っている場合はどうすればいいのですか？ テーブルを途中で区切るわけにもいかなそうですし・・・ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
お礼
えっ、じゃあ、なんで私が参考にあげた三洋電機のページは しっかりと影が出てるのですか? >>テーブルで使われてるのは"ridge"じゃないかな テーブルではなくCSSでのやり方を知りたいです。