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

このQ&Aのポイント
  • ブログやウェブページにスクロールバーを追加しようとした際、枠だけが表示されてスクロールバーが表示されない問題が発生しました。この問題の原因と改善方法について教えてください。
  • スクロールバーが表示されない問題は、スクロールバーのスタイルが正しく設定されていないことが原因です。改善するためには、スクロールバーのスタイルを適切に指定する必要があります。
  • スクロールバーが表示されない問題を解決するためには、CSSを使用してスクロールバーのスタイルを設定することが重要です。適切なCSSスタイルを選択し、要件に合わせて適用してください。
回答を見る
  • ベストアンサー

スクロールバーが表示されない。。

枠つきのスクロールバーをもらい ブログにつけようとしましたが、 なぜか枠だけでスクロールバーだけが表示されません。。 原因はなんでしょうか? 改善の方法はありますか? 下のタグです <div style="width:337;height:200;overflow:auto; scrollbar-3dlight-color:#ff00ff; scrollbar-arrow-color:#ff00ff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff00ff; scrollbar-track-color:#ffffff; "> <Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95"> <Tr><Td height="30" bgcolor="#004a95" align="left"> <font size="3" color="#ffffff" face="MS ゴシック"> タイトル部分</font> </Td></Tr> <Tr><Td bgcolor="#ffffff" align="center" valign="top"> 内容部分 </Td></Tr> </Table></div>

  • CSS
  • 回答数5
  • ありがとう数4

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

  • ベストアンサー
  • haru_run
  • ベストアンサー率68% (55/80)
回答No.5

すいません。px入れるの忘れてました。(後から修正が出来ないのは不便ですね) <Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95"> <Tr><Td height="30" bgcolor="#004a95" align="left"> <font size="3" color="#ffffff" face="MS ゴシック"> タイトル部分</font> </Td></Tr> <Tr><Td bgcolor="#ffffff" align="center" valign="top"> <div style="width:337px;height:200px;overflow:auto; scrollbar-3dlight-color:#ff00ff; scrollbar-arrow-color:#ff00ff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff00ff; scrollbar-track-color:#ffffff;"> 内容部分 </div> </Td></Tr> </Table>

その他の回答 (4)

  • haru_run
  • ベストアンサー率68% (55/80)
回答No.4

念のため、上のタグを位置だけ修正したものを書いておきます。 <Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95"> <Tr><Td height="30" bgcolor="#004a95" align="left"> <font size="3" color="#ffffff" face="MS ゴシック"> タイトル部分</font> </Td></Tr> <Tr><Td bgcolor="#ffffff" align="center" valign="top"> <div style="width:337;height:200;overflow:auto; scrollbar-3dlight-color:#ff00ff; scrollbar-arrow-color:#ff00ff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff00ff; scrollbar-track-color:#ffffff;"> 内容部分 </div> </Td></Tr> </Table>

samusamu4545
質問者

お礼

ありがとうございます。大変助かりました^-^ これで安心できます。感謝してます♪

  • haru_run
  • ベストアンサー率68% (55/80)
回答No.3

上記のタグではなく、アップしているページのタグを修正しましたので <Tr><Td height="30" bgcolor="#004a95" align="left"> <font size="3" color="#ffffff" face="MS ゴシック"> タイトル部分</font> </Td></Tr> が抜けてます。 あとは、 <Table border="0" width="340" height="200" cellspacing="0" bgcolor="#bfdfff"> のwidthの数値を下のwidthに合わせてます。 <div style="border:thick dashed #bfdfff; width:335px; height:200px; ・・・ ここはwidthとheightの数値の後にpxを追加 IEはなくても大丈夫なんですが、Operaはpxがないとスクロールバーが出てこないので。 (ブラウザによって同じタグでも見え方が変わってきます) width:335pxはwidth:337pxでもあまり変わらないのでどちらでもどうぞ。 border:thick dashed #bfdfff;はアップしているページに入ってたのでそのまま入れてます。 必要なければ削除してもいいです。

  • haru_run
  • ベストアンサー率68% (55/80)
回答No.2

IE6 SP3ではスクロールバー出てますが、Opera9.61で見ると出てませんね。 しかもOpera9.61では、枠の表示がおかしくなってます。 ソースよく見ましたら<div style="width:337~scrollbar-track-color:#ffffff;">の入れる位置がまずいです。 <Tr><Td bgcolor="#ffffff" align="center" valign="top">の後に移動させて下のようにしてください。 <Table border="0" width="340" height="200" cellspacing="0" bgcolor="#bfdfff"> <Tr><Td align="center" valign="top"><div style="border:thick dashed #bfdfff; width:335px; height:200px; overflow:auto; scrollbar-3dlight-color:#ff00ff; scrollbar-arrow-color:#ff00ff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff00ff; scrollbar-track-color:#ffffff;"> <p><font color="#0080ff" face="MS ゴシック">内容部分</font></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> </div></Td></Tr> </Table> これでIE、Operaともスクロールバー出てきます。 スクロールバーが表示されることが確認できましたら<p>&nbsp;</p>は削除してください。

samusamu4545
質問者

お礼

回答ありがとうございます。 無事にできました。助かりました。ありがとうございます♪ <div style="width:337~scrollbar-track-color:#ffffff;">の部分は少し位置と入力文字も変わってるようですし、 他の段の部分も変わったようにおもうんですけど、 どこを変えたか教えてもらえますか?すいません。。

  • haru_run
  • ベストアンサー率68% (55/80)
回答No.1

<div style="width:337;height:200;overflow:auto; overflowが入っていますので、内容部分の高さが200px以上にならないとスクロールバーが出てきません。 試しにテーブル内の内容部分に連続して改行してみてください。 200pxを越したところでスクロールバーが出てきますので。

samusamu4545
質問者

お礼

回答ありがとうございます。 やってみたんですけど、どうしてもでません、。。 かなり高さもあるとおもうんですけど。。 一度みてくれますか? ttp://yasu2424.seesaa.net/ タイトルって書いてるブルーの枠のがそれです

関連するQ&A

  • スクローラーバー が表示されない

    更新履歴などによく使われているスクローラーバーなんですが、 まったく同じものがサーバーによって正常表示されません。 YAHOOサーバーではちゃんとスクロールされるのに、 さくらサーバーではそのまま縦長になって表示されます。 回避の方法が全く思い当たりません。 ご教授よろしくお願いします。 <div style="width:300;height:140;overflow:auto; scrollbar-3dlight-color:#ffaa99; scrollbar-arrow-color:#ffaa99; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffaa99; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffaa99; scrollbar-track-color:#ffffff; "> <Table border="1" width="280" height="150" cellspacing="0" bordercolor="#ffaa99"> <Tr><Th height="30" bgcolor="#ffaa99"> <font size="3" color="#ffffff" face="MS ゴシック"> 更新履歴</font> </Th></Tr> <Tr><Td> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ (実際にはここに長々と文章があります) <Td></Tr> </Table> </div>

  • Tableずれ

    いつもお世話になっております。 ソースは以下の様となります、htmlのときが正常に表示されますが。 JSP化すると微妙が所にテーブルがずれてしまい、これを解消するにはどんな解決あるかな? <html> </body> <table width="700" border="0" cellspacing="0"> <tr> <td valign="top"><table width="100" border="1" cellspacing="0" bordercolor="#FF3366" > <tr align="center"> <td height="23" ><img src="../Assets/Body/Common/StaffList.gif" alt="スタッフ" width="31" height="12" /></td> </tr> <tr align="center"> <td height="23" >田中栄子</td> </tr> ・ ・ //この部分がJSP上がループ処理となる ・ </table> </td> <td valign="top"> <div style="overflow-x:scroll; width:601px; scrollbar-track-color: #FFffff; scrollbar-face-color:#ff3366; scrollbar-shadow-color: #ff3366; scrollbar-highlight-color: #ff3366; scrollbar-arrow-color: #ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#ffffff;"> <table width="1200" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF3366" > <tr align="center" class="time_font" > <td> ・ ・ //この部分がJSP上がループ処理となる ・ ・ ・ ・ </td> </tr> </table>  </div>   </td> </tr> </table> </body> </html> ちょっと長いですが、見ていただいてありがとうございます、賜りたく切にご回答をまちしておております。

  • スクロールするテーブルに背景画像を固定させたいのです

    HTMLでテーブルを作り、スクロールできる仕様にしました。そこに背景画像を入れたのですが、スクロールの際に一緒に背景画像もスクロールしてしまいます。 文字などだけをスクロール可能にして、背景画像を固定にする方法を知っている方は教えてください。 私のソースは下記です。よろしくお願いします。 <html> <TABLE border="0" width="695" background="top-6.GIF"> <TR><TD width="72" height="34"></TD><TD width="623" height="34"><font color="red"><b><center>お知らせ</center></b></font></TD></TR> </TABLE> </DIV> </DIV> <!--本体部分--> <DIV style="overflow-y:scroll;direction:ltr;width:695;height:114px"> <DIV style="direction:ltr"> <TABLE border="0" width="695" background="top-7.GIF" style="background-attachment: fixed"> <TR><TD width="72">A</TD><TD width="623">B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> <TR><TD>I</TD><TD>J</TD></TR> <TR><TD>K</TD><TD>L</TD></TR> <TR><TD>M</TD><TD>N</TD></TR> <TR><TD>O</TD><TD>P</TD></TR> </TABLE> <DIV style="overflow-y:scroll;direction:ltr;width:695; scrollbar-base-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF"> <DIV style="direction:ltr"> </DIV> </DIV> </html>

  • デーブルが延びる

    たまにテーブルが意図しないかんじで右にのびる場合が あります。これを防ぐにはどうすれば、いいですか? どういうタグを打てばいいですか? <table width="85%" border="0" cellspacing="0" cellpadding="2" bgcolor="#ff0066"><trheight="216"> <td valign="top" align="center" bgcolor="#ff0066" width="786" height="216"><table width="786" border="0" cellspacing="0" cellpadding="2" bgcolor="#eeeeee"><tr> <td colspan="2" bgcolor="#ff0066" width="782" height="23" valign="top"><div align="left"> <font size="3" color="white" face="MSゴシック,OSAKA">例</font><b><font size="2" color="white"><font size="3" face="arial,verdana"><b><br></b></font></font></b></div></td></tr> <tr height="158"><td colspan="2" align="center" bgcolor="white" width="782" height="158"> <div align="left"><br> <font size="3" color="#555555" face="MSゴシック,OSAKA">テスト募集</font><font size="2" color="#555555" face="MSゴシック,OSAKA">!</font> <p><font size="2" color="#555555">XXXXX参加して頂ける方を随時募集しております。<br> </font></p><p></p> <div align="left"><p></p></div></div></td> </form></tr><tr height="23"><td colspan="2" width="782" height="23" valign="top"> <div align="right"><br></div></td></tr> </table></td></tr><tr> <td valign="top" width="786"><br></td> </tr></table>ソフトはD WとGo Liveを使います。

    • ベストアンサー
    • HTML
  • WEB上とPC上で font が・・・

    <Div style="width:200;height:100;overflow:auto; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; "> <table style="font-size: 12px; padding: 3; width: 180px;"><tr><td> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </td></tr></table> </Div> これをPC上で表示すると、font 12px になりますが、 WEB上で表示すると、何故か 12px より大きくなります。 何故そうなり、どうやったらWEB上でも 12px になりますでしょうか?

    • ベストアンサー
    • HTML
  • td width="180" と固定してるのですが・・

    <div style="width:500;height:220;overflow:auto; scrollbar-3dlight-color:#9acd32; scrollbar-arrow-color:#9acd32; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#9acd32; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#9acd32; scrollbar-track-color:#ffffff; "> <table style="font-size:13px; color:magenta;"><tr align="center"> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> </tr></table> </div> img には 110×150 のサイズの写真を入れています。 div width="500" にしているので、180×3=540 ですから3枚目のimgが途中で切れて、残りが横スクロールに引っ込むと思ってたのですが、実際にはimgがぎゅうぎゅうに詰まって4.8枚見えるようになります。 何故 td width を固定しているのに変動してしまうかがわかりません。 どうすれば img と img のあいだを余裕もたせて表示することができますでしょうか? よろしくご教授のほど願います。

    • ベストアンサー
    • HTML
  • ホームページ製作過程で、タグの組み方に困っています。

    テーブルを <TABLE cellpadding="0" bgcolor="#000000" border="3"> <tr> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> </tr> </TABLE> のように組んでいます。 これは同盟に参加している人数を表示するためのものなのですが、このテーブルの左右に 現在のメンバー ○○○○ 名 (○→テーブル) のように字をするにはどうすればいいのでしょうか。 また、この字を含めたテーブル全体の表示位置を指定するにはどうすればいいのでしょうか この2点について教えていただきたいです。よろしくお願いいたします。

  • HTMLタグでテーブル枠を曲線で記述したい

    添付画像は「オークションプレートメーカー2」のテンプレートで、少しアレンジしようと思っています。 最上部の角が丸くなっていますが、下記のどの部分にあたるのでしょうか? すみませんが教えてください。 <br><center> <table cellspacing=0 border=0 cellpadding=0 width=550> <tr> <td width=1></td> <td width=1></td> <td width=1></td> <td width=2></td> <td width=2></td> <td width=536></td> <td width=2></td> <td width=2></td> <td width=1></td> <td width=1></td> <td width=1></td> </tr> <tr> <td height=1 colspan=4></td> <td height=1 bgcolor=#FF6666></td> <td rowspan=5 bgcolor=#FF6666 align=center> <font color=#FFFFFF size=5><b> </b></font> </td> <td height=1 bgcolor=#FF6666></td> <td height=1 colspan=4></td> </tr> <tr> <td height=1 colspan=3></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=3></td> </tr> <tr> <td height=1 colspan=2></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=2></td> </tr> <tr> <td height=2></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=2></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666><br><br></td> <td colspan=5 bgcolor=#FF6666><br><br></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666></td> <td> <table width=100% cellspacing=5 border=0 cellpadding=10 bgcolor=#FFCC66> <tr> <td align=left bgcolor=#FFF0F0> <font color=#993333 size=3> </font> </td> </tr> </table> </td> <td colspan=5 bgcolor=#FF6666></td> </tr> <tr> <td height=7 colspan=11 bgcolor=#FF6666></td> </tr> <tr> <td height=2 colspan=11></td> </tr> <tr> <td height=2 colspan=11 bgcolor=#FF6666></td> </tr> </table> <br> <font color="#999999" size=1>+ + + この商品説明は</font> <a href="http://www.auclinks.com/" target="_blank"><font color="#666666" size=1>オークションプレートメーカー2</font></a> <font color="#999999" size=1>で作成しました  + + +</font><font color="#FFFFFF" size=1><br>No.113.002.002</font><br> </center>

    • ベストアンサー
    • HTML
  • テーブルが左右上下中央表示にできない。

    <style type="text/css"> <!-- .tableley { text-align: center; } .tableley table{ margin-left: auto; margin-right: auto; } .tableley caption{ margin-left: auto; margin-right: auto; } bodytd{ letter-spacing :2px; line-height :15pt; font-size:80%;font-family:'Verdana'; color:#ffffff; } br{letter-spacing:normal;} body{overflow-y:hidden; margin:0;padding:0; background-attachment:fixed; } a{ text-decoration:none; color:#000000; } a:hover{ color:#808080; } --> </style> </head> <body> <table border="0" width="100%" height="100%" cellspacing="0" summary="テーブル"> <tr> <td colspan="3" style="border-bottom:1px solid #000000" bgcolor="#000000" valign=bottom><font size=5><b>SITE NAME</b></font> </td> </tr> <tr> <TD height="80%" width="250" align="center" valign="top" colspan="3"><BR> <BR> <table style="border: 1px dotted #cccccc;"> <tbody> <tr> <TD><IMG src="ConvertImage/ice.png" width="187" height="131" border="0"></TD> <TD height="120" width="200"> <div style="width: 270px; height:140px;color:#cccccc;font-size:10px;font-family:Verdana;overflow:auto; scrollbar-face-color:#000000; scrollbar-highlight-color:#000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #cccccc; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000;"><FONT color="#cecfce">ここにテキスト<BR> </FONT></div> </TD> </tr> </tbody> </table> </TD> </tr> <tr> <td colspan="3" style="border-top:1px solid #000000" bgcolor="#000000" align="right" valign="top"><FONT color="#ffffff">SINCE</a> </td> </tr> </table> </body> と、ビルダーでフレームを使わず横三分割のサイトを作ったのですが 真ん中の白い部分にあるテーブルを白ページ上下左右中央に設置出来ず悩んでいます。どうか解決策を教えてくださいお願いします。

    • ベストアンサー
    • HTML
  • 1ページにテーブルを複数設定・一括変更の方法について

    一つのページに複数(十数個)を設置する場合 まとめて設置する方法はあるのでしょうか? また、サイズ等を変更したい場合も 一括して変更する方法はあるのでしょうか? 例えば、以下の物を数十個設置する場合 設置自体は簡単なのですが、変更が・・、 どうにか簡単にできる方法があればご教授下さい。 <center> <table border="0" width="600" cellspacing="1" bgcolor="#0fb1ff" height="200"> <tbody> <tr> <td colspan="2" width="600" bgcolor="#ffffff" height="20" align="center"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="100" align="center"></td> <td width="400" bgcolor="#ffffff" height="100"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> <tr> <td width="200" height="20" bgcolor="#ffffff" align="center"></td> <td width="400" height="20" bgcolor="#ffffff"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> </tbody> </table> </center> 宜しくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう