CSSのoutlineの使い方と種類について解説
アウトラインは、要素の境界線の外側に描かれた線です。
この要素には、黒い境界線と幅 10px の緑のアウトラインがあります。
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- 非表示のアウトラインを定義します
次の例は、異なる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 の値によって異なります。
差し込みアウトライン。効果は、outline-color の値によって異なります。
冒頭の概要。効果は、outline-color の値によって異なります。
ノート：他のアウトライン プロパティ (次の章で詳しく説明します) は、outline-style物件が決まりました！
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。