- ベストアンサー
divで作成したテキストボックス内の横スクロールバーとバックカラー
お世話になります。 以下のhtml記述で、 (1)横スクロールバーを消したい（縦はそのまま生かしたい） (2)テキスト内(div内)のバックカラーを変更したい (3)スクロールバーの色を変更したい（無理？） のやり方を教えて頂きたく、どなたかご存知の方、 どうぞよろしくお願いします。 <html> <body> <div style="width: 12em; height: 4em; overflow: scroll;"> <p> <a href="***.htm">TEST 01</a><br> <a href="***.htm">TEST 02</a><br> <a href="***.htm">TEST 03</a><br> </p> </div> </body> </html> 以上
- kkk2998
- お礼率66% (24/36)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
1) overflow: auto; とすれば、大抵のブラウザで縦スクロールのみになります。 2) バックグランドカラーを指定すればいいだけです。 background-color: #ffff00; 3) 一応、出来ない事はないですが、Windows版IEでしか通用しません。 http://tohoho-web.com/css/reference.htm#scrollbar-base-color
その他の回答 (2)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
kkk2988さん、こんばんは。MAN_MA_RUIという者です。 > (1) overflow:scroll;をoverflow-y:scroll;にすればIEとFirefox 1.5以降ではそれ以外、例えばNetscape 8とかOperaとかでは表示が崩れます。 bodyタグなどに適用する場合はいいのですが、それ以外にはあまり適用しないほうがいいですよ。 > (2) 他の方が説明されているとおりでいいと思います。私が説明するまでもありません。 > (3) 可能ですが、Windows版IE5.5以降（独自拡張）とOpera7以降（IE互換仕様）しか対応していません。 それ以外のブラウザではOS標準のスタイルで表示されます。 特定環境でしか表示できないというのを知っておけば、使ったときトラブルに遭遇することもないんじゃないかな？ http://www.tagindex.com/stylesheet/page/scrollbar_color.html
お礼
ご回答頂き、ありがとうございました。
- 345itati
- ベストアンサー率48% (795/1639)
1.IEのみの独自拡張なら、縦方向のみのスクロールバー表示も可能。但し非IE系レンダリングエンジンのブラウザ(Firefox等)ではエラー扱いになってしまうので止めた方がいいかもしれない。 overflow-x: ; で横、overflow-y: ;で縦のスクロールバーの表示方法を指定。指定方法はoverflowと同じ。 2.スタイルシートに、 background-color: #ff0000; 等でbackground-color要素を記述すれば出来る 3.IEの独自拡張なら可。非IE系ではエラー扱いで適用されない。 →http://allabout.co.jp/internet/hpcreate/closeup/CU20021109A/
お礼
ご回答頂き、ありがとうございました。
関連するQ&A
- 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> これは、可能ですか？ よろしくお願いします。
- 締切済み
- 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
- 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
- divのoverflowのスクロールバーを自動スクロールしたい
初めて質問します。 overflowのスタイル設定をしたdivに、innerHTMLで上から下にどんどん文字を 追加していくのですが、下にはスクロールされず、つまり自動スクロールされず わざわざ下にスクロール必要があります。 このdivのoverflowのスクロールバーを自動スクロールしたいのですが、 可能でしょうか？参考になる文献などがございましたら、教えてください。 msg.innerHTML=msg.innerHTML+"<font size=-1>テスト</font><br>"; これを入力するごとに繰り返しています。 divのoverflow以外にいい方法があれば、教えてください。 今はmsg.innerHTML="<font size=-1>テスト</font><br>"+msg.innerHTML; で、つまり下から上に表示して無理矢理、表示させています。 どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
- スクロールバーのデザインを変えたい
CSSの設定で div#information { height: 150px; overflow: scroll; } という風に記述した時に現れるスクロールバーのデザインを変えたいのですが、IE以外でも対応している方法はないでしょうか？ スクロールバーのデザインを変えるいい方法がありましたら教えて下さい。
- ベストアンサー
- HTML
- DIV要素の高さ100%で、スクロールバーを表示させたいです
ソースは以下のとおりです。 DIV要素をheight:100%にして画面全体に広げるために、色々CSSで設定していましたところ、Firefoxでしたら縦スクロールバーが表示されるのですが、IE6では縦スクロールバーが表示されません。（左カラムの文字はかなり下まで続いています） IEでもスクロールバーが表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:'Georgia', Verdana, Osaka, 'MS P Gothic'; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定*/ #wrapper { width: 1001px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; } body > #wrapper { height:auto; } /*左カラムの設定*/ #left { width: 340px; margin: 0px; float: left; height: 100%; min-height: 100%; background-color:#FF0000; padding-bottom: 32768px; margin-bottom: -32768px; } /*右カラムの設定*/ #right { width: 660px; margin: 0px; float: right; height: 100%; min-height: 100%; border-left-width: 1px; border-left-style: dotted; border-left-color: #000; background-color:#00FF00; padding-bottom: 32768px; margin-bottom: -32768px; } --> </style> </head> <body> <div id="wrapper"> <div id="left"> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> </div> <div id="right"> aaaa </div> </div> </body> </html>
- 締切済み
- HTML
- CSSでスクロールバー
CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか？右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか？？
- ベストアンサー
- HTML
- overflow:scrollのスクロールバーのデザイン
overflow:scrollのスクロールバーのデザイン 自分のHPで、あるリストを overflow:scroll にして、縦横指定して使っているんですが、その時のスクロールバーのデザインって変えられないのでしょうか。cssで、bodyに打ち込んでもダメ、そのリストのclassで指定してもダメでした。 どなたか分かる人があれば教えてください。
- 締切済み
- HTML
- スクロール付きのdivタグを作成するには
縦スクロール付きのdivタグを作成するにはどうすればよろしいでしょうか。 下記のコードでやってみたのですが、うまくいきません。何が悪いのでしょうか。 var tarobj = object; var ele = document.createElement("div"); ele.setAttribute("overflow-y","scroll;"); ele.setAttribute("width", "100px"); ele.setAttribute("height", "25px"); ele.innerHTML = strobj; tarobj.appendChild(ele);
- 締切済み
- JavaScript
- CSSでスクロールボックス
div要素を使ってスクロールボックスのようなものを作っているのですが、その中にa:hoverを使ったリンクがあり、このリンクにマウスカーソルを持ってくると、スクロールボックス自体が下の方に移動してしまいます。 Internet Explorerでだけこの現象が発生します。FirefoxやOperaでは問題ありません。 何か解決方法はないでしょうか。 一応以下にソースを載せます。縦方向のスクロールする行が多いほど、移動する量も大きくなります。 --- css --- div.test { width: 90%; height: 100px; border: 1px solid #003333; overflow: scroll; } a.test:link, a.test:visited { color: #000000; text-decoration: underline; } a.test:hover { color: #ffffff; background-color: #999999; text-decoration: none; } --- End --- --- html --- <div class="test"> <table class="test" align="center"> <tr> <th width="100px"><a class="test" href="test.html">Col1</a></th> <th width="100px"><a class="test" href="test.html">Col2</a></th> <th width="100px"><a class="test" href="test.html">Col3</a></th> <tr> <td nowrap>data1</td> <td nowrap>data2</td> <td nowrap>data3</td> </tr> 以下、同じようにあと10行程度追加 </table> </div>
- ベストアンサー
- CSS
お礼
ご回答頂き、ありがとうございました。 試した所、うまくいきました＾＾