ホームページに影をつけたい

締切済

質問者：ricesew
質問日時：2007/10/26 19:22
回答数：5件

http://www.rankingwalker.net/
このページの様に影をつけたいのですが、どう試行錯誤しても分かりません。。。
どなたかお教え願えませんでしょうか。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： Redpython
回答日時：2007/10/30 00:01

こんにちは again 。

では、コードをプレゼント。
このファイルの場所と同じ場所に、wrapper_bg.gif をダウンロードして保存しましょう。

CSS についてのキーワードは、「参考 URL」で示したサイトより学習しましょう。

初心者であるなら、今後 HTML、CSS、Javascript をバランスよく学習していくと良いですよ。

<html>
<head>

<style type="text/css">

</style>

</head>

<body>

<div id="wrapper">

Hello World !!
<hr>
では、ごきげんよう…

</div>

</body>
</html>

参考URL：http://www.tagindex.com/stylesheet/

- 0
- 件

通報する

No.4

回答者： Redpython
回答日時：2007/10/27 20:16

こんにちは。

影の背景画像の正体は突き止めた様ですね。

「wrapper_bg.gif」
よく見るとこの画像は、左側の影と右側の影を共に含んでいますね。

では次に、このページのソースを表示し、外部から取り込んでいる CSS ファイルの在処をつきとめます。
つまり、「css/base.css」ですね。

このファイルから先ほど調べた画像ファイル名で CSS ファイル内に検索をかければ、どの様に組んでいるかを見破れます。

つまり、

#wrapper {
width: 710px;
margin: 0 auto;
text-align: left;
background: #ffffff url(../images/wrapper_bg.gif) top center repeat-y;
}

ここですね。

後は、スタイルシートや div タグの使い方が分かっていれば簡単でしょう。

この回答への補足

ありがとうございます。
感謝しています。
スタイルシートも初心者なので詳しくご指導ご鞭撻をいただければと思います。
よろしくお願い致します。

補足日時：2007/10/28 16:17

通報する

- 0
- 件

通報する

No.3

回答者： noname#56851
回答日時：2007/10/26 21:34

影は画像です。

正体は……
http://www.rankingwalker.net/images/wrapper_bg.gif
これかな。
分かりにくいと思いますが、幅　710px 高さ　10px　の画像で両端にグラデーションが施されています。
これをセンタリングしながら縦に繰り返し貼り付けてあるのです。
それがバックグラウンドになり、その上に幅　700pxの本体が同じくセンタリングされて表示されています。
ですので本体の両脇に　5px　ずつの影が出来るわけです。