フレーム背景の画像を CSSで設定したいのですが

現在、横３分割のフレームを使ったホームページを作成中です。左右のページを「space.html」とし、真ん中のページを更に縦３分割して、中央にメインのコンテンツを表示させるようにしています。また、サイトデザインは全てCSSで管理しようと思っています。

真ん中のページを際立たせたいので両側に縦線を引き、「space.html」の背景にも画像を設定したいのですが、うまくいきません。

＃フレーム設定ページのソース＃
　<FRAMESET cols="*,700,30" frameborder="no" border="0">
　<FRAME name="space01" src="space.html" class="space01">
　　<frameset rows="50,*,50" frameborder="no" border="0">
　　<FRAME name="menu" src="menu.html" scrolling="no" class="menu">
　　<FRAME name="main" src="main.html">
　　<FRAME name="bottom" src="new.html" scrolling="no" class="bottom">
　　</frameset>
　<FRAME name="space02" src="space.html" class="space02">


＃「space」部分のCSS＃
　.space01{
　background-image:url(img/space.gif);
　border-right:double 5px #666;
　}
　.space02{
　background-image:url(img/space.gif);
　border-left:double 5px #666;
　}


上記の方法ですと、両側の縦線は表示されるのですが、背景は真っ白なままです。勉強不足で恐縮ですが、どなたかご教授下さい。。。

No.1 ベストアンサー 回答者： quads 回答日時： 2005/08/13 18:23

frame要素はフレームを定義するものです。

フレーム内に表示される要素に関する指定は、表示される要素＝指定したhtmlファイルで行ってください。

その際、背景として指定するのであれば、DTDに拘らずbody要素に対して指定されることをお勧めします。



　.space01{
　background-image:url(img/space.gif);
　border-right:double 5px #666;
　}

この　background-image:url(img/space.gif);　を削除し、

space.htmlのCSSとして
body {background-image:url(img/space.gif);}
を指定すれば理想とされる表示となると思われます。


ただ、特に理由が無いのなら、インラインフレームを使われた方が効率が良いかもしれません。
本来であればフレームなどは使いませんが…。

この回答への補足

ご回答ありがとうございます。

補足ですが、質問文内の「CSSで管理」は「外部CSSで管理」の間違いでした。フレーム内のページである「menu」や「bottom」も、スタイルシートで背景画像や背景色を指定しているので、同じような記述でよいかと思い、上記の表現となりました。

補足日時：2005/08/13 20:45

この回答へのお礼

HTMLもCSSもあまりよく分かってないので、質問や補足でおかしな事を申していましたらすいません。。。

結局、quadsさんの仰るように「外部CSSで縦線」を、「"space.html"で背景画像」を指定するようにしました。

インラインフレームを使用しないのは、以前そういったサイトを作成していた時に、古いブラウザを使用している知人に「フレームの中が見えないよー」と指摘されたためです。

あまり多くの方があてはまるとは思えない現象(?)ですが、それ以来、インラインフレームを使うのがためらわれてしまって。作り手としては、Iフレームの方が楽だとは思うんですけど。。。

お礼日時：2005/08/13 21:05

No.3 回答者： goldfox 回答日時： 2005/08/14 02:45

＞インラインフレームを使用しないのは、以前そういったサイトを作成していた時に、古いブラウザを使用している知人に「フレームの中が見えないよー」と指摘されたためです。

インラインフレームの中が見えないのが、フレーム非対応のブラウザのせいであるなら、フレームを使っても見えませんよ(^^;
考慮するならフレームを使わないページ作成をするか、フレームの場合は<noframes>～</noframes>で非対応ブラウザ向き内容を書いておくかです。
インラインフレームの場合は<iframe>ここに非対応ブラウザ向き内容を</iframe>書きます。
最初に表示されるページのコピーとか、リンクなどを書くとよいです。

この回答へのお礼

ご回答ありがとうございます。

もしかしたら知人は、古いバージョンのネットスケープを使ってたのかもしれません。どちらのデザインで作るにしても、「非対応ブラウザ向き内容」の記述を忘れてはならないなぁ、と思いました。

皆様ありがとうございました。遅くなりましたが、この欄をもちまして質問を締めさせて頂きます。

お礼日時：2005/08/15 13:49

No.2 回答者： quads 回答日時： 2005/08/13 23:10

まだ何か質問はあるのでしょうか…？

> 上記の方法ですと、両側の縦線は表示されるのですが、背景は真っ白なままです。勉強不足で恐縮ですが、どなたかご教授下さい。。。

こちらは解消されたかと思いますが…。

ただ、フレームで分割した際に、同じページを複数のフレームに指定するのは問題があるような気が…。
インラインフレームが表示できないのは閲覧者のブラウザの問題だったのでしょうか。

質問者様が納得されているのであればいいですが…。

この回答へのお礼

再びのご回答ありがとうございました。
申し訳ありません。質問を締め切るのを忘れたまま家を留守にしていたため、返事が遅くなってしまいました。

＞同じページを複数のフレームに指定する

「space.html」に内容がある訳ではなく、左右両側を同じ背景画像で挟み、インラインフレームを使ったようなデザインしたかったので、こういった記述になりました。

なぜＩフレームが見えなかったかについては、私自身はエクスプローラーしか使ったことがないので、よく分かりませんが、もっと勉強してユーザビリティに富んだサイトを作りたいと思います。今回は本当にありがとうございました。

お礼日時：2005/08/15 13:45