フォーカスリングの設計
:focus-visible で「キーボードのときだけ」2px のリングを 2px 離して描く。角丸に追従し、ダーク背景では白＋藍の二重輪。マウスクリックでは出ない。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- outline はブラウザ既定を消さない。消すなら同じ強さの代替を必ず置く。outline:none だけの CSS は事故の温床
- :focus ではなく :focus-visible に描く。マウスで押した瞬間にリングが出ると「壊れた」ように見えて消される
- outline-offset: 2px で要素から少し離すと、角丸の形に沿ったまま背景色を問わず見える
- 暗い地の上では白い内輪＋藍の外輪の二重にする。1色のリングは地の色と同化して消える
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="fr-wrap">
<div class="fr-row">
<button type="button" class="fr-btn fr-primary">保存する</button>
<button type="button" class="fr-btn fr-ghost">キャンセル</button>
<a href="#fr-help" class="fr-link">ヘルプを見る</a>
</div>
<div class="fr-row">
<label class="fr-field"><span>メール</span><input type="email" placeholder="you@example.com" autocomplete="off"></label>
<label class="fr-check"><input type="checkbox"><span>通知を受け取る</span></label>
</div>
<div class="fr-row fr-dark">
<button type="button" class="fr-btn fr-ondark">ダーク背景では二重の輪</button>
</div>
<div class="fr-row">
<button type="button" class="fr-sim" id="fr-sim">Tab を押す（模擬）</button>
<span class="fr-simnote">実際の Tab キーでも同じリングが出ます</span>
</div>
<div class="fr-band"><span class="fr-tag">最後の操作</span><span id="fr-msg">枠内をクリックしてから Tab（キーボード）とクリック（マウス）を試す</span></div>
</div>