CSS ラインカラー

CSS ラインカラー

outline-color 属性は輪郭の色を設定するために使用されます。

以下の方法で色を設定できます：

  • name - カラ名を指定します、例えば "red"
  • HEX - 十六進値を指定します、例えば "#ff0000"
  • RGB - RGB 値を指定します、例えば "rgb(255,0,0)"
  • 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;
}

自分で試してみる

HEX 値

また、十六進値（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%); /* 紅色 */
}

自分で試してみる

私たちの CSS カラー の章で、HEX、RGB、HSL値に関する知識をさらに学ぶことができます。

色を反転させる

次の例では、 outline-color: invert、色の反転が実行されました。これにより、色の背景に関係なく、アウトラインが常に見えるようになります：

色を反転させた実線のアウトライン。

例

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

自分で試してみる