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のせいでアウトラインが表示されない。
謎の白い線の消し方
outlineプロパティを適切に指定しているはずなのに、その外側にさらに白い枠線が表示されることがある。これはブラウザがデフォルトで用意しているスタイリングのようである。outline-styleをauto以外の値にすると消えるからだ。
謎の白線に困ったら、とりあえずoutline-style:solid;に指定すれば消える。たぶん。
余談:outline-offset
先の3つの他に、outline-offsetというプロパティもある。このプロパティを使うと、borderとoutlineの距離を指定できる。
outlineではまとめて指定できないので、このプロパティだけは分けて指定してやる必要がある。