outline-color

CSS の outline-color プロパティは、要素の輪郭線の色を設定します。

輪郭線の表示方法を定義する際は、一括指定プロパティの outline を使用したほうが普通は便利です。

輪郭線は要素の周囲、 border の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の境界線の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも（明示的に重複させない限り）重複しないように合わせます。

構文

/* <color> 値 */
outline-color: #f92525;
outline-color: rgb(30,222,121);
outline-color: blue;

/* キーワード値 */
outline-color: invert;

/* グローバル値 */
outline-color: inherit;
outline-color: initial;
outline-color: unset;

outline-color プロパティは、以下に挙げた値のうちの一つで指定します。

値

<color>
輪郭線の色で、 <color> で指定します。
invert
輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。

形式文法

<color> | invert
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

例

HTML

<p>見ての通り、輪郭線は青です。</p>

CSS

p {
  outline: 2px solid;      /* 輪郭線の幅と種類 */
  outline-color: #0000FF;  /* 輪郭線を青にする */
  margin: 5px;
}

アクセシビリティへの配慮

独自のフォーカススタイルを作成するときに、ふつう outline プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

仕様書

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3
outline-color の定義		 勧告 変更なし。
CSS Transitions
outline-color の定義		 草案 outline-color をアニメーション可能と定義した。
CSS Level 2 (Revision 1)
outline-color の定義		 勧告 初回定義。
初期値ブラウザーが対応していれば invert、そうでなければ currentColor
適用対象すべての要素
継承なし
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません！
  • interactive: DB に値が見つかりません！
計算値キーワード invert が指定されると計算値も invert。色が指定されると、半透明なら、計算値はそれに一致するrbga() で、不透明なら、それに一致する rgb()。キーワード transparent は rgba(0,0,0,0) にマップされます
アニメーションの種類色
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
outline-colorChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5
完全対応 1.5
未対応 1 — 3.6
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 8Opera 完全対応 7Safari 完全対応 1.2WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
invertChrome 未対応 なしEdge 未対応 12 — 79Firefox 未対応 1 — 3IE 完全対応 8Opera 未対応 7 — 15Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

関連トピック