Column8. 「スタイルシートと色指定」

 

HTMLでの色指定は「#RRGGBB」6桁か色名で指定しましたが(cf. 初級篇1. Vol3.知っておきたい色指定の基礎知識)、スタイルシートではこの他にもいくつか方法があります。

1.「#RGB」3桁 ・・・ 6桁で指定した時にRGB各2桁がゾロ目になっている時、RGBをそれぞれ1桁のみ記述する方法です。例えば「#00f」なら「#0000ff」と同じとして表示に反映されます。

2.rgb(a,b,c) ・・・ #RRGGBB方式は、色の三原色である赤、緑、青の値を0〜255の256段階に分けて設定し、それぞれの値を2桁の16進法で表わしたものを並べたものですが、これを本来の10進法の数値をそのまま記述して色指定とする方法です。例えば、先ほどの「#0000ff」は「rgb(0,0,255) 」となります。

3.rgb(%,%,%) ・・・ RGBの数値を%で指定することもできます。この場合は、先ほどの「rgb(0,0,255)」は「rgb(0%,0%,100%)」となります。

4.プロパティによっては「transparent(透明)」を指定できる場合もあります。これが指定された部分は透明になるので、その下にある内容や背景などが透過されて表示されることになります。

 

以上6通りの方法の他に、Windows やMacOSのシステム情報を呼び出して、システムカラーを利用する方法もあります。あまり一般的ではないようですが、色指定をする時に<値>として以下のキーワードを書き込むことによって指定できます。なお、システムカラーによる指定はユーザーの環境によって実際の表示色が異なる点に注意しましょう。

activeborder アクティブなウィンドウ枠の色
activecaption アクティブなウィンドウのタイトルバーの色
appworkspace アプリケーション内のウィンドウの背景色
background デスクトップの背景色
buttonface 立体ボタンの表面の色
buttonhighlight 立体ボタンの明るい面の色
buttonshadow 立体ボタンの暗い面の色
buttontext 立体ボタンのテキスト色
captiontext タイトルバーのテキスト色
graytext 選択できないテキストの色
highlight 選択している状態の色
highlighttext 選択しているテキストの色
inactiveborder アクティブでないウィンドウ枠の色
inactivecaption アクティブでないウィンドウのタイトルバー色
inactivecaptiontext アクティブでないウィンドウのタイトルバーのテキスト色
infobackground ツールチップの背景色
infotext ツールチップのテキスト色
menu メニューの背景色
menutext メニューのテキスト色
scrollbar スクロールバーの色
threeddarkshadow 立体的に表示される部分の暗い影の色
threedface 立体的に表示される部分の表面の色
threedhighlight 立体的に表示される部分の光のあたっている面の色
threedlightshadow 立体的に表示される部分の明るい影の色
threedshadow 立体的に表示される部分の影の色
window ウィンドウの背景色
windowframe ウィンドウのフレームの色
windowtext ウィンドウのテキスト色

 

2007.1.11.