CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのoutline-colorプロパティの使い方と指定方法

outline-colorプロパティとは

CSSのoutline-colorプロパティを使用すると、要素のアウトライン（輪郭線）の色を指定することができます。値の指定方法は、colorプロパティやborder-colorプロパティと同様で、色名・16進数カラーコード・RGB値のいずれかを使用します。

なお、アウトラインを実際に表示するには、outline-width（太さ）とoutline-style（スタイル）も併せて指定する必要があります。outline-styleが指定されていない場合、アウトライン自体が表示されないので注意しましょう。

指定できる主な値

  • 色名： red、blue、green などのキーワード
  • 16進数カラーコード： #0000ff など
  • RGB値： rgb(0, 0, 255) など
  • invert： 背景色に応じて自動的に反転した色（多くのブラウザでの初期値）

使用例

以下のコードを実行して、outline-colorプロパティの動作を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width:thin; outline-style:solid; outline-color:blue">
         このテキストには、細い青色の実線アウトラインが表示されています。
      </p>
      <br />
   </body>
</html>

この例では、段落に対して「細い（thin）」「実線（solid）」「青色（blue）」のアウトラインを一括して指定しています。ブラウザで表示すると、テキストの周囲に青い輪郭線が描画されます。

まとめ

outline-colorプロパティを使えば、アウトラインの色を自由にカスタマイズできます。フォーム入力欄のフォーカス時の強調表示など、ユーザビリティの向上にも役立つプロパティなので、outline-widthやoutline-styleと組み合わせてぜひ活用してください。

  1. CSSのborder-colorとoutline-color：境界線と輪郭の色設定をマスターする

    CSSでは、要素の境界線（ボーダー）の色と輪郭（アウトライン）の色を個別に定義できます。ボーダーと異なり、アウトラインはレイアウト上のスペースを一切占有しないという特徴があります。border-colorプロパティは要素のボーダーの色を設定するために使用し、outline-colorプロパティはアウトラインの色を設定するために使用します。 構文 CSSのborder-colorプロパティおよびoutline-colorプロパティの構文は以下のとおりです。 /*border-colorの設定*/ セレクタ { border-color: /*値*/ } /*outline-colorの設

  2. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp