CSS【 outline 】 ~ アウトライン

Art Create Draft Imagine Layout Outline Graphic Concept

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プロパティと共通していますが、次の3つの違いがあります。

●outlineプロパティは表示のためのスペースをとらない
●outlineプロパティには上下左右の区別がない
●CSS3から追加されたoutline-offsetプロパティ

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プロパティの指定があるものです。
マウスオーバーしてみて下さい。

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です