Firefoxのスクロールバーを常に表示する:CSS小技

ブログが作りたい!CSSの小技 > Firefoxのスクロールバーを常に表示する:CSS小技

Firefoxのスクロールバーを常に表示する:CSS小技

Firefoxのスクロールバーを常に表示する:CSS小技

CSSの小技(6)

これ、ご存知かしら?Firefoxは、情報がその画面内(縦)でおさまると、右側のスクロールバーを表示しない仕様になっているのです。

あなたは、「そんなん、どうでもええがな、好きにさせといたら」と思うかもしれません。

でもね、おっかさん。スクロールバーのあるページと、ないページを、交互にご覧になってみてくださいな。レイアウトが、ガックンガックンするはずです。

そこで今回の CSSの小技は、Firefoxの右側のスクロールバーを、常に表示させる方法をご紹介いたします。


Firefoxのスクロールバーが表示されないとき

ちょっと画像が小さくて分り難いかもしれませんが、まず、Firefoxでページを表示したときの状態をお話いたします。

次のように、縦長で 1画面におさまらない場合は、右側にスクロールバーが表示されます。

右側にスクロールバーが表示される

しかし、情報が 1画面におさまってしまうような場合は、右側にスクロールバーが表示されません。

右側にスクロールバーが表示されない

たしかに情報が下にないのだから、下にスクロールする必要もないので、スクロールバーを表示させないことにも意味があるのかもしれません。

しかし、スクロールバーが表示されるページと、表示されないページが混在すると、表示を切替えたときにレイアウトが、ガックンガックンしてしまいます。これは良くない。

そこで、今回の CSSの小技というわけです。

Firefoxをもっている人は、サンプルを用意したので、良かったらサンプルで実際に体験してみてください。


Firefoxのスクロールバーを常に表示する方法

1:ソースコード

(1)CSSコード

2:ポイント解説

「overflow-y」は、縦(垂直)方向に切り抜き指定ができるプロパティです。

「overflow-y」で「scroll」を指定すると、右側に縦のスクロールバーが表示されます。

長短さまざまなページがある場合は、指定しておくと良さそうです。


おまけのお話

1:Firefoxだけのお話ではない

今まで、Firefoxだけの問題と思っていましたが、Firefox以外のモダンブラウザでも同じことが起きるんですね。(以下、今回試してみたブラウザです)

  • Firefox 3.0.9
  • Google Chrome 1.0.154.53
  • Safari 3.2.1
  • Opera 9.64

どうやら、最初からスクロールバーが表示されているのは、IEだけと考えた方が良さそうです。

2:overflow-y

それから、「overflow-y」ですが、これってもともと IE独自の仕様だったんですが、CSS3から正式に実装されるプロパティなのだそうです。

現段階(2009/04/22)においては、先んじて前述のモダンブラウザも取り入れたという状況のようですね。

つまり、IE以外のブラウザで、古いバージョンのものは、「overflow-y」に対応していない可能性があるわけです。

この辺のことを考えると、Neo's Worldさんが紹介している方法の方が良いのかもしれません。

う~ん、どうでしょう。(しげお)

私は今後とくに問題なさそうなので、「overflow-yでいいかな」と思っています。ブラウザのシェアから考えても、大丈夫かなと。

人それぞれ、判断の分かれるところかもしれませんね。どちらでもお好きな方をどうぞ。

3:追記(2009/04/23)

現場のプロから学ぶ XHTML+CSS』を読み返していたら、スクロールバーを常に表示する方法として、次のように記載されていました。

ただ、「-moz-scrollbars-vertical」は、調べてみると「横のスクロールバーが表示されなくなる可能性がある」などと書かれている記事がチラホラ。

それで、「overflow-x: scroll;」しているのかしら?よく分かりません。Neoさんの方法が一番トラブルがないかもしれませんね。

前の記事へ
次の記事へ

次回予告

次回は、Firefoxでリンクをクリックしたあとに残る点線を表示させない CSSの小技をご紹介します。


関連記事

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

作成日:2009/04/22 更新日:2009/04/28

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

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

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

ありがとうございます。

無事にスクロールバーが表示できました。
^^

今夜は、スクロールバーで、いっぱい呑もう

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

無事にスクロールバーが表示されたようで、
良かったです。ヾ(*´∀`*)ノわーい

ご丁寧にありがとうございました。

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/490-359a1e10
 | トップページ | 

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
ありのごとくあつまりて