背景にグラデーション、外枠に影をつけたい

締切済

質問者：naopi1979
質問日時：2007/09/03 15:31
回答数：2件

http://www.musclemusical.com/
ドリームウィーバーでこちらのサイトのように、
背景はグラデーション、更に外枠テーブルの左右と下に影をつけたいと思っています。
調べていたところグラデの背景は、
cssスタイルのbodyでバックグラウンドで指定するということで、
やってみたら成功したのですが、
ネットで外枠の影のつくりかたを調べたところ、それもbodyタグを使うとなっていました。
両方bodyタグのbackgroundで指定できるのでしょうか？
どちらかしか使えないようなのですが....
CSS等ははじめてでさっぱり分かりません。
言っている事が意味不明かもしれませんが、
背景と外枠の影と両方どう実現すればいいか教えていただけると嬉しいです。
宜しくお願い致します。

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2

回答者： leap_day
回答日時：2007/09/04 01:52

こんにちは

こちらのサイトに影の作り方と付け方が載っています（例は右と下だけですが）要領は同じです（＾＾）

http://allabout.co.jp/internet/hpcreate/closeup/ …

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="左画像"></td>
<td>本文</td>
<td><img src="右画像"></td>
</tr><tr>
<td><img src="左下画像"></td>
<td><img src="下画像"></td>
<td><img src="右下画像"></td>
</tr>
</table>
(imgのwidth="***px" height="***px"は省略しています）

CSS　backgroundでやるのであれば
<style type="text/css"></style>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left"></td>
<td>本文</td>
<td class="right"></td>
</tr>
<tr>
<td class="lb"></td>
<td class="bottom"></td>
<td class="rb"</td>
</tr>
</table>

こちらもスタイルシート内width:***px; height:***px;は及び画像のパスは省略していますので適宜入れてください

他にも左右用の画像と下用の画像を用意して（本文コンテンツの幅で作って）
<style type="text/css"></style>
<div class="main">本文</div>
<div class="footer"></div>

などのようにすることも出来ます
色々やり方はあるので質問者様に合うものをお試しあれ！！

- 0
- 件

通報する

No.1

回答者： elcude
回答日時：2007/09/03 23:53

答えられるのですが、言葉では表現に限界があるのでがんばって答えて見ますが・・・えー。

以下のようにすればいいと思います。これから答えるコードは正直言うとてっとり早い方法のうちのひとつですが、あまりいい記述ではないです。とりあえず現状の問題を実現するための方法を答えます。
CSSに慣れてきたら(このHTMLのコードが正しくないと感じるようになったら)Web標準とかCSSとかXHTMLといったキーワードで調べて勉強してみてください。

CSS等が初めてということなので直接htmlコードにStyleを記述する方法なら、
■　HTML　■
<html>
<head>
～略～
<style>
body{
background:repeat-x url("images/body_bg.jpg");
margin:0px;
padding:0px;
text-align:center;
}
↑　横方面にimagesフォルダ内にあるbody_bg.jpgを横方面に並べる。(一番後ろの背景のグラデーションの画像)
table{
background:repeat-y url("images/table_bg.jpg");
width:800px;
margin:0px auto;
text-align:left;
}
↑　とりあえず幅は800ピクセルにします。制作される条件に合わせて変更してみてください。imagesフォルダ内にあるtable_bg.jpgを縦に並べます。
.ue{
background:no-repeat url("images/ue_bg.jpg");
height:197px;
}
↑　テーブルの一番上に表示する画像です。imagesフォルダ内にあるue_bg.jpgを1枚だけ並べます。この場合bodyの背景のグラデーションの大きさが縦50ピクセルの場合です。
.sita{
background:no-repeat url("images/sita_bg.jpg");
height:18px;
}
↑　テーブルの一番下に表示する影です。imagesフォルダ内にあるsita_bg.jpgを1枚だけ並べます。height:10pxは背景画像の高さが10ピクセルの場合です。
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="ue"></td>
</tr>
<tr>
<td>中身</td>
</tr>
<tr>
<td>中身</td>
</tr>
・
・
・
<tr>
<td>中身</td>
</tr>
<tr>
<td class="sita"></td>
</tr>
</table>
</body>
</html>

margin:0px auto; とか text-align:center; とか text-align:left; とかありますがこれはCSSの読み込みの違いのあるブラウザに対応しているものです。これは中身を真ん中に寄せるための記述です。
このサンプルを元に制作される場合はtable内の中身に記述していってください。

言葉だけなのでうまく説明できませんが、こんなところでしょうか。

これでうまくいったら、あとは余白が問題となってきます。テーブル端から中身が表示されるので、テーブルのグラデーションと中身がかぶっておかしくなるので、右と左に余白をつけます。10ピクセルの余白をつけるならば以下のようになります。

<table cellspacing="0" cellpadding="0">
<tr>
<td style="width:10px;"></td>
<td class="ue"></td>
<td style="width:10px;"></td>
</tr>
<tr>
<td style="width:10px;"></td>
<td>中身</td>
<td style="width:10px;"></td>
</tr>
<tr>
<td style="width:10px;"></td>
<td>中身</td>
<td style="width:10px;"></td>
</tr>
・
・
・
<tr>
<td style="width:10px;"></td>
<td>中身</td>
<td style="width:10px;"></td>
</tr>
<tr>
<td style="width:10px;"></td>
<td class="sita"></td>
<td style="width:10px;"></td>
</tr>
</table>

サンプルをつくってダウンロードできるようにしたほうが説明も早いと思いますが、できないのでこの長々とした説明で勘弁してください。