輪郭線をボタンから少し離したい：outline-offsetで枠との間隔を変えよう

ボタンの周りに輪郭線を付けたら、枠線とくっついて見える。少し間を空けたいとき、paddingを増やすとボタン自体も大きくなってしまう。輪郭線の位置だけを動かす指定がoutline-offsetだよ。

このページでは、輪郭線とボタンの間隔を三通りに切り替えられるようになる。必要なのはブラウザだけ。作例のボタンを使うので、サイトの設定を書き換える準備は不要だよ。

borderとoutlineを見分けよう

borderは箱の枠線。outlineは、その枠の外側へ描く輪郭線だよ。outlineは配置のための場所を取らないので、付けたり位置をずらしたりしても、その分だけ隣の要素を押し下げるものではない。

今回の作例では、ボタンの背景を黄色、borderをピンク、outlineを紫にしている。三つを違う色にして、どの線を動かしたか分かるようにしたよ。

.target {
  border: 2px solid #ef699b;
  outline: 3px solid #5445df;
  outline-offset: 6px;
}

outlineの太さは3pxのまま。outline-offsetはその線を太くする値ではなく、輪郭線を枠の端からどれだけ離すかを選ぶ値なんだ。

0とプラスの値を比べる

outline-offsetの初期値は0。0pxなら枠の端と輪郭線の間に空きは付かない。6pxなら、枠の外へ6px離れたところへ輪郭線を描く。

その間に新しい塗りつぶしの色ができるわけではない。空いた部分は透明で、今回ならボタンの親にある縞模様の背景が見えるよ。黄色いボタンの背景が6px外へ広がるのとは違う。

pxは画面上の長さを指定するCSSの単位。ここでは値だけを変え、線の太さやボタンの文字を同時に変えないようにしているよ。

マイナスなら内側へ移る

-3pxのような負の値は、輪郭線を要素の内側へ置く。外へ出す余地がないときに使える場合がある一方、枠や文字に重なって見づらくならないかを確認する必要がある。

今回の-3pxではピンクの枠と紫の輪郭線が重なる部分もある。値を小さくすれば常に読みやすくなるわけではないので、色の違いや文字との距離を見ながら比べてね。

動かしてみよう

1. 0pxで、黄色いボタンの周りの二色の線を見る。
2. 6pxへ切り替え、線の間に縞模様が現れることを確かめる。
3. ボタンの実測幅と、その下の説明の上位置が変わらないことを表示欄で見る。
4. -3pxへ変えて、輪郭線が内側へ入る様子を比べる。
5. 「最初から試す」で0pxへ戻す。

Tabキーでも、選択欄やボタンへ移動できる。作例の紫の輪郭線は位置の比較用として常に出してあり、フォーカスしたときだけ出す実装ではないよ。

配置は変わらなくても、線は重なり得る

輪郭線が場所を取らないことは、ほかの内容と絶対に重ならないという意味ではない。外側へ大きくずらせば、近くの文字や隣のボタンに線がかかる可能性がある。親のはみ出し処理などによって、外側の線が欠けることもあるよ。

ボタンどうしの距離を広げたいなら、gapやmarginなど配置のための余白を調整する。ボタンの中の文字と枠を離したいならpadding。輪郭線の位置だけを変えたいならoutline-offset。目的に合わせて係を分けよう。

操作する場所を分かる状態にする

実サイトでフォーカスの輪郭線を調整する場合は、キーボードで現在どこを操作しているか分かる状態を保つことが大切。見た目を整えるためにoutline:noneだけを入れて、代わりの目印をなくさないようにしよう。

予想と違うときは、まずリセット。自分のページではoutline自体の太さ・色・種類が指定されているか、ほかのCSSが上書きしていないかも調べてね。輪郭線がない状態にoffsetだけを足しても、見える線が新しく作られるわけではないよ。

箱の枠と輪郭の基本はborderとoutlineの違い、配置の余白はgapとmarginへ。操作位置の意味はフォーカス・選択・現在地も合わせて確認できるよ。

確認日：2026年11月1日。MDNを確認し、240px・319px・1280px幅のChromiumで三つの値、ボタンと説明の座標、フォーカス、リセットを検証。色の線と透明な間隔は描画のピクセルでも照合した。