CSS アウトライン

アウトライン（outline）は、要素の境界線（ボーダー）の外側に描かれる線で、要素を「目立たせる」ために使用されます。

1. CSS アウトラインの基本 (CSS Outlines)

CSSの outline には以下のプロパティがあります：

• outline-style
• outline-color
• outline-width
• outline-offset
• outline (ショートハンド)

       注意: アウトラインはボーダー（border）とは異なります。アウトラインは要素のボーダーの外側に描画され、他のコンテンツと重なる場合があります。また、アウトラインは要素の寸法（dimensions）の一部ではありません。要素の総幅や高さは、アウトラインの幅の影響を受けません。

2. CSS アウトラインスタイル (CSS Outline Style)

outline-style プロパティは、アウトラインのスタイルを指定し、以下のいずれかの値をとることができます。

• dotted: 点線のアウトライン
• dashed: 破線のアウトライン
• solid: 実線のアウトライン
• double: 二重線のアウトライン
• groove: 3Dの溝状のアウトライン
• ridge: 3Dの山状のアウトライン
• inset: 3Dのインセットアウトライン
• outset: 3Dのアウトセットアウトライン
• none: アウトラインなし
• hidden: 非表示のアウトライン

2.1 アウトラインスタイルの実装例

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

       重要:outline-style プロパティが設定されていない限り、アウトラインは表示されません。

^{3. CSS アウトライン幅 (CSS Outline Width)}

outline-width プロパティは、アウトラインの太さを指定します。

以下のいずれかの値を設定できます：

• thin（通常は約1px）
• medium（通常は約3px）
• thick（通常は約5px）
• 特定のサイズ（px, pt, cm, em など）

3.1 アウトライン幅の例

p.ex1 {
  outline-style: solid;
  outline-width: thin;
}

p.ex2 {
  outline-style: solid;
  outline-width: medium;
}

p.ex3 {
  outline-style: solid;
  outline-width: thick;
}

p.ex4 {
  outline-style: solid;
  outline-width: 4px;
}

4. CSS アウトラインの色 (CSS Outline Color)

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

色は以下の形式で指定可能です：

• name: 「red」などのカラー名
• HEX: 「#ff0000」などの16進数値
• RGB: 「rgb(255,0,0)」などのRGB値
• HSL: 「hsl(0, 100%, 50%)」などのHSL値
• invert: 色の反転。背景色に関係なくアウトラインを視認しやすくします。

4.1 invert 値の活用

outline-color: invert; を使用すると、色の反転（inversion）が行われます。これにより、背景色がどのような色であっても、アウトラインがはっきりと見えるようになります。

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: invert; /* 背景に応じて色を反転 */
}

5. CSS アウトライン - ショートハンド

outline プロパティは、以下の個別のプロパティを設定するためのショートハンドです：

• outline-width
• outline-style（必須）
• outline-color

ショートハンド内では、上記のうち1つ、2つ、または3つの値を任意の順序で指定できます。

5.1 ショートハンドの記述例

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

6. CSS アウトラインオフセット (CSS Outline Offset)

outline-offset プロパティは、アウトラインと要素の境界（ボーダー）との間にスペースを追加します。このスペースは透明（transparent）になります。

6.1 アウトラインオフセットの例

以下の例では、ボーダーとアウトラインの間に 15px の余白を設定しています。

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px; /* ボーダーとアウトラインの間の距離 */
}

7. すべてのアウトラインプロパティ一覧