outline-color

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

構文

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

解説

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

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

アクセシビリティの考慮

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

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

公式定義

初期値	ブラウザーが対応していれば `invert`、そうでなければ `currentColor`
適用対象	すべての要素
継承	なし
計算値	キーワード `invert` の場合は、計算値も `invert`。色の場合は、半透明であれば、計算値はそれに一致する `rbga()` で、不透明であれば、それに一致する `rgb()`。キーワード `transparent` は `rgba(0,0,0,0)` に対応付けられる。
アニメーションの種類	色

形式文法

<color> | invertここで
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
ここで
<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>? )
ここで
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

例

青い実線の輪郭線の設定

HTML

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

CSS

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

結果

仕様書

仕様書	状態	備考
CSS Basic User Interface Module Level 3 outline-color の定義	勧告	変更なし。
CSS Level 2 (Revision 1) outline-color の定義	勧告	初回定義

ブラウザーの互換性

BCD tables only load in the browser