CSS【 outline 】～アウトライン

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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プロパティだけは、単独で別途指定する必要があります。

▲目次へ戻る