outline
outline
は CSS のプロパティで、輪郭線 (outline) に関する様々なプロパティ (outline-style
, outline-width
, outline-color
) を単一の宣言で設定するための一括指定です。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
他の一括指定プロパティと同様に、省略された値は初期値に設定されます。
境界線と輪郭線
境界線と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。
- 輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。
- 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。
構文
/* 種類 */
outline: solid;
/* 色 | 種類 */
outline: #f66 dashed;
/* 種類 | 幅 */
outline: inset thick;
/* 色 | 種類 | 幅 */
outline: green solid 3px;
/* グローバル値 */
outline: inherit;
outline: initial;
outline: unset;
outline
プロパティは以下に挙げた値のうち1~3つの値で指定します。値は順不同です。
メモ: 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が none
だからです。特筆すべき例外は input
要素で、ブラウザーが既定のスタイルを与えます。
値
<'outline-color'>
- 輪郭線の色を設定します。未指定の場合の既定値は
currentcolor
です。outline-color
を参照してください。 <'outline-style'>
- 輪郭線の種類を設定します。未指定の場合の既定値は
none
です。outline-style
を参照してください。 <'outline-width'>
- 輪郭線の太さを設定します。未指定の場合の既定値は
medium
です。outline-width
を参照してください。
形式文法
例
HTML
<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>
CSS
a {
border: 1px solid;
border-radius: 3px;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:focus {
outline: 4px dotted #e73;
outline-offset: 4px;
background: #ffa;
}
結果
アクセシビリティの考慮事項
outline
の値を 0
または none
にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Basic User Interface Module Level 3 outline の定義 |
勧告 | 変更なし。 |
CSS Level 2 (Revision 1) outline の定義 |
勧告 | 初回定義 |
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
ブラウザーの互換性
BCD tables only load in the browser