スタイルシートについて
スクロールバーの色を変えたい
OSがWindowsでInternet Explorer 5.5以降のブラウザのみ再現するスタイルシートですので、使ってもそんなに意味はないかも知れないです。
ちなみに、IE5.5スクロールバー色設定 のサイトを利用すると簡単です。
<style type=text/css><!--
body{
color :black;
background-color:ivory;
scrollbar-base-color:gray;
scrollbar-highlight-color:ivory;
scrollbar-arrow-color:gray;
scrollbar-face-color:ivory;
scrollbar-track-color:eeeeee;
scrollbar-shadow-color:ivory;
scrollbar-darkshadow-color:gray
}
--></style>
| color: | 文字色 |
| background-color: | 背景色 |
| scrollbar-base-color: | スクロールバーの下地色 scrollbar-highlight-colorより外側の色（左辺及び上辺） |
| scrollbar-highlight-color: | スクロールバーのハイライトカラー（左辺及び上辺） |
| scrollbar-arrow-color: | スクロールが表示されている場合の矢印色（▲や▼などの部分） |
| scrollbar-face-color: | スクロールバーの表面色 |
| scrollbar-track-color: | スクロールバーの道筋の色 |
| scrollbar-shadow-color: | スクロールバーの影の色（右辺及び下辺） 及びスクロールバーが表示されていない場合の▼や▲などの部分色 |
| scrollbar-darkshadow-color: | scrollbar-shadow-colorよりも外側の色（右辺及び下辺） |
IEとスタイルシートを分岐するには
どのブラウザでも期待通りにページを表示しようとしても、Internet Explorer独自のバグにより思い通りにいかない場合があると思います。そんなとき、IEとスタイルスタイルを分岐することで解決する方法を使うといいでしょう。
@importを利用する
Netscapeブラウザでは@importに対応していないので、それを逆に利用するという方法があります。ただし、Netscapeではすでに開発終了で、Firefoxへの移行をすすめています。
<style type="text/css"><!-- @import url (./ie.css); --></style>
スタイルシートの最初の行に宣言するというのがミソです。
@import と他の記述を組み合わせる場合は以下の例の通り。
<style>
<!--
@import url (./ie.css);
form { margin-bottom: 0; text-align:center }
ul { text-align:left; margin-bottom:0 }
-->
</style>
IEだけ通用する条件付きコメントを利用する
IEだけ適用する条件付き書式を利用することによって、IEだけ有効にして、他のブラウザをコメント扱いにすることも可能です。IE5.0以上の場合、IE専用のCSSファイル「ie.css」を読み込ませるようにするには、以下のように記述します。むしろこの方法が一番確実かもしれません。
<!--[if gte IE 5]> <link rel="stylesheet" type="text/css" href="ie.css"> <![endif]-->
このように記述することで、IEのバージョンによって分岐させたい場合などに有効ですね。
この条件付きコメントはIEでのみ有効ですので、そのほかのブラウザは単なるコメントとして扱われます。IEであったとしても、[if gte IE 5] のように、「もしIE5以上であれば」という条件を満たした場合のみ適用される、ということです。
すべて同じように表示するのは難しいものです。NetscapeやFireFox、Operaではみんな同じように表示されるのに、なぜかIEだけ・・・・という場合、とりあえず、IE以外のブラウザを基準に作成し、その後に上書きする形でIE用のCSSファイルを適用すると良いでしょう。
詳しくは、マイクロソフトのWebサイト、About Conditional Comments （英語）をご覧ください。