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
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;
}

結果

仕様書

ブラウザーの互換性

BCD tables only load in the browser

関連情報