項 目 | 説 明 |
---|---|
記述形式 | セレクタ {outline-color: 色 } |
値 の形式 | invert | #rrggbb (RGB16進) | 色の名前 |
初 期 値 | invert |
対応ブラウザー | C2+ / e8+ / N?+ / Fx1.5+ / Op7+ / Ch1+ / Sa1.2+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
outline-colorプロパティ は,要素の輪郭の色を指定します。
outlineプロパティ で指定する輪郭は,border プロパティ で指定する境界とは,次のような点で異なります。
輪郭が表示される場所に別の要素の内容や境界線が表示されている場合は, 輪郭で上書きされますのでレイアウトや輪郭のスタイルに注意が必要です。
要素の色を設定するプロパティとしては,ほかに color(文字や前景の色), background-color(背景色), border-color(境界色) の3つがあります。
"invert" と指定した場合には,地の色を反転させた色が輪郭の色となります。
それ以外の色の指定方法は,colorプロパティと同じで,"#" の後に R(赤),G(緑),B(青)の光の3原色をそれぞれ2桁の16進数で表した数値を並べた #rrggbb 形式で指定する方法や色の名前で指定する方法などがあります。(「色の値」を参照。)
以下に代表的な16色の #rrggbb と色の名前を示します。
#rrggbb | 色の名前 | 表 示 |
---|---|---|
#ffffff | white | |
#c0c0c0 | silver | |
#0000ff | blue | |
#00ffff | aqua | |
#00ff00 | lime | |
#ffff00 | yellow | |
#ff0000 | red | |
#ff00ff | fuchsia | |
#808080 | gray | |
#008080 | teal | |
#000000 | black | |
#000080 | navy | |
#008000 | green | |
#808000 | blue | |
#800000 | maroon | |
#800080 | purple |
なお、色の名前の一覧は原色大辞典のブラウザで名前が定義されている140色の色名,RGB の 16進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- input.sample:focus { outline-width: 3px; outline-style: solid; outline-color: #ddff88; } --> </style> <script type="text/javascript"> window.onload = function() { document.getElementById('ans1').focus(); } </script> |
HTML <body> ~ </body> |
<div>問1:<input type="text" class="sample" id="ans1"></div><br> <div>問2:<input type="text" class="sample" id="ans2"></div><br> <div>問3:<input type="text" class="sample" id="ans3"></div> |
ブラウザー 表示例 |
---|
問1: 問2: 問3: |
上の例では,フォーカスのある input要素 に対して輪郭が表示されます。
輪郭の表示される場所は, input要素 の境界外の親要素(div要素)や,さらに,その隣接要素などです。 (輪郭をもっと太くするとさらによくわかります。)