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

2023/11/02 02:33

このQ&Aのポイント

ヘッダーやフッターだけに背景色やパターン素材を指定する方法を解説します。
Webサイトのヘッダーやフッターの背景色やパターン素材を指定する方法について紹介します。
株式会社ノジマのWebサイトのようにヘッダーとフッターだけに特定の背景色やパターン素材を設定する方法について解説します。

ベストアンサー

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

2014/10/24 18:26

Webサイト全体の背景色を指定する方法は、スタイルシートで次のようにして行っております。 body { background-color: white; } 全体の背景色を指定するのは出来るのですが、ヘッター部分やフッター部分だけの背景色を指定するには、どうしたら良いのでしょうか？例えば、下記、株式会社ノジマのようにヘッターとフッターだけ色を指定したいのです。また、ヘッターとフッターだけは、パターン素材を使いたいと思っております。 http://www.nojima.co.jp/index.html パターン素材を使った、ヘッターやフッターだけの背景を指定する方法を教えて下さい。

noname#233083

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

hitomura
ベストアンサー率48% (325/664)

2014/10/24 19:03 回答No.2

> ヘッター部分やフッター部分というからには、「この部分をヘッダーにする」と決めている個所があるかと思われます。以下、ヘッダーに対する手順を書きますが、フッターの場合も同様の手順でできるはずです。（１）もしその箇所が複数の要素になっている場合、つまり、＜！－－ここからヘッダー－－＞　……（何らかの要素）…… ＜！－－ヘッダー終わり－－＞となっていたならば、まずそこを header (HTML5 の場合)または div （既存の HTML の場合）で囲みます。このとき div の場合にはクラスとして header を設定します。すでに上記のような状況になっている場合はそのまま次に進みます。（２）上記で設定した header または div に対して CSS で背景色・背景画像を設定します。たとえば背景色を赤にしたい場合は　header { background-color:red; } または　div.header { background-color:red; } となります。

質問者

お礼 2014/11/19 11:33

ありがとうございます。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/10/24 19:01 回答No.1

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

質問者

お礼 2014/11/19 11:33

ありがとうございます。

関連するQ&A

CSS外部ファイル⇒ヘッダー＆フッター
こんにちは。いまCSSファイルを使ってHPをキレイにしようと頑張っています。そこで、教えて欲しいことがございます。ワタシのHPは大きく分けて、ヘッター＆フッターと真ん中の３ブロクで分かれています。そのヘッダー＆フッター部分の画像と機能をそのままで複数ページにも適用させるようにしたいのです。簡単に言いますと、indexにはリンクが沢山あり、そこから別ページに飛ぶようにしますが、そこで、ヘッダー＆フッターは同じ内容にしたいというものです。コノ場合はスタイルシートに何かを書き込むだけなのか、HTMLファイルを数の分だけイジルのでしょうか。やり方がチンプンカンプンです。どなたか教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
背景色が指定した色にならない
背景色を#bb5599にしたいと思い、下記のようにしているのですが、背景色が白色になります。 <head>  </head> 背景色を指定しているのは、このファイルの中でここだけであり、他では全く指定していません。どこが違うのでしょうか。
- ベストアンサー
- HTML
Excelのヘッダー・フッターについて
過去の質問でも探してみても、見当たらなかったので質問させて頂きます。(探し方が悪かったのかもしれませんが) エクセルのフッダーとヘッターの“文字”を表示させない方法はわかるんですが、そのものをなくす方法はないんでしょうか？ヘッダーフッター部分の高さというんでしょうか、それを小さくする方法でも構いません。とにかく上下の空欄を少しでもなくしたいんです。宜しくお願いします。
- 締切済み
- Windows XP
フッター固定時のdivの背景について
フッターを画面下部に固定するため以下のようなHTMLを書きました。フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css">  </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
背景画像を二つ指定
こんにちは。全体の背景画像(斜めストライプの柄)と、コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。どうすればIE以外でもうまく表示されるでしょうか？背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
CSSで「html」にも背景指定をするのはどのような場合？
CSSで「html」にも背景指定をするのはどのような場合？ CSSの背景指定に関する質問です。ページ全体の背景色や背景画像を指定する場合、自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか？もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、何か不具合が起こる？と思い自分なりに実験してみましたが、特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。
- ベストアンサー
- CSS
背景画像がテーブルに透けてしまう
<body background="画像のURL"> <STYLE TYPE="text/css">  </STYLE> <Table Border="1" Width="サイズ"> <Tr> <Td ColSpan="サイズ" Align="位置">～という感じでページを作っているのですが、背景の画像が透けてテーブルの中の文字が見え難く困っています。テーブルの中は「white」で白に指定しているつもりなのですが、白になりません。。このタグでテーブルの中を背景が反映されず真っ白にする方法ってあるのでしょうか？調べてみたのですがどうも分からないので教えて下さい。
- ベストアンサー
- レンタルサーバ・ASP
CSSで背景の重なり指定
ページの背景を設定するために body { background: #000000 url(../img/back1.jpg) no-repeat right top; z-index:2; } とし部分的に表示したい背景を .side { background: #000000 url(../img/back2.jpg) repeat; z-index:1; } としています。やりたいことはbodyで記述した背景を1番前に表示させたいと思っているのですが.sideに記述した背景が手前に出てきてしまいます。これを解決する方法はないでしょうか？ブラウザはIE6.0です。
- 締切済み
- HTML
footerの背景が切れて、背景画像が見えてしまう
かなりハマってしまいまして、ご相談させて下さい。添付画像の上の図になる形で下記コードにてhtml/cssを記載しました。青のimg.bgはウィンドウ幅によって比率を保ったまま横100%で可変します。 containerの縦幅は決まっていて、img.bgがウィンドウ幅が横に広がっても、 container、contents、footerはz-indexで上に乗せ、あくまでもcontainerの高さ600pxのみが表示できるようにしています。通常のウィンドウサイズや縦にウィンドウを伸ばした場合は問題ないのですがウィンドウを横一杯に伸ばした時に（添付画像の下の図）footerの下から img.bgが見えてしまいます。 wrapperで縦横100%の値にしていて、footerの背景画像もimg.bgを隠せる十分な長さのものを用意しているのですが、最後のcopyrightを入れた所から切れてしまいます。横一杯に伸ばした際に、img.bgの長さに合わせてfooterで隠すにはどのようにしたら良いでしょうか？ご指導の程、どうぞ宜しくお願い致します。下記、不要部分は省いたcss/html記載いたします。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ CSS ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ html,body{ width:100%; height:100%; position:relative; } #wrapper{ width:100%; min-height:100%; height:100%; background-color:red: position:relative; } body > #wrapper{ height:auto; } img.bg { /* Set rules to fill background */ min-width:1000px; min-height:586px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: absolute; top:0; left:0; z-index: 0; } #container { width:95%; height:500px; position: relative; overflow: hidden; z-index: 4; } #contents{ width:100%; background-color: green; position: relative; z-index: 2; } #footer{ width:100%; background: url(../img/footer_black.jpg) left top repeat-x; background-color: black; position: relative; z-index: 3; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ HTML ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head>...略...</head> <body> <div id="wrapper"> <img class="bg" src="img/blue_BG_pic.jpg" alt="" /> <div id="container">...略...</div> <div id="contents">...略...</div> <div id="footer">...略...</div> </div> </body> </html>
- 締切済み
- CSS
画像リンクの背景色を１つ１つ指定する。
画像にリンクを張り、その画像に触れたときに、画像の透過されている部分の背景色が変わるようにしたいのですがタグがわかりません。前に一度やったことがあるのですが、そのときのソースを消してしまってわからなくなっているので困ってます。 <a href="xxx.html" style="a:hover background:#ff0000"><img src="xxx.gif" border="0"></a> ↑こんな感じだったようなきがします。（あまり記憶にさだかではないのですが。）全体的にリンクの背景色をしていするスタイルシートはわかるので、そうではなくページ内にあるリンク一つ一つの背景色を指定する方法が知りたいです。よろしくおねがいします。
- ベストアンサー
- HTML