スクロールバーのアロー(三角部分)が欠けてしまいます

[新着] Webテンプレートを仮オープンしました



0   名前: ゆずき : 2007/09/05(水) 22:08  [URL]  ID:mzP6Nl1z sub-bK
初めまして。
私は現在ホームページを作成しようとしているわけではありませんが、
いつかは挑戦してみたいと思い、少しずつHTMLの基礎やタグを勉強しています。

インターネットで様々なサイトを巡っていてどうしても気になったことがあったので、
こちらの掲示板で質問させていただくことにしました。
スクロールバーについて、詳細はタイトル通りです。

上に張ってあるものと同じですが、
とりあえずこちらを見てください。
http://sundaymorning.konjiki.jp/test.html
全画面で表示すると、上下のスクロールアローが少し欠けています。
画面を小さくすると(スクロールされるようになると)、アローはきちんと表示されます。
これはどうしてなのでしょうか。

なお、上記のサンプルページは実際にそうなっていたサイトの
ソースをそのままにしています。(内容は削除しています)

文法のチェックでは、重要なエラーはありませんでした。
Googleやこちらの過去ログで「スクロールアロー」「消える」「欠ける」
などの言葉で検索してみましたが、答えとなるものは見つかりませんでした。

もしかしたらHTMLだけの問題ではないかもしれないと思ったので、
総合質問板にさせていただきました。
長々とすみません。
検索の言葉が適当ではなかったら、それだけでも教えていただけると嬉しいです。

1   名前: 匿名 : 2007/09/05(水) 22:08  ID:epW2eUw6 sub-8t
重なっている部分がそう見えているだけかと思いますが、とりあえず。
scrollbar-highlight-color: #f7f7f7;

2   名前: はるまき : 2007/09/05(水) 22:08  ID:JO5iugWN sub-H8
サンプルの様にスクロールバーを平面で表現したい場合は、
以下のようにすると期待通りになると思います。
body {
scrollbar-arrow-color: #000000;
scrollbar-face-color: #f7f7f7;
scrollbar-highlight-color: #f7f7f7;
scrollbar-3dlight-color: #990000;
scrollbar-shadow-color: #990000;
scrollbar-track-color: #f7f7f7;
scrollbar-darkshadow-color: #f7f7f7;
}

スクロールバーが、
アクティブ:指定した色の矢印
ノンアクティブ:矢印が抜け落ちた後の「くぼみ」として立体的に表現されている?

>>1で指摘されている通り、
ノンアクティブ時の矢印右下は、
scrollbar-highlight-colorで指定した色と同色で表現されるようです。

3   名前: ゆずき : 2007/09/05(水) 22:08  ID:mzP6Nl1z sub-bK
返信が遅くなり、申し訳ありません。
>>1さん、はるまきさん、お返事ありがとうございます。

>>1さんのご回答に加えはるまきさんの解説もいただいて、
疑問を解決することができました。
特に、
> ノンアクティブ時の矢印右下は、
> scrollbar-highlight-colorで指定した色と同色で表現されるようです。
このことを知らなかったのでとても参考になりました。
今度は、CSSについてもさらに勉強していきたいと思います。

お二方に、厚い感謝を申し上げます。
本当にありがとうございました!

一覧へ戻る