キーボードでフォームを操作したとき、入力欄やボタンのまわりに出る枠線——あれを描いているのが CSS の outline プロパティです。border とよく似ていますが、要素の領域を広げないという大きな違いがあり、フォーカス時の目印（フォーカスリング）として重要な役割を持っています。この記事では、outline の基本の書き方、border との違い、要素から枠を離す outline-offset、そして安易に消してはいけない理由まで、実際の表示を見ながら初心者の方にも分かるように解説します。
目次
outline とは
outline は、要素の外側に描かれる枠線を指定するプロパティです。書き方は border とよく似ていて、線の太さ・スタイル・色をまとめて指定できます。最大の特徴は、この枠線がレイアウトに影響しないことです。border は要素のサイズに加算されて隣の要素を押しのけますが、outline は要素の上に重ねて描かれるため、まわりの配置が一切ずれません。
下のプレビューで、outline の付き方を確かめてみましょう。線の色や太さ、outline-offset の値を書き換えると、すぐに反映されます。緑の破線が付いた要素も、枠のぶんだけ広がっていないことに注目してください。
<button class="b1">outline</button>
<button class="b2">offset付き</button>
<div class="box">outline は領域を広げず、隣の要素を押しのけません</div>
button {
padding: 10px 16px;
margin: 8px;
font-size: 16px;
border: 1px solid #ccc;
background: #fff;
}
/* 枠線（border の外側に描かれ、レイアウトに影響しない） */
.b1 { outline: 3px solid #4a3aff; }
/* outline-offset で要素から離す */
.b2 {
outline: 3px solid #e5398a;
outline-offset: 6px;
}
.box {
margin: 24px 8px;
padding: 12px;
border: 2px solid #ccc;
outline: 3px dashed #43a047;
font-family: sans-serif;
}
基本の書き方
outline は、border と同じく「太さ・スタイル・色」をまとめて指定できる一括指定プロパティです。値の順番は自由で、スペースで区切って並べます。
.button {
/* 太さ スタイル 色 */
outline: 2px solid #4a3aff;
}個別に指定したいときは、次の3つのプロパティが使えます。スタイルには border と同じく solid（実線）・dashed（破線）・dotted（点線）などが指定できます。
| プロパティ | 指定する内容 |
|---|---|
outline-width | 線の太さ |
outline-style | 線のスタイル（solid・dashed など） |
outline-color | 線の色 |
border との違い
見た目が似ている outline と border ですが、性質には重要な違いがあります。とくに「レイアウトに影響するか」と「4辺を個別に指定できるか」を押さえておきましょう。
| 項目 | outline | border |
|---|---|---|
| レイアウトへの影響 | なし（要素サイズが変わらない） | あり（サイズに加算される） |
| 描かれる位置 | border の外側 | padding の外側 |
| 4辺の個別指定 | できない（4辺一括） | できる（top など） |
| 角丸への追従 | 環境により差がある | border-radius で丸まる |
outline はレイアウトを動かさないため、「ホバーやフォーカスで枠を付けたいが、その瞬間に要素がカクッと動くのは避けたい」という場面に向いています。一方、デザインとして常に表示する枠線や、特定の辺だけ線を引きたいときは border を使います。
outline-offset で枠を要素から離す
outline-offset は、枠線を要素からどれだけ離すかを指定するプロパティです。正の値を指定すると、要素との間にすき間ができ、枠が外側に広がって見えます。フォーカス時に少し余白を空けて枠を出すと、見やすく洗練された印象になります。
.button {
outline: 2px solid #4a3aff;
outline-offset: 4px; /* 要素から4px離して描く */
}負の値も指定でき、その場合は枠線が要素の内側に食い込みます。なお outline-offset は outline の一括指定には含まれないので、別の行で指定する必要があります。
フォーカスリングを消さない
ブラウザは、リンクやボタン、入力欄がフォーカスされたときに、既定で outline を表示します。これがフォーカスリングです。キーボードだけで操作する人にとって、フォーカスリングは「今どこを操作しているか」を知る唯一の手がかりになります。
デザインの都合で outline: none として消してしまうと、キーボード操作の利用者が現在地を見失い、サイトが非常に使いにくくなります。これはアクセシビリティ上の問題です。枠線が気になる場合は、消すのではなく自分で見やすいスタイルに置き換えましょう。
/* 悪い例：フォーカスリングを完全に消してしまう */
.button:focus { outline: none; }
/* 良い例：自分のデザインに合わせた枠線に置き換える */
.button:focus-visible {
outline: 3px solid #4a3aff;
outline-offset: 2px;
}ここで使った :focus-visible は、キーボード操作などでフォーカスしたときだけ枠線を出す擬似クラスです。マウスのクリック時には枠を出さず、キーボード操作のときだけ表示できるため、見た目と使いやすさを両立できます。
outline が表示されないとき
style を指定していない
太さと色だけを指定しても、outline-style が none のままだと枠線は表示されません。border と同じく、線のスタイル（solid など）の指定が必須です。一括指定の outline: 2px solid red; のように、スタイルを含めて書きましょう。
角丸に沿わない
かつては outline が border-radius の角丸に追従せず四角いままになる問題がありましたが、最近の主要ブラウザでは角丸に沿って描かれるようになっています。古い環境も考慮する必要がある場合は、表示を実機で確認しておくと安心です。
まとめ
outline は、レイアウトを動かさずに枠線を描ける、フォーカス表示に欠かせないプロパティです。要点を整理します。
outlineは要素の外側に描かれ、レイアウトに影響しない枠線。borderと違い4辺一括で、サイズに加算されない。outline-offsetで要素から枠を離せる（一括指定には含まれない）。- フォーカスリングは
outline: noneで消さない。アクセシビリティに重要。 - 消したいときは
:focus-visibleで自分のスタイルに置き換える。
装飾の枠線は border、フォーカスや一時的な強調は outline、と役割で使い分けるのがおすすめです。とくにフォーカスリングは、消すのではなく「見やすく置き換える」ことを意識してみてください。