☆ スクロールバー ☆




スクロールバーを可愛い色に変えてみよう！

このタグを<HEAD> と </HEAD>の間に入れるとカラフルなスクロールバーに変るよ！

スクロールバーの背面の色は、背景色に合わせるのがスマート Y


カラフル
ガ ラ ス
　ミルキー
のっぺり
個性的


カラフルなスクロールバーたち





ガラスみたいなスクロールバーたち




ミルキーテイストなスクロールバーたち




のっぺりしてるスクロールバーたち




個性的なスクロールバーたち






スクロールバーを表示させたくない時は<BODY>に このタグを追加

scroll="no"

<BODY scroll="no">

横スクロールバーのみを表示させたくない時は<HEAD>〜</HEAD>に このタグを追加

<STYLE type="text/css"><!--body{ overflow-x:hidden; }--></STYLE>


縦スクロールバーのみを表示させたくない時は<HEAD>〜</HEAD>に このタグを追加

<STYLE type="text/css"><!--body{ overflow-y:hidden; }--></STYLE>



*・・・・・***・・・・・* *・・・・・***・・・・・* *・・・・・***・・・・・* *・・・・・***・・・・・*



枠内にスクロールバーを入れるには､枠内に このタグを追加♪

幅と高さ（ width　 height ）は､『枠内にスクロールバーを入れるタグ』で指定するので､枠自体には幅や高さを指定しないでください。
『可愛い枠』を利用する場合は､枠の幅と枠の高さを削除してお使いください。
枠内の余白を指定すると､スクロールバーも奥に入った感じになります。


<DIV border="0" style="width: 200px; height: 100px; overflow-y: scroll;
font-size:9pt; /*文字の大きさ*/
font-family:Tahoma; /*書体*/
color: #666699; /*文字色*/
scrollbar-face-color: #e6dfff; /*スクロールバー本体の色*/
scrollbar-highlight-color: #d8d8eb; /*スクロールバー左側（上）の影*/
scrollbar-shadow-color: #d8d8eb; /*スクロールバー右側（上）の影*/
scrollbar-3dlight-color: #ffffff; /*スクロールバーの左側（下）の影*/
scrollbar-arrow-color: #ffffff; /*矢印の色*/
scrollbar-track-color: #ffffff; /*背面の色*/
scrollbar-darkshadow-color: #ffffff;/*スクロールバー右側（下）の影*/
">ここに文章</DIV>


ひとえの枠内にスクロールバーを入れました。


<!--* Various Colors * ひとえの枠+スクロールバー ここから-->
<TABLE bgcolor="#eae7ef" cellpadding="1">
<TBODY>
<TR>
<TD bgcolor="#fafafc"><DIV border="0" style="width: 200px; height: 100px; overflow-y: scroll;
font-size:9pt; /*文字の大きさ*/
font-family:Tahoma; /*書体*/
color: #666699; /*文字色*/
scrollbar-face-color: #e6dfff; /*スクロールバー本体の色*/
scrollbar-highlight-color: #d8d8eb; /*スクロールバー左側（上）の影*/
scrollbar-shadow-color: #d8d8eb; /*スクロールバー右側（上）の影*/
scrollbar-3dlight-color: #fafafc; /*スクロールバーの左側（下）の影*/
scrollbar-arrow-color: #fafafc; /*矢印の色*/
scrollbar-track-color: #fafafc; /*背面の色*/
scrollbar-darkshadow-color: #fafafc;/*スクロールバー右側（下）の影*/
">ここに文章</DIV></TD>
</TR>
</TBODY>
</TABLE>
<!--ひとえの枠+スクロールバー ここまで-->


ふたえの枠内にスクロールバーを入れました。


<!--* Various Colors * ふたえの枠+スクロールバー ここから-->
<!--この下、border=枠線の太さ bordercolor=枠の色 cellpadding=枠内の余白 cellspacing=枠線と枠線の間隔 bgcolor=枠内部の色-->
<TABLE border="5" bordercolor="#eae7ef" cellspacing="3" bgcolor="#ffffff">
<TBODY>
<TR>
<TD><DIV border="0" style="width: 200px; height: 100px; overflow-y: scroll;
font-size:9pt; /*文字の大きさ*/
font-family:Tahoma; /*書体*/
color: #666699; /*文字色*/
scrollbar-face-color: #e6dfff; /*スクロールバー本体の色*/
scrollbar-highlight-color: #d8d8eb; /*スクロールバー左側（上）の影*/
scrollbar-shadow-color: #d8d8eb; /*スクロールバー右側（上）の影*/
scrollbar-3dlight-color: #ffffff; /*スクロールバーの左側（下）の影*/
scrollbar-arrow-color: #ffffff; /*矢印の色*/
scrollbar-track-color: #ffffff; /*背面の色*/
scrollbar-darkshadow-color: #ffffff;/*スクロールバー右側（下）の影*/
">ここに文章</DIV></TD>
</TR>
</TBODY>
</TABLE>
<!--ふたえの枠+スクロールバー ここまで-->


おしゃれな点線の枠内にスクロールバーを入れました。


<!--* Various Colors * おしゃれな点線の枠+スクロールバー ここから-->
<!--この下、bgcolor=縁取りの色 cellpadding=縁取りと点線の間の幅 cellspacing=縁取りの太さ-->
<TABLE bgcolor="#e0c4b0" cellpadding="3" cellspacing="1">
<TBODY>
<TR>
<!--この下、bgcolor=縁取りと点線の間の色-->
<TD bgcolor="#f8f1e7">
<!--この下、border-color=点線の色 border-width=点線の太さ cellpadding=枠内の余白 bgcolor=枠内部の色-->
<TABLE style="border-color:#e0c4b0;border-style:dashed;border-width:1px" cellpadding="1" bgcolor="#fffff8">
<TBODY>
<TR>
<TD>
<DIV border="0" style="width: 200px; height: 100px; overflow-y: scroll;
font-size:8pt; /*文字の大きさ*/
font-family:Tahoma; /*書体*/
color: #b8a8a0; /*文字色*/
scrollbar-face-color: #fffff8; /*スクロールバー本体の色*/
scrollbar-highlight-color: #fffff8; /*スクロールバー左側（上）の影*/
scrollbar-shadow-color: #fffff8; /*スクロールバー右側（上）の影*/
scrollbar-3dlight-color: #fffff8; /*スクロールバーの左側（下）の影*/
scrollbar-arrow-color: #e0c4b0; /*矢印の色*/
scrollbar-track-color: #fffff8; /*背面の色*/
scrollbar-darkshadow-color: #fffff8;/*スクロールバー右側（下）の影*/
">ここに文章</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<!--おしゃれな点線の枠+スクロールバー ここまで-->





Copyright (C) 2001-2014. Various Colors. All rights reserved.