テーブルの影の作り方とセル内に背景画像指定について教えて下さい！

質問

質問：１
テーブルの縁に影をどうすれば付けれるのかを教えて
下さい。

質問：２
テーブルのセル内に、画像を背景として指定します。
繰り返さず、固定します。この画像が正しく認識され
ないブラウザの種類を教えて下さい。
ちなみに、ヤフーのトップページにある、ヤフー検索の
バックに使われている、水色のグラデーションのかか
った画像は、この方法なのでしょうか？それとも、何か
別の方法なのでしょうか？
→http://www.yahoo.co.jp/

どうか、宜しくお願い致します。

回答No.1

elmclose · ベストアンサー

質問１について、

テーブルの縁のように見える部分も、実はテーブルのセルとなっており、そのセルの背景画像とそのセルに表示する画像とを組み合わせて、徐々に薄くなっていく影を表現しているようです。

質問２について、

Yahoo! Japanのトップページでは、水色のグラデーションは、テーブルの背景画像を使って表現されています。

<table width="100%" border="0" cellspacing="0" cellpadding="0"
background="http://img.yahoo.co.jp/images/s6_bk.gif"
height="57">

となっています。
ここで使われている背景画像ファイルは、
http://img.yahoo.co.jp/images/s6_bk.gif
であり、この縦に長細い画像が、繰り返し表示されています。

質問1についても2についても、ページのソースを見ればわかると思います。

なお、質問２で書かれているテーブルのセル内の背景画像は、IEおよびNetScapeでは表示されるようです。他のブラウザでは未確認です。

補足

回答のほう、誠に分かりやすく有難う御座います。
一応、どちらもソースを見たのですが、いまいち
想像が付かなくて、どうしてるんだろうと考えていました。
もし、宜しければですが、確認させて頂いて宜しいでしょうか？

回答：１の私的解釈
セル内に画像をふたつ配置して影の効果を出している。
ひとつは、背景画像に指定。
もうひとつは、普通に画像を配置。

回答：２の私的解釈
縦長の水色グラデーション画像を、セル内の背景画像
として指定して、繰り返している。
ブラウザはIEとNSで確認できた。

で、宜しいでしょうか？

画像をダウンロードして、それぞれ自分でもできるか
試してみようと思います。

解釈が間違っていましたら、面倒をかけますが、
お手すきの際に、ご返答頂けたらと思います。

間違いが無ければ、このまま本当に有難う御座いました。

回答No.3

elmclose

補足します。

元々の質問文と、私のNo.1の回答では、あるサイトのURLを参照していたのですが、恐らく本サイトの管理者の判断により、そのURLを書いている部分が削除されました。

このような改変は、本サイトの規約に照らしても適切でありますので、仕方ないと思います。

削除後に読んだ方は、ちょっと文意が通りにくいところがあると思いますが、まあ、本質的には今残っている情報で全体的な意味はわかると思います。

お礼

最後まで丁寧な対応、誠に有難う御座いました。
影の部分を、自分で作ってみてうまくいきましたので、
もやもやがスッキリしました。

有難う御座いました。(*^_^*)

回答No.2

elmclose

No.1 です。

No.1の補足欄に質問者の方がお書きになった「１の私的解釈」および「２の私的解釈」、両方とも合っています。

gifファイル単体を直接ブラウザに表示させてみると、それがどのような画像であるかわかると思います（既にそうされているかもしれませんが）。

なお、画像をダウンロードして個人的に試してみるのは良いと思いますが、それをそのまま自分のサイトに流用して公開したりすると、元のサイトの権利を侵害することになる場合があるので、ご注意ください。アイデアを参考にすること自体は、通常は問題ありません。