• 締切済み

overflow:scrollのスクロールバーのデザイン

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

  • HTML
  • 回答数1
  • ありがとう数2

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

IEならCSSで .myscrol_lbar { scrollbar-face-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ff0080; scrollbar-3dlight-color: #ff0080; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-darkshadow-color: #ff0080; } <div class="myscrol_lbar"> で出来ると思うんですが．．．． 「スクロールバー デザイン」で検索してみると、たくさん例が見つかりました。 http://technique.eweb-design.com/1104_sb.html http://scrollbar-maker.com/ Firefox用のツールもありました http://www.hesido.com/web.php?page=customscrollbar これは、javascript使用です。 ブラウザー提供のスクロールバーを使うんじゃなく、 javascriptで作るってのも、ひとつの方法です。 　jQuery UI　のスライダーとか使ってオリジナルのを作ってみるとか http://jqueryui.com/demos/slider/

kurocuma
質問者

お礼

おぉ、早速ありがとうございます。 いろいろ試してみたのですが、クローム使用の私にはちときついみたいです。 でもIEでは使えるようなので、感謝しております。 javascript・・・・勉強中なんですが、頑張ってみます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

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

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

    • ベストアンサー
    • HTML
  • CSS)overflow,スクロールについて

    独学でホームページをツクッテいる者です。 overflow:scroll;をするとIE以外でうまく表示できません。 Firefoxなどでは、BOXの中の文字がスクロールバーごとBOXの外(右側)に大きくずれてしまいます。 IEですと、きちんとBOXの中に文字も収まり、スクロールバーも表示されます。 ためしにoverflow:scroll;をCSSから消して更新すると、文字はBOXの中に収まります。 FirefoxでもBox内がずれずにスクロールされる方法はないでしょうか？

    • ベストアンサー
    • CSS
  • CSSでスクロールバー

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

    • ベストアンサー
    • HTML
  • overflow:hiddenでスクロールバー

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

    • ベストアンサー
    • CSS
  • 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を自動で移動

    CSSでoverflow:scrollと設定したときに表示されるフレームをボタンを作ってこのボタンを押したときに○○px横に自動的にスクロールさせるようなjavascriptはどのように書けばいいのでしょうか？？対応ブラウザはIEのみで大丈夫です。

  • スクロールバーの非表示

    PC上で操作するシステム画面をhtml+cssで作成しました。 そのhtmlファイルを、アクティブデスクトップに設定して使用する、というものなのですが、画面に出てしまうスクロールバーを非表示にしたいのですが、JavaScriptや、cssで、scroll=hiddenや、overflow:hiddenなど設定をしても非表示にすることができません。（ブラウザでも非表示にできませんでした。） 非表示の設定に関係するかどうかわかりませんが、 html内では、 メッセージをスクロールさせるために、 <body onLoad="scroll()"> の記述と、 タブ操作をするために、フリースクリプトのtabMakerを使わせていただいています。 不十分かもしれませんが、上記の内容で解決の方法はありますでしょうか。よろしくおねがいいたします。

  • CSSで「overflow:scroll」をしてい

    CSSで「overflow:scroll」をしているボックス内で表示している 特定のボックスを最前面に表示させることは 可能なのでしょうか。 文字では説明しにくいので 例として ------------- <STYLE type="text/css"> .box1{ overflow: scroll; width: 200px; height: 100px; } .box2{ width: 200px; height: 40px; background-color: yellow; position: relative } .box3{ width: 200px; height: 40px; background-color: pink; position: relative; left: 100px; top: -10px } </STYLE> <div class="box1"> <div class="box2">Box No.2</div> <div class="box3">Box No.3</div> </div> ------------- だとして、 <div class="box3">Box No.3</div>を <div class="box1">よりも前面に表示させたいのですが スタイルシートで実現可能なのでしょうか。 いろいろ調べながらやってみましたが 解決できなかったので知恵をお貸し頂ければと思い 投稿させて頂きました。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • デザインされたスクロールバーについてです

    いつもお世話になっています。。 デザインされたスクロールバーを使用したくて、 flexcrollというファイルをダウンロードしました。 こちらのサンプルにあるファイルが使用しているものと同じかと思います http://lifescape.seesaa.net/article/51751860.html ファイルは javascriptのflexcroll.jsと cssを2ファイルを使用しています。 こちらでページ内に色を指定したスクロールバーを設置できたのですが、 同じスクロールバーをサイズ違いで、同ページ内に2つ設置したい場合、CSSでは指定が一つしかできないので、同じ大きさのスクロールバーしか設置ができません。 javascriptを2つ用意してCSSのクラス名を変更するれば、同ページ内で2種類のスクロールーが設置できるのか？？ よくわかりません。。 どうかご教授お願い致します。

    • ベストアンサー
    • HTML
  • スクロールバーの幅を取得するには？

    対象はIE6～8です。 CSSの overflow-y: scroll; で表示される垂直スクロールバーについてなのですが、 これは対象領域の横幅がスクロールバーの横幅よりも細いと、スクロールできなくなります。 （使用不可のグレー表示になります） ある機能を実現するために、スクロールバーだけを独立して表示させたかったので、 ぎりぎりの横幅（18px）を指定していたのですが、問題が起きました。 デスクトップでの右クリックから開ける「画面のプロパティ」→「デザイン」で、 フォントサイズを変更したり、あるいは詳細設定でDPIを変更すると、 スクロールバーの幅が変わってしまうために、「ぎりぎりの横幅」も変わってしまいます。 それにより、18pxの指定ではグレー表示となり動かせなくなりました。 この解決策を求めています。 現状としては、JavaScriptでスクロールバーの幅を取得できれば、 初期表示時に補正できるので、一番手軽と考えているのですが・・・ よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する