ホームページの背景画像が表示されない。

質問

ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。

構成としては、ものすごく単純な構成なのですが・・。
構成は図に記載させていただきました。

大枠を【Contents】というDiv要素で囲み、
その中に【mainArea】【subArea】をDiv要素配置しております。

【mainArea】はFloat：Left【subArea】はFloat:Rightを設定し左右に配置しております。

【subArea】の中にさらに【6Support】というDiv要素を作り、その中に背景画像を設置したところブラウザにて表示されません。

色々試してみたのですが、どうしても表示されずにお手上げ状態です。詳しい方にアドバイス・ご教授いただければ幸いです。

※ちなみに、上記構成にて【subArea】に背景を設定すると問題なく表示されます。

【HTML】
<div id="contents">
<div id="mainArea"> id "mainArea" の内容がここに入ります</div>
<div id="sideArea">
<div class="6support"> 背景画像をおきたい。</div>
</div>
</div>

【CSS】
#contents {
height: 1000px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#mainArea {
float: left;
height: 800px;
width: 700px;
}
#sideArea {
float: right;
height: 800px;
width: 250px;
}
#sideArea .6support {
height: 400px;
width: 240px;
background-repeat: no-repeat;
margin-left: 7px;
background-image: url(images/6supportBack.jpg);
}

一応、原状を「 http://soltsuger.web.fc2.com/test.html 」にアップさせていただいております。参考になればご覧ください。

ご教授よろしくお願いいたします。

回答No.2

einn · ベストアンサー

まず最初に一言、言わせて下さい。

検証にすんごい時間かかりました！もうイヤ！

取り乱しました。申し訳ありません…。
というのも、すごい初歩的なミスなんですよ。
一回ミスった事がある人か、
ＣＳＳの仕様をちゃんと読んでる人しかわからないくらいの。
私の場合、ミスったこともないし仕様も読んでませんから…！

なんと、クラス名って、数字で始められないんですって。
（私もCSSを扱って長いですが、初めて知りました）

たったそれだけです。びっくり！

でも、製作環境がdreamweaverならハマるかもです。
頭文字が数字でも、dreamweaverのプレビュー画面が変な気をまわしてですね、
marginだのheightだのwidthはプレビュー上で反映しちゃうんですよ。
背景については、反映したりしなかったり不安定な挙動でした。

でも、そもそも数字から始まるクラス名はCSSのサポ外なので、
実際にブラウザで確認しても背景は表示できないわけです。
私はdreamweaverで製作しているので、まんまとハマりました。
あれ、プレビューではイケそうなのに、ブラウザにでないぞ…！と。

いやぁ…疲れました。

あと、CSS内でIDの中にクラスを記述するのはやめたほうがいいですよ。
#sideArea .6supportっていう記述のことです。

そこ、.6supportってだけでいけますし、#sideAreaを頭につけた分無駄かと。
ブラウザによっては変な挙動をしたはずです。昔ハマッた気がします。
IDとクラスは明確に分けて扱うほうがCSSルール上好ましいと思います。

#sideArea .6support ではなく、
#sideArea .tdとか#sideArea .ｐのようなＨＴＭＬタグへの一括指定ならば、
ＣＳＳでも推奨している使いかたになるのですが。

お礼

なんと・・・
そんな単純な事が原因だったなんて・・
おっしゃる通り、制作環境はdreamweaverです。

アドバイスいただいた通り、数値をはずしたclass名にしたところ、問題なく表示されました！
本当にありがとうございます。

この単純なところが分からず、1週間近くも悩み続けてしまいました。
分かってしまうと、なんともお恥ずかしい質問をしてしまったことかと、顔から火が出そうです。

そして、
IDの中のクラス表記についてもアドバイスいただき本当にありがとうございます。
ここの記載方法がおかしいのも知識不足で知りませんでした。

私の知識不足の質問に対し、誠意に検証をいただき本当に感謝しております。
この経験を元に、同じ過ちを繰り返さないように精進してまいります。

本当に本当にありがとうございました。

回答No.1

SAYKA

数値で始まるセレクタは×

お礼

お恥ずかしい質問をしてしまい申し訳ありませんでした。

初歩的なことが原因だったのですね・・
これからもっと勉強して、CSSの理解を深めていきたいと思います。

的確なアドバイス誠にありがとうございます！