ヘッダーとフッターだけ背景を指定する方法

解決済

質問者：fujino00
質問日時：2014/10/24 18:26
回答数：2件

Webサイト全体の背景色を指定する方法は、スタイルシートで次のようにして行っております。

body { background-color: white; }

全体の背景色を指定するのは出来るのですが、ヘッター部分やフッター部分だけの背景色を指定するには、どうしたら良いのでしょうか？

例えば、下記、株式会社ノジマのようにヘッターとフッターだけ色を指定したいのです。
また、ヘッターとフッターだけは、パターン素材を使いたいと思っております。

http://www.nojima.co.jp/index.html

パターン素材を使った、ヘッターやフッターだけの背景を指定する方法を教えて下さい。

通報する

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

質問の本文を隠す

回答 (2件)

No.1

回答者： ORUKA1951
回答日時：2014/10/24 19:01

HTML5の場合

<body>
　<header>文書のヘッダ</header>
　<section>文書の本文</section>
　<footer>文書のフッタ</footer>
</body>
header,footer{background-color:navy;color:white;}

HTML4.01の場合
<body>
　<div class="header">文書のヘッダ</div>
　<div class="section">文書の本文</div>
　<div class="footer">文書のフッタ</div>
</body>
div.header,div.footer{background-color:navy;color:white;}
★このようにセレクタを使って指定します。セレクタにはこのタイプセレクタ(HTMLの要素)、子孫セレクタ、隣接セレクタ、属性セレクタ、クラスセレクタなどたくさんあります。HTMLさえきちんと文書構造がマークアップされていれば、自由自在に指定できます。
　スタイルシートを学ぶときは、background-colorのようなプロパティに手を付ける前に、重要な
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
をしっかり身につけましょう。CSSの命・・最も根幹の部分です。

実際のサンプル(HTML4.01strict)
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATAで検証済みのHTML4.01strict + CSS2.1です。
★タブは＿に置換してあるので戻す。

<!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>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>補足</h3>
＿＿＿<p>本文と直接関係ない(asideな)記事</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。

通報する

お礼日時：2014/11/19 11:33

No.2ベストアンサー

回答者： hitomura
回答日時：2014/10/24 19:03

> ヘッター部分やフッター部分

というからには、「この部分をヘッダーにする」と決めている個所があるかと思われます。
以下、ヘッダーに対する手順を書きますが、フッターの場合も同様の手順でできるはずです。

（１）もしその箇所が複数の要素になっている場合、つまり、
＜！－－ここからヘッダー－－＞
　……（何らかの要素）……
＜！－－ヘッダー終わり－－＞
となっていたならば、まずそこを header (HTML5 の場合)または div （既存の HTML の場合）で囲みます。このとき div の場合にはクラスとして header を設定します。
すでに上記のような状況になっている場合はそのまま次に進みます。

（２）上記で設定した header または div に対して CSS で背景色・背景画像を設定します。
たとえば背景色を赤にしたい場合は
　header { background-color:red; }
または
　div.header { background-color:red; }
となります。