| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {outline: 値 } |
| 値 の形式 | outline-color outline-style outline-width | inherit |
| 初 期 値 | 1.0 |
| 対応ブラウザー | C2+ / e8+ / N?+ / Fx1.5+ / Op7+ / Ch1+ / Sa1.2+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
outlineプロパティ は，輪郭のスタイル・太さ・色の一括指定 をします。
outlineプロパティ で指定する輪郭は，border プロパティ で指定する境界とは，次のような点で異なります。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| outline-color | 輪郭の色を指定します。 詳細は outline-color プロパティ を参照。 |
| outline-style | 輪郭のスタイルを指定します。 詳細は outline-style プロパティ を参照。 |
| outline-width | 輪郭の太さを指定します。 詳細は outline-width プロパティ を参照。 |
| inherit | 親要素の outlineプロパティ の値を継承します。 |
輪郭が表示される場所に別の要素の内容や境界線が表示されている場合は， 輪郭で上書きされますのでレイアウトや輪郭のスタイルに注意が必要です。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- input.sample:focus { outline: 3px solid #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要素）や，さらに，その隣接要素などです。 （輪郭をもっと太くするとさらによくわかります。）