タグ講座
テキストエリアを表示させるタグは
<DIV style="border:solid 1px #ffffff; height:○○px; width:□□px; overflow:auto;">
ここに文字
</DIV>
ですが、これにスクロールバーの項目を付け足してやることにより
テキストエリアのスクロールバーの色を変えることができます
入れる項目は
scrollbar-arrow-color:
scrollbar-3dlight-color:
scrollbar-highlight-color:
scrollbar-shadow-color:
scrollbar-face-color:
scrollbar-darkshadow-color:
scrollbar-track-color:
の７項目指定できます
これをつけるとこうなります
<DIV style="border:solid 1px #ffffff; height: ○○px; width: □□px; overflow: auto; scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #000000; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #000000; ">
ここに文字
</DIV>
これで各項目の色を指定してやればいいわけです
色の指定は "#ffffff" のように ６桁のカラーコード で指定するやり方と "white" のように 名前 で指定するやり方があり、どちらでもけっこうです
例です
カラーサンプル ピンク系
カラーサンプル ブルー系
カラーサンプル イエロー系
カラーサンプル 暖色系
カラーサンプル 寒色系
<DIV style="border:solid 1px #ffffff; height:○○px; width:□□px; overflow:auto;">
ここに文字
</DIV>
ですが、これにスクロールバーの項目を付け足してやることにより
テキストエリアのスクロールバーの色を変えることができます
入れる項目は
scrollbar-arrow-color:
scrollbar-3dlight-color:
scrollbar-highlight-color:
scrollbar-shadow-color:
scrollbar-face-color:
scrollbar-darkshadow-color:
scrollbar-track-color:
の７項目指定できます
これをつけるとこうなります
<DIV style="border:solid 1px #ffffff; height: ○○px; width: □□px; overflow: auto; scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #000000; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #000000; ">
ここに文字
</DIV>
これで各項目の色を指定してやればいいわけです
色の指定は "#ffffff" のように ６桁のカラーコード で指定するやり方と "white" のように 名前 で指定するやり方があり、どちらでもけっこうです
例です
| scrollbar-arrow-color: #00ffff; scrollbar-3dlight-color: #00ffff; scrollbar-highlight-color: #f0f8ff; scrollbar-shadow-color: #f0f8ff; scrollbar-face-color: #f0f8ff; scrollbar-darkshadow-color: #00ffff; scrollbar-track-color: #00ffff; |
scrollbar-arrow-color: #f0ffff; scrollbar-3dlight-color: #f0ffff; scrollbar-highlight-color: #f0ffff; scrollbar-shadow-color: #f0ffff; scrollbar-face-color: #00ffff; scrollbar-darkshadow-color: #f0ffff; scrollbar-track-color: #f0ffff; |
scrollbar-arrow-color: #00ffff; scrollbar-3dlight-color: #f0ffff; scrollbar-highlight-color: #00ffff; scrollbar-shadow-color: #00ffff; scrollbar-face-color: #f0ffff; scrollbar-darkshadow-color: #f0ffff; scrollbar-track-color: #f0ffff; |
| scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #c0c0c0; scrollbar-highlight-color: #c0c0c0; scrollbar-shadow-color: #ffccff; scrollbar-face-color: #ffccff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: |
scrollbar-arrow-color: #ff97ff; scrollbar-3dlight-color: #ff97ff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #ffffff; scrollbar-darkshadow-color: #ff97ff; scrollbar-track-color: #ffffff; |
scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #ffebff scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #ffebff; scrollbar-darkshadow-color: #ffebff; scrollbar-track-color: #ffebff; |
| scrollbar-arrow-color: #7b9ae7; scrollbar-3dlight-color: #c6d7ff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #c6d7ff; scrollbar-darkshadow-color: #c6d7ff; scrollbar-track-color: #ffffff; |
scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #cfd1fe; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; |
scrollbar-arrow-color: #6262ff; scrollbar-3dlight-color: #ffffff; scrollbar-highlight-color: #6262ff; scrollbar-shadow-color: #6262ff; scrollbar-face-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; |
| 矢印だけ（笑 scrollbar-arrow-color: #000000; scrollbar-3dlight-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; |
組み合わせてもいいかも scrollbar-arrow-color: #ffbbff; scrollbar-3dlight-color: #ffffff; scrollbar-highlight-color: #e0ffff; scrollbar-shadow-color: #e0ffff; scrollbar-face-color: #e0ffff; scrollbar-darkshadow-color: #ffbbff; scrollbar-track-color: #ffffff; |
scrollbar-arrow-color: #fdb86c; scrollbar-3dlight-color: #ffff00; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #ffff00; scrollbar-darkshadow-color: #fdb86c; scrollbar-track-color: #ffffe0; |
| scrollbar-arrow-color: #9900ff; scrollbar-3dlight-color: #ffffff; scrollbar-highlight-color: #9900ff; scrollbar-shadow-color: #9900ff; scrollbar-face-color: #cc99ff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; |
scrollbar-arrow-color: #339900; scrollbar-3dlight-color: #ccffcc; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #339900; scrollbar-face-color: #ccffcc; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; |
scrollbar-arrow-color: #000000; scrollbar-3dlight-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #ff99cc; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #ffffff; |
| そう言えば黒ってないね scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000; |
白に黒ってのもいいかな scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #000000; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; |
scrollbar-arrow-color: #000000; scrollbar-3dlight-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #ffaa00; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #ffffff; |
カラーサンプル ピンク系
| lavenderblush #fff0f5 |
mistyrose #ffe4e1 |
lightpink #ffb6c1 |
hotpink #ff69b4 |
deeppink #ff1493 |
fuchsia #ff00ff |
カラーサンプル ブルー系
| aliceblue #f0f8ff |
lightcyan #e0ffff |
paleturquoise #afeeee |
aqua #00ffff |
lightskyblue #87cefa |
deepskyblue #00bfff |
|---|---|---|---|---|---|
|
dodgerblue
#1e90ff |
royalblue #4169e1 |
blue #0000ff |
slateblue #6a5acd |
mediumslateblue #7b68ee |
cornflowerblue #6495ed |
カラーサンプル イエロー系
| yellow #ffff00 |
gold #ffd700 |
lemonchiffon #fffacd |
lightyellow #ffffe0 |
.......... #ffffcc |
palegoldenrod #eee8aa |
カラーサンプル 暖色系
| orange #ffa500 |
orangered #ff4500 |
............... #ff9999 |
salmon #fa8072 |
feldsper #fed0e0 |
lightsalmon #ffa07a |
カラーサンプル 寒色系
| aquamarine #7fffd4 |
lightgreen #90ee90 |
lime #00ff00 |
mediumspringgreen #00fa9a |
............... #ccffcc |
forestgreen #228b22 |
| blueviolet #8a2be2 |
............. #cc99ff |
plum #dda0dd |
mediumspringgreen #e6e6fa |
violet #ee82ee |
turquoise #40e0d0 |
© Rakuten Group, Inc.
