1. ウェブ
  2. CSS
  3. リファレンス
  4. プロパティ
  5. outline-color

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

outline-color

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

試してみましょう

outline-color: red;

outline-color: #32a1ce;

outline-color: rgb(170 50 220 / 0.6);

outline-color: hsl(60 90% 50% / 0.8);

outline-color: currentColor;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    これは周囲に輪郭線があるボックスです。
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

構文

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

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

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

値

<color>

輪郭線の色であり、<color> で指定します。

仕様書では、追加の値として auto も挙げられていますが、これは現在どのブラウザーも対応していません。実装された場合、 auto は currentColor に計算されます。ただし、outline-style が auto に設定されている場合は、アクセントカラーに計算されます。

解説

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

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

アクセシビリティ

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

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

公式定義

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

形式文法

outline-color = 
  auto                  |
  <'border-top-color'>  

<border-top-color> = 
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

例

青い実線の輪郭線の設定

HTML

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

CSS

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

結果

仕様書

仕様書
CSS Basic User Interface Module Level 4
# outline-color

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告