Various scroll bars 2
※ Windows IE Only
The third scroll bar
これはテーブルにスクロールバーをつける方法
ページ本体の縦スクロールバーは消してあります
横があふれた場合はページの横スクロールバーが出ます
ページの横スクロールバーを消すことも出来ます
ページの横スクロールバーを消す時は
スタイルシートのbody部分に
overflow-x:hidden;
と記入します
縦横両方消す場合は
overflow:hidden;
と記入します
WindowsIE4.ｘ以降では
CopyButton
を押すと
以下の中身が 反転します
それをコピーした物の中に書かれているコメントに従って
御自分のHTMLにお入れ下さい
<head> <!--■以下スタイルシートをhead内に入れてください--> <style type="text/css"> <!-- body{ overflow-y:hidden;/*■body内の縦スクロールバーを消す指定*/ padding-right :50px;/*■この数値で縦スクロールバーまでの右からの位置が決まります*/ font-size : 14px;/*■body内の文字の大きさ*/ color : #008820;/*■body内の文字の色*/ font-family : "Verdana";/*■body内の文字の書体*/ } .table{/*■ここからテーブルのバーの設定*/ overflow-y:scroll;/*■必ずこれを入れる*/ width:100%; height:90%; scrollbar-arrow-color : #0000ff;/*■バーの一番上と下の▲の部分の色 好きに変えてね*/ scrollbar-base-color : #ffffff; scrollbar-face-color : #f0f8ff;/*■バー本体の基本となる色 好きに変えてね*/ scrollbar-highlight-color : #0000ff;/*■あとは適宜色々変えてどこがどうなるか自分で確かめて*/ scrollbar-shadow-color : #0000ff; scrollbar-3dlight-color : #ffffff; scrollbar-darkshadow-color : #ffffff; scrollbar-track-color : #f8f8ff;/*■バーの下色？の部分の色*/ } td{/*■ここからテーブル内の文字の設定*/ font-size:14px;/*■テーブル内の文字の大きさ*/ color : #666666;/*■テーブル内の文字の色*/ font-family : "Verdana";/*■テーブル内の文字の書体*/ text-align : left;/*■テーブル内の文字を左寄せで合わせたい時*/ } --> </style> </head> <!--■ここまでhead内に入れて下さい--> <body> この部分に好きなことを書いても問題ありません <br>*************好きなことを書いて************* <br>*************好きなことを書いて************* <br>*************好きなことを書いて************* <br>*************好きなことを書いて************* <br> <!--■ここから先 body内に入れてください--> <table border="0" cellpadding="0" cellspacing="2" width="100%" height="100%"> <tr><td> <div class="table"><br> <!--■ここまで必ず入れる--> <center><table border=0 width="60%" height="80%"><tr><td align="center"> <!--■テーブルのwidthとheightの数値は適宜変えてみて下さい スクロールの状態が変わります--> <br> <br><br><br>---ここから下に御自分のページ内容を書いてね--- <br><br> ソースを開いて■から書かれてるコメントに従って <br>内容を御自分の物に書き換えて下さい<br><br> <br> ページ本体の縦スクロールバーは消してありますが <br>横スクロールバーは消してありません<br><br> 横があふれた場合はページの横スクロールバーが出ます<br><br> ページの横スクロールバーを消すことも出来ます<br><br> ページの横スクロールバーを消す時は スタイルシートのbody部分に<br> <font color="#000088">overflow-x:hidden;</font> と記入します <br>縦横両方消す場合は <font color="#000088">overflow:hidden;</font> と記入します <br><br><br><br><br><br> Script使用の際は以下リンクをお入れくださいね<br> <a href="http://myako.net/" target="_top"> Script by ako's cyberpage</a> <br><br><br><br><br><br> <br><br><br><br><br><br> <!--■以下必ず最後に閉じてください--> </td> </tr> </table> </center> </div><!--■divを閉じたこの時点でスクロールバーは終わります 途中で閉じると途中までしかスクロールしないので注意--> </td> </tr> </table>
ako's cyberpage