Dreamweaver CS4＿影のつけ方

質問

お世話になります。
まず最初に、、HTMLどころかWeb全般についても、ど素人です。。
質問についてですが、どのように説明したらいいのかわからないので、まず参考URLをご確認いただけたら幸いです。
http://www.yokumoku.co.jp/index.html
このような感じで白バック背景にうっすら影を入れたいと思っているのですが、CSSルール定義で背景に影つき白バック画像を配置しても、もちろんその他のページで縦の長さが変わってきますし.....ページのサイズに合わせてY軸に伸びる影など付けられるのでしょうか。。
文章を読んでお分かりと思いますが本当に素人で申し訳ございません。せめてHTMLの基本を覚えてから質問するべきなのですが、PCを唯一触れる私が急遽対応しなければいけない状態になってしまい、参考書片手に悪戦苦闘しております。。なんらかのヒントを頂けましたら本当に助かります。ちなみに関係ないかもしれませんがphotoshop、illustratorに関しては熟知しております。では、何卒よろしくお願い致します。

回答No.1

einn · ベストアンサー

うーんと、ちょっと解読いたしかねるのですが…。
つまり、白一色背景のメインコンテンツを用意して、
その左右にシャドウをつけたいのでしょうか。

あと参考URLはFLASHで構成されているので、なんとも参考になりませんよ。

アナタが担当しているらしきwebサイトは、
閲覧者の画面サイズに合わせて、webページの横幅が変化しますか？
ブラウザをサイズ縮小すると、サイトのレイアウトが都度かわるか？という意味。

レイアウトが一切崩れない、一般的な横幅固定のサイトならば、
フォトショップで1枚画像を作るだけです。
メインコンテンツのボックス領域と同じ幅の、
左右に影ついた画像を1枚だけ作って、CSSで縦にリピートさせるんです。

縦にリピートすることを予定しているのですから、
画像の縦幅は数ピクセルだけで問題ないです。
右だけの影画像とか、左だけの影画像とか、わけないで済むから楽。

body {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.main {
background-image: url(○○○.gif);
background-repeat: repeat-x;
width: △△△px;
margin-right: auto;
margin-left: auto;
}

以上がCSSです。スタイルタグか、外部スタイルシートで使って下さい。
htmlのbody内は以下。

<div class="main">
メインコンテンツの文章がここに表示されます
</div>

説明いたしますと、
DIVを margin-right: auto;とmargin-left: auto;でセンター表示させてます。
background-image: url(○○○.gif);で画像を指定して、
background-repeat: repeat-x;でそれを繰り返させている、と。
分かりやすくするために、色々省略しませんでした。

あとついでにbodyタグにもCSSを設定して、
上下の余白を全てカットし、ブラウザいっぱいの縦幅を使うようにしました。
これで、サンプルのURLのように上下を気にする必要はありません。
上下に余白を入れたいなら、数値を0以上に入力するか、
このbodyに対するCSSは利用しなくても問題ありません。

最後になりますが、実は画像を使わずCSSだけでシャドウをつける方法も存在します。
ですが閲覧者の環境によって見れたり見れなかったりするので、ここには書きません。

CSSはパズルと同じです。特にDIV。
暇つぶしになりますから、勉強すると面白いですよ。

お礼

早々にご連絡ありがとうございました！
まさにeinnさんのおっしゃる通りです。ブラウザサイズに左右されない、横幅固定、センター配置のページで、白バック左右に影..と言う事です！説明不足で申し訳ございませんでした。。
本当に素人でタグもろくにわからないもので、einnさんの内容を自分なりに解読しまして、ようやく！backgroundについて少し理解でき、おかげさまで無事左右に影をつける事が出来ました！....のですが、また問題が発生してしまい、index以外のページは縦に長いページ（スクロールが必要）でうまくいったのですが、index(W800×H約400px)ページのみコンテンツを通り過ぎ、ずっと下にリピートした影が伸びている状態になってしまいます。。
入門参考書ではまず「header」、そして「navi」、「middle」、「footer」とCSSを制作しコンテンツを入れるdiv枠に適用させ、最後にその全てのdivを囲む「wrapper」と言うcssを作る、、と言った内容で、現在その「wrapper」に対してbackgroundのタグを追加し影画像を縦にリピートさせている状態です。どうにかコンテンツ枠内でリピートが止まるよう苦戦中なのですが、何か方法がありますでしょうか？
理解に苦しむ質問ばかりで本当に申し訳ございませんが、この説明でわかる範囲で、ポイントやヒントなどご教授いただけたらありがたいです。。
ですが、確かにこのCSSとdivと言うもの。はまると言うか、とても頭の中をくすぐってくれて、普段絵描きの私の頭に不思議な影響を与えてくれています^^　なんでも手をつけてみるものですね。
では、もしお時間がございましたら、何卒よろしくお願い致します。