CSSのアウトラインの色

CSSのアウトライン幅 CSS アウトラインの短縮形

CSS アウトラインの色

outline-color 属性は、アウトラインの色を設定するために使用されます。

色は次の方法で設定できます:

  • name - 色の名前を指定します (例: 「red」)。
  • HEX - 「#ff0000」などの 16 進数値を指定します
  • RGB - 「rgb(255,0,0)」などの RGB 値を指定します。
  • HSL - HSL 値を指定します（例：「hsl(0, 100%, 50%)」）
  • invert - 色の反転を実行します (背景の色に関係なく輪郭が見えるようにします)

以下の例は、さまざまな色でいくつかの異なるアウトライン スタイルを示しています。 これらの要素には、アウトラインの内側にも細い黒い境界線があることに注意してください。

赤の実線のアウトライン。

青い点線のアウトライン。

グレーの凸型アウトライン。

例

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

自分で試してみてください

16 進数の値

16 進数値 (HEX) を使用して輪郭の色を指定することもできます。

例

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* 赤 */
}

自分で試してみてください

RGB 値

または、RGB 値を使用します:

例

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 赤 */
}

自分で試してみてください

HSL 値

HSL 値を使用することもできます。

例

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* 赤 */
}

自分で試してみてください

HEX、RGB、HSL 値の詳細については、「CSS カラー」の章をご覧ください。

色を反転

次の例では、outline-color: invert を使用して色の反転を実行します。 これにより、背景の色に関係なくアウトラインが確実に表示されます。

実線のアウトラインの色を反転します。

例

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

自分で試してみてください

CSSのアウトライン幅 CSS アウトラインの短縮形