★このページでは、IEで独自に拡張された設定について解説しています。

動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL13. IE独自拡張による設定　その1 ★ スクロールバー（IE5.5以降で有効）

　

スクロールバーの色を変えることができます。IE5.5以降で有効で、これが設定されたページのスクロールバーはXP以降であっても、ME以前の見栄えになります。<値>は色番号や色名などで指定します。（スタイルシートで使える色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。）

プロパティは以下の8つがありますが、それぞれスクロールバーのどの部分の色が変化するかはサンプルでご確認下さい。また、8つのプロパティを自由に組合わせることによって多様な表現が可能です。（CSSを実際に動作させるとブラウザによって表示が異なるため、以下の例は、CSSを使って動作させた時の表示を画像化しています。実例はこちらでご覧下さい。）

　

scrollbar-base-color: <値>; 　・・・基本色

　

scrollbar-face-color: <値>; 　・・・表面の色

　

scrollbar-arrow-color: <値>; 　・・・矢印の色

　

scrollbar-track-color: <値>; 　・・・背景色

　

scrollbar-highlight-color: <値>; 　

・・・ボタン内郭の上辺と左辺

　

scrollbar-3dlight-color: <値>; 　

・・・ボタン外郭の上辺と左辺

　

scrollbar-shadow-color: <値>; 　

・・・ボタン内郭の下辺と右辺

　

scrollbar-darkshadow-color: <値>; 　

・・・ボタン外郭の下辺と右辺

　

以上の例で、スクロールバー指定のCSSとサンプル部分のHTMLは以下のようになっています。

div { text-align: left;
width: 250px;
height: 100px;
overflow: auto; 
border-width: 2px;
border-style: inset;
padding: 10px;
scrollbar-base-color: #036;
}
※「scrollbar-base-color: #036;」の部分が、
それぞれプロパティのみ変更されています。
 <div><h2>&lt;今月の更新予定&gt;</h2>
<h3>ホームページを作ろうヨ!!</h3>
<ul>
<li>配置に関する設定</li>
<li>テーブルに関する設定</li>
</ul>
<h3>Sweets! Sweets!「いちごづくし」</h3>
<ul>
<li>イチゴのショートケーキ</li>
<li>イチゴのタルト</li>
<li>イチゴのヴァシュラン</li>
</ul>
<p>お楽しみに!!</p>
</div>

　

初級篇2.VOL12. その他の設定・その8 <<

>> 初級篇2.VOL13. IE独自拡張による設定・その2-1

　

2007.3.25.