|
 |
|
スクロールバーの色を変更する
サンプルと機能
スクロールバーの色を変更します。
→ Sample 1：立体のないスクロールバー
→ Sample 2：立体のあるスクロールバー
→ Sample 3：少し変わったスクロールバー
→ Sample 4：通常のスクロールバー
サンプル・ソース
緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ Sample 1：基本色の変更
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
BODY
{
scrollbar-base-color: #ff0000; /* ベースカラー */
}
-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML> |
→ Sample：細かく指定
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
BODY
{
scrollbar-face-color: #ff00ff; /* 表面の色 */
scrollbar-3dlight-color: #ffcccc; /* 左端と上端の色 */
scrollbar-darkshadow-color: #660000; /* 右端と下端 */
scrollbar-highlight-color: #ffff00; /* ハイライトの色 */
scrollbar-shadow-color: #333333;
/* 影の色 */
scrollbar-arrow-color: #ffffff; /* 矢印の色 */
scrollbar-track-color: #ff00ff; /* バーの背景の色 */
}
-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML> |
解説・注意点など
スクロールバーは、以下のように設定することができます。
 |
 |
 |
 |
 |
 |
 |
| デフォルト |
scrollbar-
face
-color |
scrollbar-
3dlight
-color |
scrollbar-
highlight
-color |
scrollbar-
shadow
-color |
scrollbar-
darkshadow
-color |
scrollbar-
arrow
-color |
バーの背景の色は、scrollbar-track-colorで指定することができますが、
指定しなかった場合は、図のように"scrollbar-face-color"と
"scrollbar-highlight-color"が交互に並びます。
参考
・スタイルシートサンプル（基本色を指定）
・スタイルシートサンプル（細かく指定）
← Webデザインテクニックに戻る
|
|
|
