2021-09-15

HTML・CSS: outlineの使い所 borderとの違い

CSSのoutlineプロパティは、要素のボックスに枠線を付けたい場合に使用します。

枠線を付けるだけならborderプロパティでも同じことができますが、 outlineプロパティは、要素のボックスモデルに影響を与えないのが特徴です。

例えば、リンク部分のマウスホバー時に枠線を表示したい場合、 borderプロパティを使用すると少しですがテキストがズレます。一方、ボックスモデルに影響を与えないoutlineプロパティを使うとテキストはズレません。テキストをずらさずに枠線を表示したい時に outlineプロパティを使用します。

outlineとborderの違いサンプル

次の2つのリンクは、マウスホバー時にoutlineプロパティを使って枠線を付けるリンクと、 borderプロパティを使って枠線を付けるリンクです。

リンク部分にマウスカーソルをのせてみてください。 outlineの方はテキストはズレませんが、 borderの方は若干テキストがズレるのを確認できます。

上の2つのリンクのHTMLとCSSは次の通りです。 outlineプロパティはborderと同じように指定します。

HTML

<p><a href="" class="test1">1. outlineサンプル</a></p>

<p><a href="" class="test2">2. borderサンプル</a></p>

CSS

a.test1, a.test2 {
	text-decoration: none;
}


a.test1:hover {
	outline: 1px solid red;
}

a.test2:hover {
	border: 1px solid red;
}