CSSのoutlineの使い方と種類について解説
アウトラインは、要素の境界線の外側に描かれた線です。
この要素には、黒いborderと幅10pxの緑のアウトラインがあります。
CSSの概要
アウトラインは、要素を「目立たせる」ために、境界線の外側で要素の周りに描かれる線です。
CSSには、次のアウトラインプロパティがあります。
-
outline-style -
outline-color -
outline-width -
outline-offset -
outline
注：アウトラインはborderとは異なります!アウトラインは要素の境界線の外側に描画され、他のコンテンツと重なる場合があります。また、アウトラインは要素の寸法の一部ではありません。要素の幅と高さの合計は、アウトラインの幅の影響を受けません。
CSS アウトライン スタイル
outline-styleプロパティはアウトラインのスタイルを指定し、次のいずれかの値を持つことができます:
dotted- 点線のアウトラインを定義しますdashed- 破線のアウトラインを定義しますsolid- 実線を定義しますdouble- 二重アウトラインを定義しますgroove- 3Dの溝付きアウトラインを定義しますridge- 3Dの隆起したアウトラインを定義しますinset- 3Dインセットアウトラインを定義しますoutset- 3Dアウトセットアウトラインを定義しますnone- アウトラインを定義しないhidden- 非表示のアウトラインを定義します
次の例は、異なるoutline-style値:
例
さまざまなアウトライン スタイルのデモ:
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-colorの値によって異なります。
凸型アウトライン。効果は、outline-colorの値によって異なります。
insetアウトライン。効果は、outline-colorの値によって異なります。
outsetアウトライン。効果は、outline-colorの値によって異なります。
注：outline-styleプロパティが設定されていない限り、他のアウトラインプロパティ(次の章で詳しく説明します)は、何の効果もありません！