| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {outline-style: 値 } |
| 値 の形式 | none，hidden， solid，dashed，dotted，double，groove，ridge，inset，outset |
| 初 期 値 | none |
| 対応ブラウザー | C2+ / e8+ / N?+ / Fx1.5+ / Op7+ / Ch1+ / Sa1.2+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
outline-styleプロパティ は，輪郭のスタイルを指定します。
outlineプロパティ で指定する輪郭は，border プロパティ で指定する境界とは，次のような点で異なります。
輪郭が表示される場所に別の要素の内容や境界線が表示されている場合は， 輪郭で上書きされますのでレイアウトや輪郭のスタイルに注意が必要です。
指定する際には，次のようなキーワードが使用可能です。
| 値 | 説 明 |
|---|---|
| none | 輪郭をなしにします。 ただし，表のセルなどで隣接要素と指定が競合した場合は，他の要素の指定が優先されます。 |
| hidden | 輪郭を非表示にします。 ただし，表のセルなどで隣接要素と指定が競合した場合は，この指定が優先されます。 |
| solid | 実線を表示します。 |
| dashed | 破線を表示します。 |
| dotted | 点線を表示します。 |
| double | ２重線を表示します。 |
| groove | 溝のように立体的にへこんで見える線を表示します。 |
| ridge | 隆起して立体的に飛び出して見える線を表示します。 |
| inset | 囲まれた内部が立体的にへこんで見える線を表示します。 |
| outset | 囲まれた内部が立体的に飛び出して見える線を表示します。 |
| 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要素）や，さらに，その隣接要素などです。 （輪郭をもっと太くするとさらによくわかります。）