- 締切済み
【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
- takfc3s_19
- お礼率75% (9/12)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、HTMLから直さないと・・ HTML4.01transitinalは、廃止になる要素やタグを多く含んでいます。XHTML1.1やHTML5では基本的にstrict以外はありませんから、今から勉強されるならHTML4.01strictに絞ったほうが良いでしょう。 そのとき、HTMLの基本、すなわち文書を、それを構成する要素に分解してマークアップすることも合わせて身に着けましょう。 ★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) の「新しい要素」「変更された要素」がとても参考になるでしょう。 最後に、サンプルを上げておきますが、 いくつかCSSの書き方について。 * { margin: 0; padding: 0; font-size: 15px; } 全称セレクタですべてクリアされていますが、これはオーサリングツールがよく使う方法ですが、利用できるデフォルトの設定がすべて消えてしまいます。必要なもの以外に適用されないようにするため、書かないほうが良いです。また、font-sizeは継承されるプロパティですからbodyに書くと良いです。 body { background-image:url(../img/washi.png);/* 継承されない */ background-repeat: repeat;/* デフォルトでrepeatされるので指定しなくて良い */ } 14.2.1 背景のプロパティ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html#background-properties ) #header { width: 750px; height: 50px; /* margin-right: auto; margin-left: auto; margin-top: 10px;*/ margin:10px auto; /* } 1.3.3 簡略化プロパティ（Shorthand properties） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/about.html#shorthand )を使いましょう。 他たくさんありますが、サンプルを見たください。 HTMLについて、 <div class="local-menu">はメニューではなく、通常の文章のように見受けられます。もし文章ならきちんと <div class="section"> <h2>見出し</h2> <p>段落</p> </div> とマークアップすべきです。 <div id="logo"> <img src="img/logo.gif" /> </div> 単なるロゴで内容とは関係ないので、見出しとしてマークアップして画像は背景にするべきです。 <h1><span>見出し</span></h1> もしくは、 <h1><img src="img/logo" width="300" height="50" alt="タイトル"></h1> ★画像のスタイルシートも読まない状態で内容が伝わるかを常に考えること!! [サンプル]HTML4.01strict 必要ならXHTMLに ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ※タブは＿に置換してあります。元に戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body{background:url(../img/washi.png) gray;} p{margin:0 1em;text-indent:1em;line-height:1.6em;} div.header,div.article,div.footer{ ＿width:75%;min-width:450px;max-width:800px; ＿background:url(../img/white.gif) white;; ＿margin:0 auto;padding:1ex 1em; ＿border:solid 1px gray; } div.header h1{width:300px;height:50px;float:left;} div.header div.nav ul,div.header div.nav ul li{ ＿display:block;list-style:none; ＿margin:5px 10px; ＿border:solid blue 1px; ＿padding:2px 5px; } div.article div.section{ ＿width: 180px; ＿height:300px; ＿margin: 0px 25px; ＿float: left; ＿border:gray solid 1px; ＿overflow:auto; ＿font-size:0.9em; } div.article div.section h3{ ＿margin:0 1em; } div.article hr{visibility:hidden;clear:left;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><img src="img/logo.gif" width="300" height="50" alt="何たらのページ"></h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="../">あいう</a></li> ＿＿＿＿<li><a href="./abc">えおか</a></li> ＿＿＿＿<li><a href="./efg">きくけこ</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="article"> ＿＿<h2><img src="img/img_main.jpg" alt="タイトル" width="700" height="200"></h2> ＿＿<div class="section"> ＿＿＿<h3>【初心者】cssの背景画像について</h3> ＿＿＿<p> ＿＿＿＿bodyの背景に画像を指定、メインコンテンツの背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿初歩的な質問ですみませが、「ここがおかしい」という点と、もし可能であれば「ふつうはこうする」というのがあれば教えてください。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿以下作りかけですがcssとhtmlです。 ＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>主な修正</h3> ＿＿＿<ul> ＿＿＿＿<li>HTMLは文書構造に従ってマークアップしましょう。</li> ＿＿＿＿<li>class名も後で中身を読まなくてもその間に何が書かれているか解るような名称をつけましょう。すなわちcontainerじゃなくて、article(記事)とか、section(章)とか。詳しくは「HTML4からの変更点」の新しい要素とか</li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>●</p> ＿＿＿<p>●</p> ＿＿＿<p>●</p> ＿＿＿<p>●</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>●</p> ＿＿＿<p>●</p> ＿＿＿<p>●</p> ＿＿＿<p>●</p> ＿＿＿<p>●</p> ＿＿</div> ＿＿<hr> ＿</div> ＿<div class="footer"> ＿＿<h3>文書情報</h3> ＿</div> </body> </html>
- Questa
- ベストアンサー率48% (13/27)
class="local-menu"のボックスに float:leftを指定しているため、 local-menu の高さが親ボックス（id="container"）に反映されていません。 containerボックスの高さは、メインイメージと MAPのボックスの高さで決定され、 その部分にのみ背景画像が描画されています。 どうしても local-menuに floatを指定するのであれば、No.1の回答にあるように clear等を使うか、その代用として containerに overflow-hiddenを指定することになります。 #container { ... 略 ... overflow: hidden; /* 追加 */ }
- naokita
- ベストアンサー率57% (1008/1745)
最後に、clearとかclearfixを使うとか構造によって色々な方法があります。 因みに、headerもおかしいね。 -------------------------------------------- ～～略 </ul> </div> <p style="clear:left;">文章</p><!-- 追加 --> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
