outline

アウトライン

要素の外側に線を描きます。border と違ってレイアウトに影響せず、主にキーボード操作時のフォーカス表示に使います。

サンプルコード

HTML

1<button class="btn">ふつうのボタン</button>

2<button class="btn focus">フォーカス中の表示</button>

CSS

1.btn {

2 padding: 8px 18px;

3 margin-right: 12px;

4 border: 1px solid #b68235;

5 border-radius: 4px;

6 background: #fff;

7 font: inherit;

9.focus {

10 outline: 2px solid #b68235;

11 outline-offset: 3px;

12}

ブラウザでの表示右のボタンは、キーボードでフォーカスしたときの見た目を再現しています

outline は要素の外側に線を描くプロパティです。書き方は border と同じ「太さ種類色」ですが、要素の大きさに含まれず、周りのレイアウトを動かしません。

ブラウザは、キーボードで選択中（フォーカス中）の要素に outline を表示します。キーボードで操作する人にとって、現在地を知るための大切な目印です。

outline-offset で要素との間隔を空けられます。

:focus-visible を使うと、マウスでクリックしたときには表示されません。

CSS

1:focus-visible {

2 outline: 2px solid #b68235;

3 outline-offset: 2px;