Web2.0において　サイドの影のつけ方

締切済

質問者：zetsu_info
質問日時：2007/03/24 18:03
回答数：4件

こんにちは。はじめまして。
いまだに中学生の未熟者ですが、質問があるので投稿いたします。

Web2.0風を目指してサイト制作をしています。
そこで質問があります。

先月ネットサーフィンをしていて見つけたサイトなのですが

http://retorotype.blog78.fc2.com/

こちらのサイトの両サイドにある影のようなバーはどのようにすれば
取り付けれるのでしょうか？

まだまだ未熟者なのですが、画像を使用しているものだと思うのですが
その設定がいまいちよくわかりません。

検索などで調べてみたのですが、答えがだせない現状です。
HTMLとCSSに関する知識は未熟相当なものですが、あります。

どなたか、もしご存知の方がいらっしゃいましたら
お答え願いします。愚問申し訳ございません。

よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4

回答者： noro6677
回答日時：2007/03/25 19:34

画像を使う。

>Web2.0風を目指してサイト制作をしています。
こんなものWeb2.0風でも何でもないですよ。
Web2.0がなにか学びましょう。

- 0
- 件

通報する

No.3

回答者： cc_sakura
回答日時：2007/03/25 02:20

こんにちは。

http://retorotype.blog78.fc2.com/

このサイトのソースを見てください。
BODYタグ以下の一番外側を<div id="container"></div>で囲っています。
そこが影の内側で771pxになっています。

そして、CSSでBODYタグに適用させているイメージが779pxです。
これを真ん中に表示させて縦方向にリピートさせています。

画像を見ると、左右4pxに色が付いていると思います。（これが影になる）
左右4px以外の白い部分は771pxの<div id="container"></div>の内容が入りますので、上手く779px-771px=8pxで左右に4pxの影がつきます。

つまり、本文を書く枠より幅が拾い、左右を黒白でグラデーションした画像を用意すれば影をつけられます。
高さはリピートするので1pxで十分です。

詳しいコードは「http://retorotype.blog78.fc2.com/」を参考にすれば分かると思います。

参考URL：http://www.htmq.com/style/index.shtml