【HTML,CSS】有力回答者には200ポイント差し上げます。


まず、下記のサイトの記事をご覧ください。
http://css-happylife.com/log/css-template/000718.shtml

こちらの記事のように、コンテンツが少ない場合でも背景色が最後まで表示されるようにhtmlに背景色を設定しています。
しかし、読み込み時の一瞬、画面全体が背景色で塗りつぶされてしまうためちらつきます。
原因はメインコンテンツの読み込みに多少時間がかかるためだと思われます。
ローカルでは確認しづらいのですが、WEB上(特にIE)ではちらつきが目立ちます。

このちらつきを回避する方法はありますでしょうか。

背景色を最後に読み込ませる、またはhtmlに背景色を設定せずにフッターを最後まで伸ばす方法はありますでしょうか。
なお、フッターを一番下に表示させる方法ではなく、フッター下の余白をフッターと同じ色で塗りつぶす方法でお願いいたします。

現在制作中のサイトは、上記サイトのサンプルページのように、ヘッター・フッターの幅は100%です。
また、メインコンテンツの背景色に比べ、ヘッダー・フッターの背景色は濃い色となっております。

それでは、ご回答よろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2009/01/26 02:38:02
  • 終了:2009/01/26 21:04:57

ベストアンサー

id:kent0608 No.2

kent0608回答回数220ベストアンサー獲得回数232009/01/26 04:01:31

ポイント200pt

sample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuerytest</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
$(function(){
	$("html").css("background","#FF9933");

});
</script>
<link href="foobar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">ヘッダー</div>
<div id="contents">コンテンツ内容</div>
<div id="footer"> フッター</div>
</body>
</html>

foobar.css

@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #CCCCCC;

}

#header {
	height: 100px;
	width: 100%;
	background-color: #FFCC33;
}
#contents {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	height: 300px;
	background-color: #FFFFFF;
}
#footer {
	background-color: #FF9933;
	width: 100%;
}

解説)

javascriptライブラリであるjQueryを用いて、コンテンツが読み込まれた後のタイミングで、フッター部分用のhtml背景色を設定しています。

メインコンテンツの読み込みが完了するまでhtmlのBackground-color指定はされませんので、お悩みのちらつきは回避できるかと思います。

(ただしメインコンテンツの読み込みが終わるまで、殆ど一瞬ですが、フッターの見かけ上の高さは低いままになります。)

ローカルからIEで確認する際は、「セキュリティ保護のため~」というメッセージが表示されますので、右クリック->「ブロックされている

コンテンツを許可」->「はい」を選択してください。(そうしないとjavascriptが実行されません)

なお<script type="text/javascript" src="jquery-1.2.6.js"></script>
の部分はご自分がダウンロードしたjQueryのソースファイル名に合わせて下さい。

jQueryについてはこちらを参照

jQuery 1.3.1 日本語リファレンス

id:tabbycats

ご回答ありがとうございます。素晴らしいです。jQueryで対応できたのですね。おかげさまでちらつきを回避することができました。勉強になりました。ありがとうございます。

2009/01/26 21:02:31

その他の回答(1件)

id:FJSK No.1

FJSK回答回数53ベストアンサー獲得回数42009/01/26 03:09:09

ポイント28pt

footer部分のCSSをmainbody部分(よくcontainerと指定される)の下に絶対指定で指定しておけば、ずっと下にくっついていると思います。

containerは相対指定でheight:100%に指定する。

id:tabbycats

ご回答ありがとうございます。質問文にも書いてありますが、フッターを一番下にくっつける方法ではなく、フッター下の余白を同じ色で塗りつぶす方法をお聞きしたかったのです。

2009/01/26 20:56:30
id:kent0608 No.2

kent0608回答回数220ベストアンサー獲得回数232009/01/26 04:01:31ここでベストアンサー

ポイント200pt

sample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuerytest</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
$(function(){
	$("html").css("background","#FF9933");

});
</script>
<link href="foobar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">ヘッダー</div>
<div id="contents">コンテンツ内容</div>
<div id="footer"> フッター</div>
</body>
</html>

foobar.css

@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #CCCCCC;

}

#header {
	height: 100px;
	width: 100%;
	background-color: #FFCC33;
}
#contents {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	height: 300px;
	background-color: #FFFFFF;
}
#footer {
	background-color: #FF9933;
	width: 100%;
}

解説)

javascriptライブラリであるjQueryを用いて、コンテンツが読み込まれた後のタイミングで、フッター部分用のhtml背景色を設定しています。

メインコンテンツの読み込みが完了するまでhtmlのBackground-color指定はされませんので、お悩みのちらつきは回避できるかと思います。

(ただしメインコンテンツの読み込みが終わるまで、殆ど一瞬ですが、フッターの見かけ上の高さは低いままになります。)

ローカルからIEで確認する際は、「セキュリティ保護のため~」というメッセージが表示されますので、右クリック->「ブロックされている

コンテンツを許可」->「はい」を選択してください。(そうしないとjavascriptが実行されません)

なお<script type="text/javascript" src="jquery-1.2.6.js"></script>
の部分はご自分がダウンロードしたjQueryのソースファイル名に合わせて下さい。

jQueryについてはこちらを参照

jQuery 1.3.1 日本語リファレンス

id:tabbycats

ご回答ありがとうございます。素晴らしいです。jQueryで対応できたのですね。おかげさまでちらつきを回避することができました。勉強になりました。ありがとうございます。

2009/01/26 21:02:31

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません