CSS アウトライン

アウトラインは、要素の境界線の外側に描かれる線です。

CSS アウトライン

アウトラインは要素の周囲に描かれる線で、境界線の外側に描かれて要素を目立たせます。

CSSには以下のアウトラインプロパティがあります：

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

注意：アウトラインはボーダーとは異なります！ボーダーと違い、アウトラインは要素の境界線の外側に描かれ、他のコンテンツと重なることがあります。また、アウトラインは要素の寸法の一部ではありません。要素の全幅と高さにアウトラインの幅が影響することはありません。

CSS アウトラインスタイル

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

• dotted – 点線のアウトラインを定義します
• dashed – 破線のアウトラインを定義します
• solid – 実線のアウトラインを定義します
• double – 二重線のアウトラインを定義します
• groove – 3Dの凹線のアウトラインを定義します
• ridge – 3Dの凸線のアウトラインを定義します
• inset – 3Dの浮き出し線のアウトラインを定義します
• outset – 3Dの沈み込み線のアウトラインを定義します
• none – アウトラインを定義しません
• hidden – 隠れたアウトラインを定義します

例

異なるアウトラインスタイルのデモンストレーション：

p.dotted {outline-style: dotted; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.dashed {outline-style: dashed; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.solid {outline-style: solid; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.double {outline-style: double; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.groove {outline-style: groove; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.ridge {outline-style: ridge; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.inset {outline-style: inset; border: 1px solid black; outline-color: green; outline-width: 10px;}
p.outset {outline-style: outset; border: 1px solid black; outline-color: green; outline-width: 10px;}

結果：

点線のアウトライン。

破線のアウトライン。

実線のアウトライン。

二重線のアウトライン。

凹線のアウトライン。エフェクトはoutline-colorの値に依存します。

凸線のアウトライン。エフェクトはoutline-colorの値に依存します。

浮き出し線のアウトライン。エフェクトはoutline-colorの値に依存します。

沈み込み線のアウトライン。エフェクトはoutline-colorの値に依存します。

注意：次の章で詳しく学ぶ他のアウトラインプロパティは、outline-styleプロパティが設定されていない限り、いかなる影響も与えません！