初心者のスタイルシート(CSS)講座：枠線の色を一括指定
・border-color
枠線の色を一括指定する
【枠線の色を一括指定する方法】
border-color：上下左右(数値１)
border-color：上下、左右(数値１、数値２)
border-color：上、左右、下(数値１、数値２、数値３)
border-color：上、右、下、左(数値１、数値２、数値３、数値４)
ボックス領域の上下左右の枠線の色を一括して指定します。値が１つだけの時は上下左右に同じ色が適用されます。２〜４個の値を半角スペースで区切って並べると、値の数によって適用される枠線と色の組み合わせが変化します。色は下記のどれかで指定します。
【RGB値】
・＃rrbbbb・・・#に続けて赤「r」緑「g」青「b」のそれぞれの値を00〜ffの１６進数で２桁ずつ、計６桁で指定する。
・＃rgb・・・#に続けて赤「r」緑「g」青「b」のそれぞれの値を00〜ffの１６進数で２桁ずつ、計３桁で指定する。
・rgb(数値,数値,数値) ・・・rgbに続く括弧「()」の中に続けて、赤「r」緑「g」青「b」のそれぞれの値を「,」で区切って１０進数の整数で指定する。
・rgb(数値%,数値%,数値%)・・・rgbに続く括弧「()」の中に続けて、赤「r」緑「g」青「b」のそれぞれの値を「,」で区切ってパーセントで指定する。
・キーワード・・・色名で直接指定します。大文字小文字の区別はない。また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 | ウィンドウのテキストの色 |