スクロールバー

スクロールバーとは

内容の分量とその表示スペースの関係であること。
即ちスペースが十分であるなら、スクロールバーは必要のないものとなり、強引に表示させれば、ただデザインを不格好にするだけである。

デザイン上の自己満足のために使うこともあるようだが、使い方によっては 「操作性」が悪化する ことすらあるので、使用には注意する必要があると思う。

スクロールバーを表示させるには そのスペース(幅と高さ)を指定 し、 はみ出す部分の処理方法 を選択することになる。
scroll を選択するとヨコスクロールバーも付くことが多い。
そのため通常は auto とする。

スクロールバーの色替え

どのブラウザにも対応できるというものではなく、Microsoft の Internet Explorer 系だけでしか再現されない。
尤も、スクロールバー-が表示されていれば、ウェブサイトであれ、ブログであれ、閲覧には差し支えがあるわけでないので、色が変わっていなくても、実用上は問題にならないから。

指定方法については「スタイルシート［CSS］/ボックス/スクロールバーの色を変える - TAG index」に詳しい。

スクロールバーの透過

自動挿入

これには「指定色を透過する」というフィルタを使うが、これも Internet Explorer 系でしかサポートされない。
勿論透過されていなくてもコンテンツの表示に変化があるわけでない。

「スタイルシート［CSS］/フィルタ/特定の色を透過する - TAG index」 に記述してあるスタイルシートを用いる。
その範囲にある特定色のすべてが対象になるので、スクロールバーの色替えの色指定については注意を要する。

例示

#frei1 {
width: 200px;
height: 100px;
overflow: auto;
scrollbar-base-color: gold;
scrollbar-face-color: gold;
scrollbar-arrow-color: red;
scrollbar-highlight-color: gold;
scrollbar-3dlight-color: gold;
scrollbar-shadow-color: gold;
scrollbar-darkshadow-color: gold;
filter: chroma(color=gold);
}

祇園精舍の鐘の声、
諸行無常の響あり。
娑羅双樹の花の色、
盛者必衰のことはりをあらはす。
おごれる人も久しからず。
唯春の夜の夢のごとし。
たけき者も遂にはほろびぬ、
偏に風の前の塵に同じ。

この場合ここではテキストしかありませんが、画像を表示していたりする時には gold で示される色は同じように透過されると言うことなのです。

close