【初心者】cssの背景画像について

締切済

質問者：takfc3s_19
質問日時：2011/10/02 15:29
回答数：3件

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">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2011/10/02 23:28

まず、HTMLから直さないと・・

HTML4.01transitinalは、廃止になる要素やタグを多く含んでいます。XHTML1.1やHTML5では基本的にstrict以外はありませんから、今から勉強されるならHTML4.01strictに絞ったほうが良いでしょう。
　そのとき、HTMLの基本、すなわち文書を、それを構成する要素に分解してマークアップすることも合わせて身に着けましょう。
★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　の「新しい要素」「変更された要素」がとても参考になるでしょう。

最後に、サンプルを上げておきますが、

いくつか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 … )

#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 … )を使いましょう。

他たくさんありますが、サンプルを見たください。

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. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
※タブは＿に置換してあります。元に戻すこと。

<!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">

＿</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>

- 0
- 件

通報する

No.2

回答者： Questa
回答日時：2011/10/02 16:31

class="local-menu"のボックスに float:leftを指定しているため、

local-menu の高さが親ボックス（id="container"）に反映されていません。

containerボックスの高さは、メインイメージと MAPのボックスの高さで決定され、
その部分にのみ背景画像が描画されています。

どうしても local-menuに　floatを指定するのであれば、No.1の回答にあるように clear等を使うか、その代用として containerに overflow-hiddenを指定することになります。

#container {
... 略 ...
overflow: hidden; /* 追加 */
}

- 0
- 件

通報する

No.1

回答者： naokita
回答日時：2011/10/02 16:05

最後に、clearとかclearfixを使うとか構造によって色々な方法があります。

因みに、headerもおかしいね。
--------------------------------------------
～～略
</ul>
</div>
<p style="clear:left;">文章</p>
</div>

<div id="footer">

</div>
</body>
</html>