TECH I.S.

CSS アウトラインの色


CSS アウトラインの色

outline-colorプロパティは、アウトラインの色を設定するために使用されます。

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

  • name - 「赤」などの色の名前を指定します
  • HEX - 「#ff0000」などの 16 進数値を指定します
  • RGB - 「rgb(255,0,0)」のような RGB 値を指定します
  • HSL - 「hsl(0, 100%, 50%)」のような HSL 値を指定します
  • 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; /* red */ }

自分で試してみる »


RGB 値

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

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

自分で試してみる »


HSL値

HSL 値も使用できます。

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

自分で試してみる »

HEX、RGB、HSL 値の詳細については、CSS の色章。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細