ITコラム

Art Create Draft Imagine Layout Outline Graphic Concept

ITコラム

2017.04.17

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.