outline-color

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

輪郭線の表示方法を定義する際は、一括指定プロパティの 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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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 以上と定義されています。

• WebAIM: Color Contrast Checker
• MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

仕様書

ブラウザーの対応

関連情報

• <color> データ型
• その他の色に関するプロパティ: color, background-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, and column-rule-color
• CSS を使用した HTML の要素への色の適用