https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

スクロールバーの色を指定する(IE)

{scrollbar-xxx-color:色;}でページのスクロールバーの色を指定する事ができます。 下の表のブラウザ表示のボタンを押してこのページの画面のスクロールバーの 色を確認して下さい。

■ スクロールバーの部位

スクロールバーの色を指定したい部分の種類は以下の通りです。

色を指定したい部分 説明 ブラウザ表示 解除
face スクロールバーと矢印部分の表面の色を指定します。
track スクロールバーの背面(レール)の色を指定します。
arrow スクロールバーの上下の矢印の色を指定します。
highlight スクロールバーと矢印部分の上辺と左辺の内側の色を指定します。
shadow スクロールバーと矢印部分の右辺と底辺の内側の色を指定します。
3dlight スクロールバーと矢印部分の上辺と左辺の外側の色を指定します。
darkshadow スクロールバーと矢印部分の右辺と底辺の外側の色を指定します。
base スクロールバーの全体の色を指定します。

外部ファイル

body{
scrollbar-face-color:black;
scrollbar-track-color:white;
scrollbar-arrow-color:white;
scrollbar-highlight-color:black;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:black;
scrollbar-darkshadow-color:black;
}

テキストエリアやボックスなどのスクロールバーの色も 上記と同様の指定で指定することが出来ます。

【ブラウザ表示】

ボックスの
スクロールバー
の色が
変わって
いま
す。 ボックスの横方向のスクロールバーの色が変わっています。


ソース

<form>
<textarea name="area" rows="4" cols="30" class="scroll">
テキストエリアの
スクロールバーの色が
変わっています。
</textarea>
</form>
<p class="scroll">
ボックスの<br>スクロールバー<br>の色が<br>変わって<br>いま<br>す。
<nobr>ボックスの横方向のスクロールバーの色が変わっています。</nobr>
</p>

外部ファイル

.scroll{
scrollbar-face-color:skyblue;
scrollbar-track-color:khaki;
scrollbar-arrow-color:yellow;
scrollbar-highlight-color:orange;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:green;
scrollbar-darkshadow-color:pink;
}

■ 一部のスクロールバーの色を無効にする

外部ファイルまたは、テキストエリアやボックスが複数あるページでbody要素にスクロールバーの色を指定すると ページ(画面)の右側のスクロールバーの色だけではなくテキストエリアやボックスのスクロールバーの色まで全て 変わってしまいます。
そこでテキストエリアやボックスのスクロールバーの色だけ反映させないようにする ために{scrollbar-xxx-color:transparent;} を指定します。
外部ファイル

body{
scrollbar-face-color:skyblue;
scrollbar-track-color:khaki;
scrollbar-arrow-color:yellow;
scrollbar-highlight-color:orange;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:green;
scrollbar-darkshadow-color:pink;
}
textarea,p,div{
scrollbar-face-color:transparent;
scrollbar-track-color:transparent;
scrollbar-arrow-color:transparent;
scrollbar-highlight-color:transparent;
scrollbar-shadow-color:transparent;
scrollbar-3dlight-color:transparent;
scrollbar-darkshadow-color:transparent;
}

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

ページに背景色や壁紙を指定する
背景画像を固定する
背景画像の表示方法を指定する
背景画像の表示位置を指定する
マウスカーソルの形を変える
ページ内の余白を指定する

スタイルシート一覧のページに戻る