CSS3: outline-color プロパティ - 輪郭の色

■ 概要

項　　目説　　明
記述形式 セレクタ {outline-color: 色 }
値 の形式 invert | #rrggbb （RGB16進） | 色の名前
初 期 値 invert
対応ブラウザー C2+ / e8+ / N?+ / Fx1.5+ / Op7+ / Ch1+ / Sa1.2+
適用可能な要素 すべての要素
継　　承 しない

■ 解説

outline-colorプロパティ は，要素の輪郭の色を指定します。

outlineプロパティ で指定する輪郭は，border プロパティ で指定する境界とは，次のような点で異なります。

  1. 隣接要素との間に新たにスペースを確保しません。　つまり，境界外の隣接要素内などに表示されます。
  2. 形は長方形に限定されません。

輪郭が表示される場所に別の要素の内容や境界線が表示されている場合は， 輪郭で上書きされますのでレイアウトや輪郭のスタイルに注意が必要です。

要素の色を設定するプロパティとしては，ほかに color（文字や前景の色）， background-color（背景色）， border-color（境界色） の３つがあります。　

"invert" と指定した場合には，地の色を反転させた色が輪郭の色となります。

それ以外の色の指定方法は，colorプロパティと同じで，"#" の後に R（赤），G（緑），B（青）の光の３原色をそれぞれ２桁の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進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。

■ 使用例（ outline-color プロパティの利用）

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>問１：<input type="text" class="sample" id="ans1"></div><br>
<div>問２：<input type="text" class="sample" id="ans2"></div><br>
<div>問３：<input type="text" class="sample" id="ans3"></div>

ブラウザー 表示例
問１：

問２：

問３：

上の例では，フォーカスのある input要素 に対して輪郭が表示されます。

輪郭の表示される場所は， input要素 の境界外の親要素（div要素）や，さらに，その隣接要素などです。 （輪郭をもっと太くするとさらによくわかります。）　

■ 備考

【参考ページ】