タグ講座
スクロールバーの透過について要望が強かったので調べてみました
通常ですとスクロールバーは背景と同じ色にすればジャマにはなりません
でも、写真の上にスクロールバーがきたりすると、どうしても↓のようになっちゃいますよね？
このようにスクロールバーの跡が
残っちゃうんですよね。。。。。。
背景が白いと目立たなくなるのですが。
上のタグです
<table border
background="http://plaza.rakuten.co.jp/img/user/76/43/30577843/362.jpg"
width="500" height="375">
<tr>
<td>
<DIV style="border:solid 1px #000000; height: 200px; width: 300px; 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: #ffffff;">
ここに文字を書く
</DIV>
</td>
</tr>
</table>
<tr>
<td>
<DIV style="border:solid 1px #000000; height: 200px; width: 300px; 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: #ffffff;">
ここに文字を書く
</DIV>
</td>
</tr>
</table>
そこで、ちょこっと細工をしてみます
特定の色を透過するタグ filter:chroma(透過する色); を付け足します
このときに注意することは 「そのページに使ってない色を透過させること」 です
ページに使ってある色で透過のタグを書きますと、 その部分まで透過されちゃいます
例えば赤い色を透過させた場合、スクロールバーだけではなく
他の赤い色を使っている部分まで透過されて見えなくなってしまいます
では実際にやってみましょう
<DIV>タグに filter:chroma(color=透過する色); を付け足して透過する色を指定します
ここで指定した色でスクロールバーを作ればいいわけです
ここでは #220022 とゆう色を透過させることにします
■ ←この色、ほとんど使ってないでしょｗ
上で書いたタグにこれを当てはめると↓のようになります
<table border
background="http://plaza.rakuten.co.jp/img/user/76/43/30577843/362.jpg"
width="500" height="375">
<tr>
<td>
<DIV style="border:solid 1px #000000; height: 200px; width: 300px; overflow: auto; scrollbar-face-color: #220022 ; scrollbar-highlight-color: #220022 ; scrollbar-shadow-color: #220022 ; scrollbar-3dlight-color: #220022 ; scrollbar-arrow-color: #000000; scrollbar-track-color: #220022 ; scrollbar-darkshadow-color: #220022 ; filter:chroma(color= #220022 ); ">
ここに文字を書く
</DIV>
</td>
</tr>
</table>
<tr>
<td>
<DIV style="border:solid 1px #000000; height: 200px; width: 300px; overflow: auto; scrollbar-face-color: #220022 ; scrollbar-highlight-color: #220022 ; scrollbar-shadow-color: #220022 ; scrollbar-3dlight-color: #220022 ; scrollbar-arrow-color: #000000; scrollbar-track-color: #220022 ; scrollbar-darkshadow-color: #220022 ; filter:chroma(color= #220022 ); ">
ここに文字を書く
</DIV>
</td>
</tr>
</table>
これを表示してみると↓のようになります
どうですか？
透過されてますよね＾＾
でも、このタグを使うと。。。。。。
スクロールホイールが使えなくなってしまうんです
マウスについているクルクル回すヤツ ＞＜。
もちろん▲▼を押せばスクロールしますが
なぜ、こうなるのかはわかりません
単に私のＰＣが古いだけなのかもしれませんが…
このタグを使う人は↑のことを承知した上でお使いください
コピペ用透過テキストエリアのタグ
<DIV style="border:solid
0px #000000; height: ○○px; width: ○○px; overflow: auto;
scrollbar-face-color: #220022
;
scrollbar-highlight-color: #220022
;
scrollbar-shadow-color: #220022
;
scrollbar-3dlight-color: #220022
;
scrollbar-arrow-color: #000000; scrollbar-track-color: #220022
; scrollbar-darkshadow-color: #220022
; filter:chroma(color= #220022
);">
ここに文字を書く
</DIV>
ここに文字を書く
</DIV>
ほとんどの人はこの色で問題ないと思いますが、これでは都合が悪いとゆう人は
タグの中の緑色の部分（７箇所）を変えてください。
ジャンル別一覧
人気のクチコミテーマ
-
-
- 【楽天ブログ公式】お買い物マラソン…
- ホッと一息💨 カップ de 飲むおだし💛
- (2026-10-06 00:00:04)
-
-
-
- たわごと
- 日差しが射す日がない、曇り、雨の日…
- (2026-10-05 09:50:15)
-
-
-
- 株主優待コレクション
- ベルパークから株主優待が届きました♪
- (2026-10-06 00:00:09)
-
© Rakuten Group, Inc.
