人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

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


●質問者: tabbycats
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS HTML IE Web かるた
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● FJSK
●28ポイント

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

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

◎質問者からの返答

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


2 ● kent0608
●200ポイント ベストアンサー

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 日本語リファレンス

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ