CSSのoutlineプロパティは、枠線の外側に表示される枠線（アウトライン）のスタイルを指定するショートハンドプロパティである。borderと似ているが、用途に違いがある。

アウトラインとは

アウトラインとは、要素の枠線（borderで指定できるやつ）の外側に用意された枠線である。borderと違い、幅を持たないため、主にアクセシビリティの向上のために用いられる。

アクセシビリティとは、障害などで視覚に難がある状態でも、コンテンツの意味を可能な限り読み取れるようにするあれこれの工夫を指す。

例えばボタンがEnterキーで押せる状態かどうかを一目で判断させるには、枠線で強調するのが手っ取り早い。しかし通常のborderは幅を持ち、下手をするとレイアウトが崩れる。box-shadowを使うのは冗長だ。専用のプロパティがあったらありがたい。outlineはそうしたときに活躍する。

borderとの違い

outlineとborerには、以下のような違いがある。

– outline border
表示位置 枠線の外側 要素の枠
各辺の個別指定 できない できる
レイアウトへの影響 ない ある
主な用途 アクセシビリティ 装飾

もちろんoutlineも装飾目的に使える。ただ、インタラクティブな要素でそれをすると、ユーザーが混乱する恐れがある。多くのブラウザでは、要素がフォーカスされたり、アクティブになった状態を示すためにoutlineプロパティを使っているからだ。

取り扱いには注意したい。

指定できる値

outlineプロパティは、以下の3つのプロパティ指定をまとめたものである。

outline-width

文字通りアウトラインの線の幅を指定できる。pxやemといった一般的な単位のほか、thin、medium、thickといったキーワードも使える。

初期値はmedium。

outline-style

以下のようなキーワードで線のスタイルを指定できる。

キーワード 意味
auto ブラウザが定義したスタイルを使う。
none アウトラインを使わない。
dotted 点線。
dashed 破線。
solid 単線。
double 二重線。
groove 埋め込んで見える互い違いの二重線（何と表現したら良いものやらわかりません）。
ridge 出っ張って見える互い違いの二重線。
inset 埋め込んで見える単線。
outset 出っ張って見える単線。

初期値はnone。

outline-color

アウトラインの線の色。色の指定なら何でもいい。

初期値はautoで、これはcurrentColorとして解釈される。

書き方

outlineプロパティは以下のように指定する。順不同。ただしスタイルを省略すると、デフォルト値がnoneのせいでアウトラインが表示されない。

css
.something {
  outline: 幅 スタイル 色;
}

謎の白い線の消し方

outlineプロパティを適切に指定しているはずなのに、その外側にさらに白い枠線が表示されることがある。これはブラウザがデフォルトで用意しているスタイリングのようである。outline-styleをauto以外の値にすると消えるからだ。

謎の白線に困ったら、とりあえずoutline-style:solid;に指定すれば消える。たぶん。

余談:outline-offset

先の3つの他に、outline-offsetというプロパティもある。このプロパティを使うと、borderとoutlineの距離を指定できる。

outlineではまとめて指定できないので、このプロパティだけは分けて指定してやる必要がある。

参考資料