- ベストアンサー
ヘッダーとフッターだけ背景を指定する方法
- ヘッダーやフッターだけに背景色やパターン素材を指定する方法を解説します。
- Webサイトのヘッダーやフッターの背景色やパターン素材を指定する方法について紹介します。
- 株式会社ノジマのWebサイトのようにヘッダーとフッターだけに特定の背景色やパターン素材を設定する方法について解説します。
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> ヘッター部分やフッター部分 というからには、「この部分をヘッダーにする」と決めている個所があるかと思われます。 以下、ヘッダーに対する手順を書きますが、フッターの場合も同様の手順でできるはずです。 （１）もしその箇所が複数の要素になっている場合、つまり、 ＜！－－ ここからヘッダー －－＞ ……（何らかの要素）…… ＜！－－ ヘッダー終わり －－＞ となっていたならば、まずそこを header (HTML5 の場合)または div （既存の HTML の場合）で囲みます。このとき div の場合にはクラスとして header を設定します。 すでに上記のような状況になっている場合はそのまま次に進みます。 （２）上記で設定した header または div に対して CSS で背景色・背景画像を設定します。 たとえば背景色を赤にしたい場合は header { background-color:red; } または div.header { background-color:red; } となります。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) をしっかり身につけましょう。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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:100%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;} div.section div.section{width:auto;min-width:0;margin:0 200px 0 20px;} div.section{min-height:500px;position:relative;} div.section div.aside{position:absolute;top:0;right:0;width:190px;height:100%;} div.section div.section{background-color:silver;} div.header,div.footer{background-color:navy;color:white;} div.section div.aside{background-color:fuchsia;} --> ＿</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>
お礼
ありがとうございます。
お礼
ありがとうございます。