影のつけ方

http://retorotype.blog78.fc2.com/
このようなサイトにしたいと思っているのですが、影がうまくいかないんです。
どうかご教授下さい。
よろしくお願い致します。

No.1 回答者： matsuki-_- 回答日時： 2007/10/25 04:27

影って、オレンジ色の背景と白の間のシャドウのことですか？

このサイトのソースをちゃんときっちり確認してませんが、<TD style="background-repeat : repeat-y;" class="kage_left" rowspan="5"></TD>ってのがあったのでこれで影を指定してるんじゃないですかね。タグは理解できますか？テーブルでレイアウトしてます。
ソースをいま確認できないので具体的にははっきりお答えできませんが・・多分、横に長い影付き画像を上下と、短い影だけの画像を左右、合計4つの画像を用意してると思います。

このタグを説明すると
　　　<td>タグの背景に、影の画像をｙ軸方向に繰り返させる(repeat-y)
という設定をしています。
y軸っていうのは縦方向（垂直）を示しています。
classというidを使っているので外部ファイルのcssで細かな指定をしています。

#td kage_left {
background: url(画像の場所のURL);
｝

こんな感じで。あたしだったらここでbackground: repeat-y;って　まとめて指定するけどなー。どっちがいいんだろう・・？

どのへんがうまくいかないのか言ってくだされば具体的な回答ができるんですけど。

この回答への補足

レスありがとうございます＾＾
自分の持っているホームページを実際に見てもらおうと思います。
大変お手数ですが、こんな自分にもアドバイスをいただければ幸いです。http://no1fuunji.web.fc2.com/アドレスです。どこにどう挿入すればいいのか、さっぱり分からない状態です＾＾；

補足日時：2007/10/25 06:24

No.2 回答者： tsunami02 回答日時： 2007/10/25 15:39

>影がうまくいかないんです。

影って背景とコンテンツの境目？
影のつけた画像を縦に繰り返しているだけでしょ。あと上と下ににも角丸の影付き画像を置いてるだけです。
画像を用意しましょう。

No.3 ベストアンサー 回答者： matsuki-_- 回答日時： 2007/11/01 04:02

＃１です。

なんかサイトみれないんですけど、解決したんでしょうか？
サイトは１回拝見できたんですが、HTMLだけで作ってるのかな？という印象をうけたので、CSSがわからなくてもテーブルだけでも簡単にできると思いますよ。以下参考までに。

例

<TABLE border="0" cellpadding="0" cellspacing="0" width="横幅">
<TR>
<TD width="10" height="10"><IMG src="左上角画像URL" width="10" height="10" border="0"></TD>
<TD height="10" style="background-image:url(上の画像URL); background-repeat:repeat-x;"></TD>
<TD width="10" height="10"><IMG src="右上角画像URL" width="10" height="10" border="0"></TD>
</TR>
<TR>
<TD width="10" style="background-image:url(左の画像URL); background-repeat:repeat-y;"></TD>
<TD align="center">ここにテキストをいれる</TD>
<TD width="10" style="background-image:url(右の画像URL); background-repeat:repeat-y;"></TD>
</TR>
<TR>
<TD width="10" height="10"><IMG src="左下角画像URL" width="10" height="10" border="0"></TD>
<TD height="10" style="background-image:url(下の画像URL); background-repeat:repeat-x;"></TD>
<TD width="10" height="10"><IMG src="右下角画像URL" width="10" height="10" border="0"></TD>
</TR>
</TABLE>


これでいけるはず。
高さと幅の"10"ってやつは画像の大きさで変えてください。
上・下・右・左の画像は、繰り返しをさせるので１pxサイズで十分です。
（上・下の画像は高さ10px、幅１px）
（右・左の画像は高さ１px、幅10px）というふうに。

【一応タグとかの説明】
<TR>・・・列のセル
<TD>・・・行のセル

background-repeat:repeat-x;　・・・背景の画像をx軸方向に繰り返す

repeat-yは「y軸方向（縦）に繰り返す」、no-repeatにすると「繰り返さない」に指定できます。


他にも色々指定できますので聞いたり調べたりしてみてください。

この回答へのお礼

おお、こういう方法でもできるんですね！
ありがとうございます。
無事解決しました。

お礼日時：2007/11/01 04:15