- ベストアンサー
HTML/CSSで画像が表示されない問題について
- HTML/CSSで画像が表示されない問題が発生しています。背景画像やヘッダ画像、フッダ画像は表示されていますが、特定のボタン画像とフッダ画像が表示されません。
- ボタン画像は指定した位置に表示されないため、常に表示する配置をしたいと考えていますが、表示されなくなってしまいます。同様にフッダ画像も指定した高さでないと表示されないようです。
- ボタン画像とフッダ画像の表示方法について、ご教示いただけると幸いです。
- yuki_tigers
- お礼率55% (31/56)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
とっても複雑怪奇なHTMLとCSSなので、何をしようとしているのかが、さっぱりわかりません。 まず、HTML(頭文字なので、大文字で書くように)ですが、javascriptは問題ないので後回しにして・・文書構造だけを書きます。 <body> <div class="header"> <h1>ページタイトル</h1> </div> <div class="section"> <h2>本文記事見出し</h2> </div> <div class="footer"> <p><a href="/">サイトトップ</a></p> <p><a href="#"></a></p> </div> </body> 以外何も書く必要はありません。 container--多分意味的にはarticle--でしょうが、この程度のHTMLなら不要です。 (article : 内部にheader,section,footerを持ちうる完結した記事) header,section,footerは、ひとつの文書内に何度も登場する可能性があるのでclassのほうが良いでしょう。 header,section,footer,articleのclass名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )の名前とその用途を参考にしています。 将来、HTML5に即変更できますから・・ [スタイルシート] ・背景画像をランダムに変更する。 ・headerは縦34pxでfixedで常にページ最上部に固定 ・footerは縦42pxでfixedで常にページ最下部に固定 ・サイトトップへのリンクは(194px×332px)のボタンでページの左上 ↑えらくでかいけど、このサイズ合ってます？？ また、最後の二つは矛盾しています。なぜなら、ボタンの位置を絶対配置しようとすると、その要素が含まれるstaytic以外の直近の親要素があれば、その親要素の位置が基準になるからです。 <body> <div class="header"> <h1>ページタイトル</h1> <p><a href="/">サイトトップ</a></p> </div> <div class="section"> <h2>本文記事見出し</h2> </div> <div class="footer"> <p><a href="#"></a></p> </div> </body> なら可能です。 HTMLをデザインは無視して徹底的に文書構造をマークアップだけしましょう。後でどのようにもデザインできます。 具体的に絵を載せるとわかりやすいです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ご丁寧にありがとうございました。参考にさせて頂きます。