CSS【 outline 】～アウトライン

outlineプロパティは、アウトラインのスタイル、太さ、色をまとめて指定できるプロパティです。
borderプロパティと同じように要素の外枠を表示しますが、outlineプロパティは、上下左右にそれぞれ線を引くのではなく、囲み線として設置します。ボーダーよりも、簡便に囲み線を付けるイメージです。
今回は、このoutlineプロパティについてまとめたいと思います。

目次

1. outlineプロパティ
2. borderプロパティとの違い

1. outlineプロパティ

outlineプロパティは、ボックスのアウトラインをまとめて指定するショートハンドプロパティです。

アウトラインを指定するプロパティには、次のようなものがあります。

outline-style	スタイルを指定する 値：none（デフォルト値）、solid、dotted、dashed、double、groove、ridge、inset、outset
outline-color	色を指定する 値：invert（地色を反転）、currentColor デフォルト値は、ブラウザがinvertをサポートしていればinvert、サポートしていなければcurrentColor
outline-width	太さを指定する 値：medium（デフォルト値）、thin、thick、単位付きの数値
outline-offset	外側に離す距離を指定する（CSS3から追加されたプロパティ） 値：単位付きの数値（デフォルト値は0）、inherit（親を継承）
outline	アウトラインのショートハンドプロパティ 但し、outline-offsetの値はショートハンドで指定不可

　
outlineプロパティの値は、継承されません。
また、outlineプロパティは、全ての要素で使用できます。

▲目次へ戻る

　

2. borderプロパティとの違い

outlineプロパティは、要素の外枠を作るという点でborderプロパティと共通していますが、次の３つの違いがあります。

outlineプロパティは表示のためのスペースをとらない

次の入力欄は、上がoutlineプロパティ、下がborderプロパティを使って作成されたものです。
入力欄でクリックしてみて下さい。

アウトライン（上）は、クリックして外枠が表示されても、他のレイアウトに影響はありません。
ボーダー（下）は、クリックして外枠が表示されると、ボーダー領域の分だけ他に影響を及ぼします。

ソースは次の通りです。

（CSS）
div#sample input {margin:0 0 1em;}
div#sample input#s_bd:focus {border:solid 10px #31A9EE; outline:none;}

（HTML）
<div id="samle">
<input type="text" placeholder="outlineプロパティで作成した外枠"><br>
<input type="text" placeholder="borderプロパティで作成した外枠" id="s_bd">
<div>

input要素の入力欄（input type=”text”）は、クリック時やフォーカス時にデフォルトでアウトラインが付くため、ここでは特にoutlineプロパティの設定はしていません。

borderプロパティで外枠を設置すると、ボーダー領域ができるため、その分それ以降の要素の位置が変わります。
outlineプロパティで外枠を設置すると、ボーダー領域のようなスペースは生じないため、他のレイアウトに影響が出ません。
この点が、outlineプロパティの大きな特徴です。
　

outlineプロパティには上下左右の区別がない

outlineプロパティの指定方法は、スタイルも太さも色指定も、borderプロパティとほぼ同じです。
ですが、outlineプロパティには、上下左右の区別がありません。
この点も、outlineプロパティの大きな特徴です。
上下左右とも全て同じスタイル、色、太さの指定となります。
　

CSS3から追加されたoutline-offsetプロパティ

CSS3からoutline-offsetプロパティが追加されました。

outline-offsetプロパティは、アウトラインのオフセット値を指定する際に使用します。
アウトラインは、デフォルトではボーダー領域のすぐ外側に表示されますが、outline-offsetプロパティを使うと、ボーダー領域から離してオフセット表示することができます。

outline-offsetプロパティでは、ボーダー領域の端からアウトラインを離す距離を指定します。デフォルト値は0です。

次の表示は、上がoutline-offsetプロパティの指定のないもの、下がoutline-offsetプロパティの指定があるものです。
マウスオーバーしてみて下さい。

要素の領域が分かりやすいように、borderプロパティも指定しています。
ボーダーの外側にアウトラインが付くのが確認できます。
そして、outline-offsetプロパティを指定すると、他のレイアウトに影響を及ぼさずに、要素との間にスペースができます。

ソースは次の通りです。

（CSS）
div#sample p {
	margin:0 0 2em; 
	border:solid 1px #AAA;
	width:60%;
	padding:0.5em;
	outline:solid 5px #31A9EE;}
div#sample p:hover {outline-offset:3px;}
div#sample p#s_os {outline-offset:3px;}
div#sample p#s_os:hover {outline-offset:0;}

（HTML）
<div id="sample">
<p>outline-offsetなし</p>
<p id="s_os">outline-offsetあり</p>
<div>

outline-offsetプロパティは、ショートハンドプロパティのoutlineプロパティで指定することができません。
ですので、
　outline:solid 5px #31A9EE;
　outline-offset:3px;
のように、アウトラインのプロパティの中でoutline-offsetプロパティだけは、単独で別途指定する必要があります。

▲目次へ戻る