説明
outline: color style width; C2- ie8-
| 値: | [ <'アウトラインの色'> || <'アウトラインのスタイル'> || <'アウトラインの太さ'> ] | inherit |
初期値：invert none medium、適用要素：すべて、継承：しない、%値：なし、メディア：ビジュアル インタラクティブ
簡略化プロパティ「outline」は、アウトラインの色、スタイル、太さを一括で指定することができます。必要な値は任意の順序で半角スペース[ ]で区切って指定します。
アウトライン
アウトラインは、フォーカス(:focus)などの疑似クラスやスクリプトと組み合わせて、フォームのボタン、フィールド、リンクなどのオブジェクトを動的に強調して見せたいときに用いるプロパティです。
アウトラインは、ボーダー辺のすぐ外側に描画されるスペースを取らない輪郭線を形成します(*1)。アウトラインは常にボックスの前面に表示され、表示、非表示の切り替えの際にも文書の再表示は行われません(*2)。線幅を有するボーダーと異なり、スペースを取らないアウトラインは、文書整形に影響を与えません。また、矩形からなるボーダーとは異なり、常に四角形であるとは限りません。たとえば、複数行にわたるインライン要素のアウトラインは、その文書全体の輪郭線からなる多角形を形成します。
アウトラインは、ボーダー辺のすぐ外側に描画されるスペースを取らない輪郭線を形成します(*1)。アウトラインは常にボックスの前面に表示され、表示、非表示の切り替えの際にも文書の再表示は行われません(*2)。線幅を有するボーダーと異なり、スペースを取らないアウトラインは、文書整形に影響を与えません。また、矩形からなるボーダーとは異なり、常に四角形であるとは限りません。たとえば、複数行にわたるインライン要素のアウトラインは、その文書全体の輪郭線からなる多角形を形成します。
たとえば、フォーカスを合わせた要素の周囲に黒の実線を、アクティブな要素の周囲に赤の実線を描画したい場合は、次のように記述します。
:focus { outline: thick solid black }
:active { outline: thick solid red }
*1 CSS2の仕様においては、「イメージマップを強調するために用いる」という記述があり、斜線を含む多角形や円形の強調をにおわしていますが、この記述は「アウトラインはボーダー辺のすぐ外側に描画される」という記述と矛盾します。
*2 CSS2仕様書において、「再表示を行うべきではない」と記述されており、「再表示を行わない」とは断言されていません。
*2 CSS2仕様書において、「再表示を行うべきではない」と記述されており、「再表示を行わない」とは断言されていません。
使用例
button {outline:orange dashed thick}
アウトラインの色 <'outline-color'> |
|
アウトラインのスタイル <'outline-style'> |
|
アウトラインの太さ <'outline-width'> |
|
