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

質問

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

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

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

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

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

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

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

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

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

回答No.4

noro6677

画像を使う。

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

回答No.3

cc_sakura

こんにちは。

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

回答No.2

神崎 渉瑠（@taloo）

> その設定がいまいちよくわかりません。
スタイルシートーのbackground-image

回答No.1

mtfoggy

http://blog78.fc2.com/r/retorotype/file/3sha.gif