CSS outline 属性

定義と使用方法

outline（輪郭）は要素の周りに描かれる線で、境界線の外側に位置し、要素を強調する役割を果たします。

注釈：輪郭線はスペースを占めず、必ずしも四角形ではありません。

outline 簡略属性は、1つの宣言ですべての輪郭属性を設定します。

以下の順序で属性を設定できます：

設定されていない値があれば、問題は発生しません。例えば outline:solid #ff0000; も許可されています。

他にも参照してください：

CSS チュートリアル：CSS 轮廓

HTML DOM リファレンスマニュアル：outline 属性

例

4つの境界のスタイルを設定します：

p
  {
  outline:#00FF00 dotted thick;
  }

実際に試してみる

CSS 语法

outline: outline-width outline-style outline-color|initial|inherit;

属性値

値 説明
outline-color 境界の色を規定します。参照：outline-color 中の可能な値。
outline-style 境界のスタイルを規定します。参照：outline-style 中の可能な値。
outline-width 境界の幅を規定します。参照：outline-width 中の可能な値。
inherit outline属性の設定が親要素から継承されるべきであることを規定しています。

技術的詳細

デフォルト値： invert none medium
継承性： no
バージョン： CSS2
JavaScript 语法： object.style.outline="#0000FF dotted thin"

TIY 実例

要素の周りに線を描く
この例では、outline属性を使用して要素の周りに線を描く方法を示しています。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

注釈：DOCTYPEが指定されている場合、IE8はoutline属性をサポートしています。