【14】borderとよく似た outlineはレイアウトを崩さない

borderプロパティのついでに、今回は borderとよく似た outlineプロパティ について。
outlineは、borderと同じように要素の外枠を表示します。
outline の border との最大の違いは ボーダー領域ができない こと。
（なので、outlineプロパティは「ボックスモデル」じゃなくて「ユーザーインターフェイス」のプロパティなんですが、せっかくだからついでに）

これ、普段からけっこう目にしているんですよ。
例えば、リンクをクリックした時に残る点線の囲み罫が outlineプロパティのブラウザデフォルト。

クリックしてください（点線の囲み罫がoutline）

フォームの部品を触ったときに出る枠も outlineによるブラウザデフォルトのスタイルです。

本日のINDEX

1. outline はボーダー領域を作らない
2. outline は上下左右の区別無し
   1. outlineのプロパティと値の一覧
   2. CSS3で追加された outline-offset
   3. やっぱり outline-style があれば表示される
3. outline と border の組み合わせ

outline はボーダー領域を作らない

下の2つのテキスト入力欄をクリックしてみてください。

上（outline）だと外枠が出ても他のレイアウトに影響が出ません。
下（border）だと外枠が出ると要素がガクッと下がるのがわかりますね。

border だと、ボーダー領域ができるので、その分それ以降の要素もズレます。
outlineはボーダー領域を作らない（レイヤーで浮いた状態って言うのかな）。だからスペースができなくて、レイアウトに影響を及ぼしません。これが outline の特徴です。
それでクリック時や フォーカス時に使われているんですね。レイアウトを崩さないから。

上のサンプルの HTMLはこちら。

<div id="smp1_1">
<input type="text" size="20" placeholder="クリックで outline の外枠"><br>
<input type="text" size="20" placeholder="クリックで border の外枠" id="smp1_1bdr">
</div>

CSSはこちら。

div#smp1_1 input {margin:0 0 1em} /*outlineの指定をしなくてもデフォルトでoutlineが付きます*/
div#smp1_1 input#smp1bdr:focus {border:solid 10px #f9c; outline:none}

outline は上下左右の区別無し

outline の指定のしかたは、スタイルも太さも色指定も border とほぼ同じです。
ただ、border と違うのは、上下左右の区別が無いこと。全部同じスタイル・色・太さでしか指定できません。
ま、レイアウト用というより、ユーザの使い勝手のための表示用なので、上下左右を変える必要性は無いということなんでしょうね。

outlineのプロパティと値の一覧

outline のプロパティの一覧と、その値です。
上下左右の区別が無いのでプロパティも少なめ。それ以外はborderとほぼ同じような指定です。

プロパティ	概要	値
outline-style	スタイル	border-styleと同じ（hiddenは無いけど） none, solid, dotted, dashed, double, groove, ridge, inset, outset。デフォルト値はnone
outline-color	色	色の指定。invert（地色を反転） デフォルト値はブラウザが invert をサポートしていればinvert、それ以外では currentColor
outline-width	太さ	単位付きで数値。またはキーワードmedium, thin, thick（border-widthと同じ）デフォルト値はmedium
outline-offset	外側に離す距離	単位付きで数値。またはinherit（親を継承）デフォルト値は0。 CSS3から追加されたプロパティ
outline	ショートハンドプロパティ	outline-styleの値、outline-colorの値、outline-widthの値を「半角スペース」で区切ってまとめる。順不同 （outline-offset の値はショートハンドに入りません）

値の継承	なし	適用できる要素	全部

outline は borderプロパティと同じスタイル・色・太さの値なので、プレビューは【13-1】borderと borderのショートハンド でご確認ください。

CSS3で追加された outline-offset

border との違いはもう１つ。 outline-offsetプロパティがあること。
これは要素の外側に余白を取ってアウトラインを配置できます。CSS3から追加されました。

このoutline-offset は、残念ながら現時点（2015年12月）で IEで非対応なんだって。IE 11 でもダメだって。IE以外のブラウザならOK。

サンプルを見てください。マウスオーバーもしてみてください。（IE以外のブラウザで見てね）

outline-offsetなし

outline-offsetあり

サンプルでは要素の領域が分かりやすいように border も指定しています。
border の外側に outline が付くのがわかりますね。
そして、outline-offset を指定すると、レイアウトが崩れること無く、要素との間に余白ができてアウトラインが外側に広がります。

上のサンプルの HTMLはこちら。

<div id="smp2_1">
<p>outline-offsetなし</p>
<p id="smp2_1offset">outline-offsetあり</p>
</div>

CSSはこちら。

div#smp2_1 p {
	margin:0 0 2em; 
	border:solid 1px #ccc;
	width:60%;
	padding:0.5em;
	outline:solid 5px #0cc;}
div#smp2_1 p:hover {outline-offset:3px;}
div#smp2_1 p#smp2_1offset {outline-offset:3px;}
div#smp2_1 p#smp2_1offset:hover {outline-offset:0;}

outline-offset は、ショートハンドプロパティ「outline」に含ませることができません。
ですのでコイツだけは単独で追加指定することになります。

outline:solid 5px #0cc;
outline-offset:3px; /*ショートハンドに入れられないので単独で*/

やっぱり outline-style があれば表示される

borderとの違いを比較してきた outline ですが、基本はやっぱりoutline-styleプロパティ。
borderのときと同じように outline-style さえ指定してあればアウトラインが表示されます。

その場合、border のときとまったく同じで、太さはデフォルトの medium（3px）になります。
色はデフォルトが invert（地色を反転）なんですが、この invert をサポートしているブラウザはまだ少ないみたい。ブラウザが invert をサポートしてなければ border と同じく currentColor（文字色）になります。

★注意★
ブラウザが invert をサポートしていないのに、あえて outline-style: invert を指定すると、ブラウザは単なる無効値と解釈して、アウトラインが表示できないそうです。
当分わざわざ書かないほうがイイね。

サンプルです。outline-style を指定しただけでアウトラインが出現

上のサンプルの HTMLはこちら。

<p id="smp2_3">サンプルです。outline-style を指定しただけでアウトラインが出現</p>

CSSはこちら。

p#smp2_3 {
	color:green;   /*文字色をグリーンにしています*/
	outline-style: solid;   /*アウトラインのスタイルだけ指定*/
	margin:2em 0;
	text-align:center;
	line-height:3em;}

outline と border の組み合わせ

outline は border と一緒に使うことができます。border の外側に表示されます。
（フォーム関連の要素では、デフォルトのスタイルによって borderを指定するとoutlineが表示されない場合があります）

画像の枠をちょっと加工してみたり。

CSSはこちら。

img#smp3_1 {
	outline:1px solid #ddd;  /*全体をグレーの細いoutlineで囲んでいます*/
	border-top:1px solid #fff;  /*上と*/
	border-right:1px solid #fff;  /*右に borderで白い線を入れています*/
	background: #eee;  /*背景色を薄いグレーに*/
    padding:1em}  /*paddingを指定して背景色を見せています*/

この↓ように、outline-offsetを使って二重線で囲むこともできますね。

サンプルです。マウスオーバーしてください

上のサンプルの HTMLはこちら。

<p id="smp3">サンプルです。マウスオーバーしてください</p>

CSSはこちら。

p#smp3_2 {
	margin:2em 0;
	text-align:center;
	line-height:3em;
	border:solid 2px #3cf; /*borderを指定*/
	outline:solid 4px #3cf; /*outlineも指定*/
	outline-offset:3px;} /*outline-offsetですき間を空ける*/
p#smp3_2:hover {
	border-color:#ffe6e6; /*borderの色を変えてみた*/
	outline:solid 8px #ffe6e6} /*outlineの色や太さを変えてみた*/

border は border-radius で角丸にできますが、outline はまだ無理みたい。（2015年12月記）
W3Cの仕様では「Outlines may be non-rectangular.（矩形じゃなくてもいい）」って書いてあるんですけどね。（CSS Basic User Interface Module Level 3 _ #outline-props）

border-radius が効くといいな

p#smp3_3 {
	margin:1em 0;
	text-align:center;
	line-height:3em;
	border:solid 2px #ffe6e6;
	border-radius:15px;
	outline:solid 4px #ffe6e6;
	outline-offset:3px;}

moz系（Firefox）では「-moz-outline-radius」なんてのがあったんですが、もともとW3Cの非標準だったのが、とうとう削除されるそうです（参考：Firefox サイト互換性情報 ）で「outline は border-radius の形に従うべき」ということなんですがね。

次回予告

いかがでしたか？ ボーダー領域を作らない outline、けっこうレイアウトで使えそうですね。

次回からは、background関連のプロパティについて。
background はその名のとおり要素の背景を指定する、視覚的レイアウトでは不可欠なプロパティです。グレースケールのサイトでだって背景色は使うからね。
色、グラデーション、画像を指定できて、複数の画像を背景にしたり、画像とグラデーションの組み合わせもできます。