- 締切済み
ホームページに影をつけたい
http://www.rankingwalker.net/ このページの様に影をつけたいのですが、どう試行錯誤しても分かりません。。。 どなたかお教え願えませんでしょうか。 よろしくお願い致します。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- Redpython
- ベストアンサー率56% (9/16)
こんにちは again 。 では、コードをプレゼント。 このファイルの場所と同じ場所に、wrapper_bg.gif をダウンロードして保存しましょう。 CSS についてのキーワードは、「参考 URL」で示したサイトより学習しましょう。 初心者であるなら、今後 HTML、CSS、Javascript をバランスよく学習していくと良いですよ。 <html> <head> <style type="text/css"> <!-- body { width: 710px; margin: 0 auto; background: #ffffff url(wrapper_bg.gif) top center repeat-y; } #wrapper { width: 700px; margin: 0 auto; text-align: center; } --> </style> </head> <body> <div id="wrapper"> Hello World !! <hr> では、ごきげんよう… </div> </body> </html>
- Redpython
- ベストアンサー率56% (9/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 タグの使い方が分かっていれば簡単でしょう。
影は画像です。 正体は…… http://www.rankingwalker.net/images/wrapper_bg.gif これかな。 分かりにくいと思いますが、幅 710px 高さ 10px の画像で両端にグラデーションが施されています。 これをセンタリングしながら縦に繰り返し貼り付けてあるのです。 それがバックグラウンドになり、その上に幅 700pxの本体が同じくセンタリングされて表示されています。 ですので本体の両脇に 5px ずつの影が出来るわけです。
補足
なるほど。正体が分かったのですが、どこのどの部分にタグを入れればいいのか試してみましたけど、ダメでした。。。
- torayoshi
- ベストアンサー率62% (910/1449)
もしかして「無料でホームページ作り」って書いてある画像のことかな？ http://www.rankingwalker.net/images/main.jpg
補足
はい、そうです。 よろしくお願い致します。
- n31792
- ベストアンサー率31% (5/16)
どこの部分ですか？具体的に言われないとさっぱりわかりません。 たぶん左右のことかとは思いますが。。 とにかく影といってもいろいろあるのでどこかわからないと話になりません。
補足
はい、そうです。左右です。 できれば上下もやりたいのですが。 ご教授下さい。
補足
ありがとうございます。 感謝しています。 スタイルシートも初心者なので詳しくご指導ご鞭撻をいただければと思います。 よろしくお願い致します。