超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Mozilla Color AccessUp Links SiteMap
ページ
テキスト
スクロール
ライン
イメージ
リンク
リスト
テーブル
フレーム
ボックス
フィルタ
a〜h
i〜z

 スクロールバーの色を指定する(1)
<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;>
何も指定しなければ、スクロールバーはこのページと同じ設定になります。 </div>

何も指定しなければ、スクロールバーはこのページと同じ設定になります。

<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ccc;
scrollbar-shadow-color:#ccc;
scrollbar-darkshadow-color:#ccc;
scrollbar-track-color:#fff;
scrollbar-3dlight-color:#ccc;
scrollbar-highlight-color:#ccc;">
arrow-color を黒、track-color を白、それ以外はグレイにしてみました。 </div>

arrow-color を黒、track-color を白、それ以外はグレイにしてみました。

<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-arrow-color:#000;
scrollbar-face-color:#000;
scrollbar-shadow-color:#ccc;
scrollbar-darkshadow-color:#ccc;
scrollbar-track-color:#ccc;
scrollbar-3dlight-color:#ccc;
scrollbar-highlight-color:#ccc;">
face-color を黒、それ以外はグレイにしてみました。 </div>

face-color を黒、それ以外はグレイにしてみました。

<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ccc;
scrollbar-shadow-color:#000;
scrollbar-darkshadow-color:#ccc;
scrollbar-track-color:#ccc;
scrollbar-3dlight-color:#ccc;
scrollbar-highlight-color:#ccc;">
arrow-color と shadow-color を黒、それ以外はグレイにしてみました。 </div>

arrow-color と shadow-color を黒、それ以外はグレイにしてみました。

<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ccc;
scrollbar-shadow-color:#ccc;
scrollbar-darkshadow-color:#000;
scrollbar-track-color:#ccc;
scrollbar-3dlight-color:#ccc;
scrollbar-highlight-color:#ccc;">
arrow-color と darkshadow-color を黒、それ以外はグレイにしてみました。shadow-color とは微妙に違います。押してみるとさらに違いがわかりますよ。 </div>

arrow-color と darkshadow-color を黒、それ以外はグレイにしてみました。shadow-color とは微妙に違います。押してみるとさらに違いがわかりますよ。

<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ccc;
scrollbar-shadow-color:#ccc;
scrollbar-darkshadow-color:#ccc;
scrollbar-track-color:#ccc;
scrollbar-3dlight-color:#000;
scrollbar-highlight-color:#ccc;">
arrow-color と 3dlight-color を黒、それ以外はグレイにしてみました。 </div>

arrow-color と 3dlight-color を黒、それ以外はグレイにしてみました。

<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ccc;
scrollbar-shadow-color:#ccc;
scrollbar-darkshadow-color:#ccc;
scrollbar-track-color:#ccc;
scrollbar-3dlight-color:#ccc
scrollbar-highlight-color:#000;">
arrow-color と highlight-color を黒、それ以外はグレイにしてみました。3dlight-color とは微妙に違います。 </div>

arrow-color と highlight-color を黒、それ以外はグレイにしてみました。3dlight-color とは微妙に違います。

 スクロールバーの色を指定する(2)
<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-base-color:#ccc;">
base-color を指定すれば、自動で同系色に設定してくれます。これは base-color をグレイにした場合です。
</div>

base-color を指定すれば、自動で同系色に設定してくれます。これは base-color をグレイにした場合です。
<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-base-color:#00f;">
base-color を青にするとこうなります。
</div>

base-color を青にするとこうなります。


<div style="width:250px;height:40px;border:solid 1px #ccc;overflow:auto;
scrollbar-base-color:pink;">
base-color をピンクにするとこうなります。
</div>

base-color をピンクにするとこうなります。



 Home < HTMLタグ&スタイルシート・ミニ辞典 < スクロールバー