outline

Updated / Published

outlineプロパティは輪郭線（アウトライン）の色、種類（スタイル）、幅（太さ）をまとめて設定するショートハンド（CSSにおいて値を簡略化できる記法のこと）です。まとめることができるのは輪郭線の色を指定する outline-colorプロパティ, 輪郭線の種類（スタイル）を指定する outline-styleプロパティ, 輪郭線の幅（太さ）を指定する outline-widthプロパティの3つです。

値
初期値
invert none medium
適用対象
すべての要素
継承
しない
メディア
  • visual
  • interactive

outlineプロパティが適用された要素は、輪郭線関連プロパティの値がすべて初期値にリセットされ、それから指定値が割り当て直されることになります。このため同一セレクタに個別のプロパティとショートハンドプロパティを併用する場合は、宣言ブロック内で後に記述した宣言の方が優先されるので効果の兼ね合いに注意しましょう。

輪郭線（アウトライン）とは

マウスポインタやアイコンなどを駆使する GUI環境下ではアンカーやフォームのテキスト入力欄、ボタンなどがフォーカス（選択）状態にあると周囲（ボーダー領域の外側）に輪郭線（アウトライン）を描画するものがあります。輪郭線は、CSS2 仕様より導入された outline, outline-color, outline-style, outline-width の各プロパティを用いることで、任意の要素に対して輪郭線を描画するように設定することができます。輪郭線を用いることで、目に見えるオブジェクトを際立たせ、ユーザーが情報に効率よく、簡単にアクセスするのに役立ちます。

ボーダー（枠線）との違い

輪郭線（アウトライン）とボーダー（枠線）は、各プロパティに指定できる値までほとんど同じなのですが、輪郭線とボーダーは次の点で異なります。

大きさや位置には関係しない
輪郭線は完全に描画済みのボックスの上から付け足す形でボーダー領域の外に描かれるので、ボーダーとは違い、ボックスの大きさや位置には影響を与えません。どのような輪郭線を表示させても、要素の位置がずれることがなければ、周囲に要素があってもその上から重ねて描画されるので、周囲の位置決めにも変化を及ぼしません。
矩形領域であるとは限らない
ボーダーは矩形（四角形）領域を囲みますが、輪郭線は対象ボックスのボーダーの外側にその形状に沿って縁取られるので、強制改行によって複数行になった場合など、輪郭線はすべてのボックスを含む最小の形で描画されるので、矩形にならないことがあり得ます。

outlineプロパティの値

値の指定方法は <outline-color>, <outline-style>, <outline-width> の3つの値のうち何れか一つ以上の値を、順不同に半角スペースで区切って続けて指定します。たとえば、outiline : 20px solid #f00 ; であれば、個別に outline-width : 20px ; outline-style : solid ; outline-color : #f00 ; の指定を1つにまとめたことになります。各値を並べる順序は特に決まっておらず、また必要のない指定は省略することができます。たとえば、輪郭線の種類だけを二重線にしたい場合は outline : double ; とだけ指定することができます。

outlineプロパティを適用すると輪郭線関連プロパティの値はすべて初期値にリセットされています。3つの値の中で輪郭線の幅と輪郭線の色の値が省略されていても、outline-widthプロパティの初期値は "medium" で、outline-colorプロパティの初期値は当該要素の背景色を反転させた色になる "invert" の値が適用されることになるので、輪郭線は描写されます。しかし、3つの値の中で輪郭線の種類の値が省略されていると、outline-styleプロパティの初期値は "none" なので輪郭線は描写されません。輪郭線の種類の値を省略した場合に、輪郭線を描かせるためには、必要に応じて個別の outline-styleプロパティで輪郭線の種類を指定しなすなりして上書き変更するようにしましょう。

outlineプロパティの実装状況

IE
◯：IE8よりサポート、IE6, 7は未サポート
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯
iOS
◯
Android
◯

サンプル

.sample1:focus { outline : thick double red    ; }
.sample2:focus { outline : thick inset navy    ; }
.sample3:focus { outline : thick outset yellow ; }