人気マンガがだれでも無料♪電子コミック読み放題!!

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

body { background-color: white; }

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

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

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

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

A 回答 (2件)

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


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

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

(2)上記で設定した header または div に対して CSS で背景色・背景画像を設定します。
たとえば背景色を赤にしたい場合は
 header { background-color:red; }
または
 div.header { background-color:red; }
となります。
    • good
    • 1
この回答へのお礼

ありがとうございます。

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

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">
<!--
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>
    • good
    • 1
この回答へのお礼

ありがとうございます。

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qheaerとfooterに背景画像が難しい css

添付画像のようなサイトを作りたいと思っております。

ヘッダーもフッターも、
ブラウザウインドウの横幅いっぱいにオレンジの下地が伸びるようにしたいです。
(ウインドウサイズを変更しても常に横幅いっぱい)

しかも、そのオレンジ下地は画像です。

この場合、どの要素にどのようにコーディングすれば
作る事ができますでしょうか。。?

いろいろ試して見ているのですが、ななかなうまくいかず、、焦っています。。
初心者で申し訳ないですが、ご存知の詳しい方いらっしゃいましたら
何卒ご教授、よろしくお願いいたします。

Aベストアンサー

一番簡単なのが、bodyに上部画像、次枠に下部画像を横にリピート
メインをセンター配置(DTDが不明なのでオールマイティに・・・)

画像の高さとコンテンツの上下差に合わせて、
padding: 20px 0 10px;の数値を変更すればお好みになる。

<head>
<style type="text/css">
body{ margin: 0; padding: 0;
background: white url(上部画像.jpg) repeat-x;}
#body2{ text-align: center; padding: 20px 0 10px;
background: url(下部画像) repeat-x left bottom;}
#wrapper{ margin: 0 auto; text-align:left; width:600px;
background-color: white; border: 1px solid silver;}
</style>
</head>
<body>
<div id="body2">
<div id="wrapper">
<h1>コンテンツ</h1>
<h2>コンテンツ</h2>
<h3>コンテンツ</h3>
<p>コンテンツ</p>
</div>
</div>
</body>

一番簡単なのが、bodyに上部画像、次枠に下部画像を横にリピート
メインをセンター配置(DTDが不明なのでオールマイティに・・・)

画像の高さとコンテンツの上下差に合わせて、
padding: 20px 0 10px;の数値を変更すればお好みになる。

<head>
<style type="text/css">
body{ margin: 0; padding: 0;
background: white url(上部画像.jpg) repeat-x;}
#body2{ text-align: center; padding: 20px 0 10px;
background: url(下部画像) repeat-x left bottom;}
#wrapper{ margin: 0 auto; text-align:left; width:...続きを読む

Qフッターの背景に色を指定したいのですが、

フッターの背景に色を指定したいのですが、

下記内容でフッターを記述し、
"#"には任意の画像またはテキスト等を指定しています。
<div id="footer">
<img src="#" />
</div>

CSSで
footerにheight:100%;や、
height:autoを試しましたが無理でした。

下記サイトのような感じで、ブラウザの一番下までフッターの背景の色を指定したいのですが、教えていただけないでしょうか?
宜しくお願いいたします。

http://www.nattoku.jp/
http://www.lets-co.com/

Aベストアンサー

http://www.nattoku.jp/
こちらのサイトは、「ブラウザの一番下までフッターの背景の色」が指定されているのではありません。フッター部分の背景の黒はbodyのbackgroundに指定されておりフッター部分には何も指定されていなので、単純にフッターのボリュームに関わらずbodyの背景色が見えているだけです。

http://www.lets-co.com/
こちらはフッター部分の背景色の黒っぽい色は#foter_wrapにbackground-colorとして指定されていますが、フッターのボリュームがある事と、padding-bottomを多めにとっている為に、「ブラウザの一番下までフッターの背景の色」がある様に見えていますが、仮にフッターやメインのコンテンツのボリュームが少なく、スクロールが発生しない状態になれば、フッターの描画が終わった残りの画面領域には違う背景色が見える事になるかと。

> footerにheight:100%;や、height:autoを試しましたが無理でした。

heightの100%やautoという値は、一体「どの高さに対しての100%やautoを示しているのか」という事を考えてみなければなりません。おそらく、ウィンドウの表示領域に対してフッター以外のコンテンツの描画が終わった残り全部、という感覚で100%とかを指定されている様に思いますが、あいにくブラウザ側では判断材料不足ですのでその様な解釈はしてくれません。ですので、この場合は単にfooterの内包する要素のボリュームに依存したまま描画領域は終わってしまいます。

まずfooterを内包する適切な親要素の高さが画面の表示領域に対して一杯(100%)になる様に指定してある事が前提です。具体的な方法は"height: 100%;"とかのキーワードでググればたくさんヒットすると思いますが、例えば下記などをご覧になってみて下さい。
【参考】http://connecre.com/connelog/connelog00000026.php

もしもフッター部分の背景は画面の横幅一杯に描画されても良いというレイアウトでしたらheightの指定なしでもOKなとても簡単な方法もあります。
http://css-happylife.com/log/css-template/000718.shtml

上記のhtml要素にフッター部分で表示したい背景を指定するという方法、を見た時には目から鱗でした。

この手の質問も頻繁に出てくるところを見ると、やはりwidthよりheightの概念の方がわかりにくく正しい認識が浸透していないのだろうな、と感じます。ちなみに、上記のサイトの作者の方がCSSビギナー向けに新たに始めた「CSS HappyLife ZERO」というサイトは、これから正しいCSSの知識を習得して行こうとする方に大変役に立つ内容だと思います。確かにCSSにしてもHTMLにしてもまずは仕様書を読み都度確認するのが大前提なのですが、技術系の文章にありがちでとかく初心者にはなかなかすんなりわかりづらい表現が多かったりするの事実ですので、その点でもこちらのサイトはとてもわかりやすく使い勝手も良いのでお勧めです。

http://www.nattoku.jp/
こちらのサイトは、「ブラウザの一番下までフッターの背景の色」が指定されているのではありません。フッター部分の背景の黒はbodyのbackgroundに指定されておりフッター部分には何も指定されていなので、単純にフッターのボリュームに関わらずbodyの背景色が見えているだけです。

http://www.lets-co.com/
こちらはフッター部分の背景色の黒っぽい色は#foter_wrapにbackground-colorとして指定されていますが、フッターのボリュームがある事と、padding-bottomを多めにとっている為に、...続きを読む

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QinputタグのテキストBOXだけ右寄せにする方法

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質問をすることにしました。


スタイルシートだけで書ければいいなと思いますがこれを知りません。
input:text {…}
みたいな書き方があればいいなと思っています。

これがダメな場合でもprototypeやjquery等のライブラリを使用し
シンプルなJavaScriptの記述で実現できればそれを知りたいです。


・原始的なJavaScriptは使わない
・id・class指定のスタイルシートは使わない
・スタイルシートだけでテキストBOXだけを右寄せにする方法
・JavaScriptライブラリを使用してテキストBOXだけを右寄せにする方法
・スタイルシート単独もJavaScriptライブラリを使用しても出来ない場合は
 「出来ない」との明言を

こんな感じでお願いします。
よろしくお願いします。

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質...続きを読む

Aベストアンサー

はじめまして。
CSSだけで実現する方法としては属性セレクタ(Attribute selectors)と呼ばれる指定方法があります。ただしこれは、一般的なモダンブラウザでは対応しているはずですがIE6以下では反応しません。

書き方としては、
[attribute=value]

inputの1行テキストボックスだけに適応させるには、
input[type="text"] { (ここにスタイル) }

という書き方ができます。
ご参考になれば幸いです。

Qequalsの逆

javaで、文字列の場合は比較演算子の「==」は用いずに

if ((str1.getText()).equals(str2)){
(※…str1,2は文字列)

と書きますよね?
この逆で、文字列str1とstr2は等しくないとき、にはif以下の条件文をどのように書けばよいでしょうか?

Aベストアンサー

>if !((str1.getText()).equals(str2)){

あくまで
if(){
}


!(str1.getText()).equals(str2)
が入っているので
if !((str1.getText()).equals(str2)){
じゃなくて
if (!(str1.getText()).equals(str2)){
こう。

QJSPでリンクを利用してパラメータを次画面に渡す方法について。

一覧表示されているデータのNOをクリックすると、二つのパラメータでデータベースへアクセスし、該当データの詳細画面に遷移する、というプログラムを作っています。

データベースへアクセスする際に必要なIDは2つで、仮にID_A、ID_Bとします。
リンク部分のソースは

---------------------------------------------------------------------
<a href = "update_form.jsp?ID_A=<%= rs.getString("ID_A") %>">番号</a>
<input type="hidden" name="ID_B" value="<%= rs.getString("ID_Bcat_id") %>">
---------------------------------------------------------------------

としておりますが、次画面へ遷移すると、ID_Bの値はnullとなってしまうために、正常にデータの取得ができません。

二つのパラメータを使用する場合のパラメータを渡す方法を教えて頂きたいと思います。よろしくお願いします。

一覧表示されているデータのNOをクリックすると、二つのパラメータでデータベースへアクセスし、該当データの詳細画面に遷移する、というプログラムを作っています。

データベースへアクセスする際に必要なIDは2つで、仮にID_A、ID_Bとします。
リンク部分のソースは

---------------------------------------------------------------------
<a href = "update_form.jsp?ID_A=<%= rs.getString("ID_A") %>">番号</a>
<input type="hidden" name="ID_B" value="<%= rs.getString("ID_Bcat_id") %>">...続きを読む

Aベストアンサー

<a href = "update_form.jsp?ID_A=<%= rs.getString("ID_A") %>&ID_B=<%= rs.getString("ID_Bcat_id") %>">番号</a>

としてID_Bを&で繋げればMethod="get"で送れますね。
inputタグで送る場合はformタグでactionアトリビュートに飛ぶjspを指定してsubmitボタンかJavaScriptでsubmitさせなければならないと思います。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング