HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● スクロールバー装飾

==IE仕様==
スクロールバーはウィンドウよりも大きなページを表示した際、 表示しきれていない部分を表示するために上下(又は左右)に画面を移動するためのものです。 またそれと同時に、今表示している部分がページ全体のどの位置にあるのかや、 そのバーの大きさからページがどの程度の大きさかを判断する材料にもなります。
最近はホイールマウスによって上下(さらには左右)の移動が手元で出来るようになりましたが、 一気に画面を送る場合にはスクロールバーを利用する方が便利だったりします。
そんな便利な機能を有したスクロールバーはサイトの一部といえるでしょう。
Internet Explorerだけの機能ですが、 ウィンドウ等の右側や下部に表示されるスクロールバーの色を設定できます。

スクロールバーの装飾はスタイルシートによって行なえます。
スクロールバーが表示される要素に下に一覧するスタイルを設定します。
下の場合はTEXTAREA要素に設定しています。

ウィンドウのスクロールバーの装飾はBODY要素に行ないます。
<BODY style="プロパティ:値(カラー番号)">のように記述します。
値で使用するカラー番号は、 色名色番号を参考にしてください。
実際に下のフォームで試せます。

スクロールバーを装飾するプロパティ

scrollbar-face-color:カラー番号

scrollbar-base-color:カラー番号

scrollbar-track-color:カラー番号

scrollbar-highlight-color:カラー番号

scrollbar-shadow-color:カラー番号

scrollbar-3dlight-color:カラー番号

scrollbar-darkshadow-color:カラー番号

scrollbar-arrow-color:カラー番号

背面の設定色に色が重ねられていくようです。
つまり、scrollbar-base-colorのみを設定すると、スクロールバーはすべてその色になります。 そこに、scrollbar-face-colorを設定すると表面部分をその色で重ね塗りしたようになります。

スクロールバーの表示/非表示(IE仕様)

『scroll』属性によってウィンドウに表示されるスクロールバーの表示と非表示を設定できます。 属性値は『yes』『no』『auto』の三種類でそれぞれ、表示、非表示、自動となります。
<BODY scroll="no"> でウィンドウのスクロールバーを非表示に出来ます。


==スクロールバーを装飾してみよう==

上の説明を参考にスタイルを記述し『反映』をクリックすると、記述したスタイルが反映されたページが表示されます。 カラーは『#000000』や『RGB(0,0,0)』のように記述します。
複数のスタイルを記述するときには末尾に必ず『;』を記入して、区切ります。
※IE6.0の使用だとBODY要素へのスタイル設定はBODYタグ内に存在するスクロールバー(下のTEXTAREA等)へ適用されます。 ウィンドウのスクロールバーはHTML要素にスタイル設定しなくてはなりません。 なお、記述されている設定は上のテキストエリアに記述されている物と同じです。不要なら消して新しく書き直して下さい。

<STYLE type=text/css>
<!--
HTML,BODY{
   
   background-image:url('back.gif') ; line-height:1.5em ; background-attachment:fixed
   }
-->
</STYLE>

<<前へ  |上へ|  次へ>>
1234567891011121314151617

今すぐ仕事に結びつく資格&技能完全ガイド【情報満載のガイド無料進呈】

‥…━★ 通信教育80年の実績!がくぶん総合教育センター ★━…‥

TOP] [HOME

更新日時:2014/08/09