![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。
構成としては、ものすごく単純な構成なのですが・・。
構成は図に記載させていただきました。
大枠を【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 」にアップさせていただいております。参考になればご覧ください。
ご教授よろしくお願いいたします。
![「ホームページの背景画像が表示されない。」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/3/476789_5497bdd1cc1df/M.jpg)
No.2ベストアンサー
- 回答日時:
まず最初に一言、言わせて下さい。
検証にすんごい時間かかりました!もうイヤ!
取り乱しました。申し訳ありません…。
というのも、すごい初歩的なミスなんですよ。
一回ミスった事がある人か、
CSSの仕様をちゃんと読んでる人しかわからないくらいの。
私の場合、ミスったこともないし仕様も読んでませんから…!
なんと、クラス名って、数字で始められないんですって。
(私もCSSを扱って長いですが、初めて知りました)
たったそれだけです。びっくり!
でも、製作環境がdreamweaverならハマるかもです。
頭文字が数字でも、dreamweaverのプレビュー画面が変な気をまわしてですね、
marginだのheightだのwidthはプレビュー上で反映しちゃうんですよ。
背景については、反映したりしなかったり不安定な挙動でした。
でも、そもそも数字から始まるクラス名はCSSのサポ外なので、
実際にブラウザで確認しても背景は表示できないわけです。
私はdreamweaverで製作しているので、まんまとハマりました。
あれ、プレビューではイケそうなのに、ブラウザにでないぞ…!と。
いやぁ…疲れました。
あと、CSS内でIDの中にクラスを記述するのはやめたほうがいいですよ。
#sideArea .6supportっていう記述のことです。
そこ、.6supportってだけでいけますし、#sideAreaを頭につけた分無駄かと。
ブラウザによっては変な挙動をしたはずです。昔ハマッた気がします。
IDとクラスは明確に分けて扱うほうがCSSルール上好ましいと思います。
#sideArea .6support ではなく、
#sideArea .tdとか#sideArea .pのようなHTMLタグへの一括指定ならば、
CSSでも推奨している使いかたになるのですが。
なんと・・・
そんな単純な事が原因だったなんて・・
おっしゃる通り、制作環境はdreamweaverです。
アドバイスいただいた通り、数値をはずしたclass名にしたところ、問題なく表示されました!
本当にありがとうございます。
この単純なところが分からず、1週間近くも悩み続けてしまいました。
分かってしまうと、なんともお恥ずかしい質問をしてしまったことかと、顔から火が出そうです。
そして、
IDの中のクラス表記についてもアドバイスいただき本当にありがとうございます。
ここの記載方法がおかしいのも知識不足で知りませんでした。
私の知識不足の質問に対し、誠意に検証をいただき本当に感謝しております。
この経験を元に、同じ過ちを繰り返さないように精進してまいります。
本当に本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
<div>と<div>の間の10px程の...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
画像イメージの上下左右、欲し...
-
ギザギザボーダーの向きを下向...
-
<hr>要素を点線で表示した場合...
-
firefoxでmargin-topが効かない
-
CSSで背景画像を一番下にもって...
-
css&html テキストの前に三角...
-
CSSで指定した背景画像にリンク...
-
CSSでボックスのheightが0になる
-
css初心者 フレックスボックス...
-
4枚の画像を均等間隔で一列に...
-
cssで「下よせ」ってどうやって...
-
ul/liタグでのリスト表示におけ...
-
ページ全体をインラインフレー...
-
余分な縦スクロールバーが出て...
-
中点「・」の改行について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
CSS:animation開始位置の設定
-
【CSS】ヘッダーの高さが不明の...
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
<div>と<div>の間の10px程の...
-
HTMLのiframeの入れ子について
-
余分な縦スクロールバーが出て...
-
HTMLで一部だけスクロールする...
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
おすすめ情報