「ページの先頭へ戻る」の常駐表示:CSS小技

ブログが作りたい!CSSの小技 > 「ページの先頭へ戻る」の常駐表示:CSS小技

「ページの先頭へ戻る」の常駐表示:CSS小技

「ページの先頭へ戻る」の常駐表示:CSS小技

CSSの小技(13)

今回は、「ページの先頭へ戻る」のリンクボタンを、右下に常駐表示させる CSSの小技です。

position: fixed;(固定配置)」だけで簡単に済むものと思っていたんですが、甘かったです。何しろ IE6への対応が、ややこしい。

また、IE6よりも以前のIEブラウザには対応しないようです。使用するかどうか悩む人もいらっしゃるかもしれませんが、おもしろいテクニックなのでご紹介しておきます。


「ページの先頭へ戻る」の常駐表示とは?

例えば、次のようにページの右下に表示され続けるリンクボタンのことです。縦にスクロールしても、表示されたままです。

右下に表示され続けるリンクボタン

イメージし難いと思うので、サンプルを用意しました。良かったらサンプルをご覧になってみてください


「ページの先頭へ戻る」を常駐表示させる方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、positionによって「fixed(固定配置)」していることです。

そして、下から 10px、右から 10pxのところにクラス名「page-back」をつけた div(の中の画像)が配置されるわけです。

モダンブラウザであれば、これだけで問題なく表示されます。

3:CSSハック付

しかし、IE6以前のIEブラウザは、fixedに対応していないとのことで、うまいこと配置されません。

IE6に関しては、次のような CSSハックを加えることで、何とかfixed的な表示が可能になります。

何をしているかというと、html、および bodyをまずブラウザの表示領域いっぱいいっぱいに広げています。(「margin: 0;」と「padding: 0;」は事前にリセットしている場合は不要です)

また、「overflow-y: hidden;」をすることで、通常表示されるスクロールバーを消して(非表示にして)います。

ただ、スクロール機能がなくては困るので、bodyタグのすぐ内側に作ったdiv(body-inner)にて、スクロールバーを設置しています。(「height: 100%;」と「overflow-y: scroll;」)

最後に、クラス名「page-back」を付けたdiv(の中の画像)を、絶対配置(absolute)してあります。

CSSハックは、スターハックを使っています。「* html」を付けることで、WindowsのIE4~IE6にのみCSSがかかります。


参考になる役立つページ

どちらも優秀なエンジニアさんのサイトです。探してみると、こういうすごいサイトがあるものなんですね。

とても勉強になりました。そして、CSSハック部分はかなり参考にさせていただきました。ありがとうございました。

前の記事へ
次の記事へ

次回予告

次回は、一覧表(table)をきれいに表示する CSSの小技をご紹介したいと思います。


関連記事

CSSに関連する記事を、ご紹介します。

作成日:2009/05/03 更新日:2009/05/03

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

なるほど!IE6のスターハック、よく分からず何度か使っています。
未だによくその原理が分からず、IEのバグだと決めつけていますが
本当のところはどうなんでしょうね?

ページの先頭へ戻るの常駐表示はユーザビリティ上では良いと思われ
る?ので、今度この記事を参考に使わせていただきます。


スターハック

fuminchuさん、こんばんは!(・∀・)/ぐいぶにん
コメントありがとうございます。


はい。おっしゃる通り、
たいていはIEのバグのようです。(`・ω・´)

あとは、CSSのバージョンと、
IEのバージョンのリリースの時期が、
うまいことかみあわなくて対応していないということも、
あるようです。


ページの先頭へ戻るの常駐表示は、
レイアウトの邪魔にならなければ配置してみたいですねー。

右側にメニューなどがある場合は、
ちょっとかぶる可能性もありますよね。

なるほどぉ~簡単だったんですね!

KumaCrowさん、こんにちは!
またまた、便利な情報ありがとうございます!!

固定するにはどうするのかわからず、
あれこれ探してましたが、
ココにありましたか、
しかも超簡単、わかりやすい!

感謝です!

覚えるのが速い!

extreme1webfc2comさん、こんにちは!(・∀・)/ぐもにさんで
コメントありがとうございます。

お役に立っているようで、何よりです。
良かった、良かった。(´▽`)♪

しかし、覚えが速いのね~。

No title

↑のHTMLコードは、具体的にHTMLのどこに
いれれば良いのでしょうか?

CSSコードはCSSの一番下でよろしいでしょうか?

ご教授頂ければ助かります

コードの位置

リーシャさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。


HTMLコードは、HTML編集内の下の方に次のような箇所があると思うので、
この行の上あたりに入れておくと分かり良いのではないでしょうか。

「<!--▼▼▼▼ フッター( FC2 コピーライト )▼▼▼▼-->」


CSSコードも、スタイルシートの下の方に書いておくと、
分かり良いと思います。

おっしゃる通り、一番下でOKです。


うまくいかなかった場合は、
お手数ですが改めてコメントしてくださいませ。

解決しました!!

KumaCrowさんへ

まず返信の早さに驚きました!!
無事仰る方法で問題解決出来ました。

このサイトは大変勉強になります。
今後もお世話になります

良かったです!!

リーシャさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。

解決できたようで良かったです。

今後もよろしくお願いします。(*´∀`)人(´∀`*)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/497-8f56792f
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて