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

CSSのoutline-colorプロパティでアウトラインの色を設定する方法

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

outline-colorプロパティの主な指定方法

  • カラーネーム：例）blue、red、green
  • 16進数カラーコード：例）#0000ff
  • RGB値：例）rgb(0, 0, 255)

なお、アウトラインを表示するには、outline-colorだけでなくoutline-width（太さ）とoutline-style（スタイル）も一緒に設定する必要があります。outline-styleが未指定の場合、初期値がnoneのためアウトラインは表示されないので注意しましょう。

サンプルコード

以下のコードを実行すると、outline-colorプロパティの動作を確認できます。この例では、細い実線の青色アウトラインを段落に適用しています。

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

まとめ

outline-colorプロパティは、ボーダーと異なりレイアウトに影響を与えず、要素の外側に描画されるため、フォーカス表示やハイライトなどに便利です。最近では、outline-width・outline-style・outline-colorを一括で指定できるoutlineショートハンドプロパティを使うと、コードをより簡潔に記述できます。

  1. CSSでタブ文字の幅を設定する方法｜tab-sizeプロパティの使い方を解説

    CSSでタブ文字（タブキーで挿入される空白）の表示幅を変更したい場合は、tab-size プロパティを使用します。デフォルトではタブ幅は8文字分に設定されていますが、このプロパティを使うことで任意のスペース数に調整できます。tab-sizeプロパティの基本tab-sizeプロパティは、主に <pre> や <code> など、整形済みテキストを表示する要素に対して効果を発揮します。指定できる値は以下のとおりです。数値： タブ1つあたりの幅をスペースの文字数で指定します（例： tab-size: 12;）length値： pxやemなどの単位で幅を指定することも可能ですi

  2. CSSのoutlineショートハンドプロパティとは？構文と使い方を実例付きで解説

    CSS outlineショートハンドプロパティとは？ outlineショートハンドプロパティを使うと、要素の境界線の外側に、スタイル（必須）・太さ・色を指定した線をまとめて定義できます。borderプロパティとは異なり、outlineは要素の寸法（幅や高さ）に含まれないため、レイアウトに影響を与えずに輪郭線を表示できるのが大きな特徴です。 構文 CSS outlineショートハンドプロパティの構文は次のとおりです。 Selector {    outline: /*値*/ } 指定できる値 outline-width：線の太さ（thin / medium / thic