• ベストアンサー
  • 困ってます

スクロールバーのデザインを変えたい

CSSの設定で div#information { height: 150px; overflow: scroll; } という風に記述した時に現れるスクロールバーのデザインを変えたいのですが、IE以外でも対応している方法はないでしょうか? スクロールバーのデザインを変えるいい方法がありましたら教えて下さい。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数161
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1
  • LOHA
  • ベストアンサー率52% (203/388)

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか? 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • overflow:scrollのスクロールバーのデザイン

    overflow:scrollのスクロールバーのデザイン 自分のHPで、あるリストを overflow:scroll にして、縦横指定して使っているんですが、その時のスクロールバーのデザインって変えられないのでしょうか。cssで、bodyに打ち込んでもダメ、そのリストのclassで指定してもダメでした。 どなたか分かる人があれば教えてください。

  • Firefoxスクロールバーの有無でページがずれる

    Firefoxスクロールバーの有無でページがずれる 縦の長さが長いページから短いページに切り替えるとき、スクロールバーの関係で左右にガタガタずれて見えるためcssで html{ height:100%; margin-bottom:1px;} と入れてみました。(ネットで探したものです) そうするとOperaとgoogleとSafariではずれなくなったのですが、Firefoxだけ相変わらずずれます。 overflow-y:scrollにするとずれませんでしたが、IEで見たときスクロールバーが二重に見えたので、この方法は避けたいです。 Firefoxでもガタガタずれずに切り替えられる方法はありませんでしょうか? よろしくお願いします。

  • CSSでスクロールバー

    CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか?右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか??

    • ベストアンサー
    • HTML
  • フロートしたボックスのスクロールバー

    メインのフロートボックスに垂直スクロールバーをつけたいのですが、 上手くいきません。 スタイルシートに (メインのボックス↓) .l_main { margin: 0px; padding: 0px; width: 600px; height: 550px; float: right; overflow:auto;(←スクロールバーの要素を記述) } こう記述しているのですが、ページ内容によってものすごく縦長になったり、いらぬ余白が出来たり。 独学の上、CSSの参考サイトからコピペなどして適当にやっているので分かりません。よい方法を教えてください。

  • CSSで擬似的にフレームを作りたい

    CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか?

    • ベストアンサー
    • HTML
  • <div style="overflow">でこんなことは出来ませんか?

    <div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 高さを指定せずに子divにスクロールバー

    お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか? 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか? お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> (「親divの高さ」-「他の要素の高さ」)<「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか?無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>

    • 締切済み
    • CSS
  • overflow:hiddenでスクロールバー

    <div id="header"> <div id="main"> <div id="footer"> の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。 最近 main 部分がはみ出すとブラウザにスクロールバーが 出ることに気付きました。 色々調べた結果、bodyに直接overflow:hiddenを 書けば良いことが分かりました。 ええっとそういうものなのでしょうか。ちょっと変に感じてますが。

    • ベストアンサー
    • CSS
  • DIVでスクロールバーを作ったのですが…

    DIVでスクロールバーを作ったのですが… ページが表示された時にスクロールバーの見えない部分(最下位)を表示させるにはどぅしたら良いのでしょうか?? 例:最下位のcccの部分 div.txt { border: solid 1px #808080; /*1pxには線の太さ、その後は色*/ width: 330px; /*横幅*/ height: 135px; /*高さ*/ padding: 0.5em; /*空白の大きさ*/ overflow: auto; /*スクロールバーの出方*/ } <div class="txt"> <p>111</p><br> <p>222</p><br> <p>333</p><br> <p>444</p><br> <p>555</p><br> <p>666</p><br> <p>777</p><br> <p>888</p><br> <p>999</p><br> <p>000</p><br> <p>aaa</p><br> <p>bbb</p><br> <p>ccc</p><br> </div> これは、可能ですか? よろしくお願いします。