フッターを固定にしたサンプル

フッターを固定にしたサンプル

前回はヘッダーを固定にサンプルについて説明しましたが、今回はフッターを固定にしたサンプルを紹介します。

IE6に対応させる為に、以前にも紹介させて頂いたCyokodog::Diaryのcyokodogさんが使ったスクリプトを使いたいと思ったいたいと思います。

demo page

…ここからが続き

フッターを固定にしたサンプルの解説

今回固定する部分はココになります。

フッターを固定にしたサンプル

XHTML

<script type="text/javascript" src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/fixed.js"></script>

Cyokodog::Diaryのcyokodogさんが使ったスクリプトをhead内に読み込ませます。

<div id="footer">
<div class="inner">
<address>Copyright (c) 2009 <a href="http://www.css-lecture.com" title="CSS Lecture">CSS Lecture</a> All rights reserved.</address>
</div>
<!--/ #footer--></div>

htmlは普通の記述で大丈夫です。

Javascript

jQuery(function($j){
	$j('#footer').positionFixed()
})

fixed.jsの最後にposition: fixedを使い部分に指定。

CSS

html, body	{
	_height: 100%;   
	_overflow: auto;  
}

body要素、html要素に上記ソースを記述しておきます。

/* footer要素
----------------------------------------------------------- */
div#footer	{
	width: 100%;
	background: #000 url(../images/bg/footer.jpg) repeat-x;
	color: #FFF;
	position: fixed;
	bottom:0;
	left:0;
}

CSSは特に変った指定はしていません。

※XML宣言を省いた(標準モード)時のみ有効となります。

2/14追記

cyokodogさんからスクロールバーの表示が変とのご指摘を受けIE6には完璧には対応出来ていない事が分かりました...
ガタつきはありますが、サンプルの方まで作って頂きましたので紹介させて貰っておきます。

http://cyokodog.web.fc2.com/cyokolab/example/fixed_position_ex0207.html

Comments

てる

てる

すいません、言葉があいまいでしたw

もともとある固定フッタをクリックで閉じたいという意味ですww

せっかくご回答してもらったのにホントすいません・・・

2010年04月02日 21:04

MIYA

MIYA

てるさん。

出来るか出来ないかで言えば出来ます。
ですが、即デモを作れる程でないですが…

急ぎなら CSS EBLOG さんの
http://css-eblog.com/css-only/only-css-popup-footer.html
こちらを参考にしてみて下さい><

2010年04月02日 20:30

てる

てる

これを、開閉式(隠したりしたい)にしたいのですが、できますでしょうか?

2010年04月02日 17:48

MIYA

MIYA

みやびくちぃさん。全然気にしなくていいですよ^^

むしろ参考にしてくれてありがとうございます!これからも頑張ります^^

2009年09月19日 16:12

みやびくちぃ

みやびくちぃ

人知れず紹介してしまってすみませんー><
こちらのサイトはたくさん参考にさせてもらったものが多く、本当に助かりました!
これからのレクチャーも楽しみにしております。

ブログ更新頑張ってください!

2009年09月19日 01:49

MIYA

MIYA

cyokodogさんご指摘ありがとうございました。

スクロールバーについて気がついていませんでした…

またサンプルまで作って頂きありがとうございます!
追記として紹介させて頂きました。

2009年02月14日 19:07

cyokodog

cyokodog

cyokodogです。
ご紹介ありがとうございます。
サンプルページ IE6で見ましたがスクロールバーの表示が変ですね。
これの影響のようです。
html, body {
_height: 100%;
_overflow: auto;
}

こちらにサンプル作ってみました。
http://cyokodog.web.fc2.com/cyokolab/example/fixed_position_ex0207.html

フッターをwidth:100%とする都合上
body{margin:0}
としてます。
ガタついてしまいますが、ガタつき前提のスクリプトなので。。

2009年02月14日 00:41

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article