【入門編】インライン要素のフォーカス管理とアウトライン制御 – HTML実践ガイド

CSSを触り始めると、多くの人が最初にこう思うんです。
「デザインが崩れるから、この枠線、消しちゃいたいな……」

でも、ちょっと待ってください！その枠線、実は「今どこを操作しているか」を教えてくれる、目の不自由な方やマウスを使わない方にとっての「命綱」なんです。

今日は、この「アウトライン」とどう仲良く付き合っていけばいいのか、デザインと使いやすさを両立させるコツを一緒に見ていきましょう。

—

アウトラインは「デジタルな足跡」

想像してみてください。あなたは今、広くて真っ暗な暗闇の中をお買い物しています。
手元には懐中電灯（キーボード）しかありません。

「Tab」キーを押すたびに、懐中電灯がパッと当たった場所だけが明るく照らされますよね。この「照らされた光の輪」が、Webでいうところの`:focus`（フォーカス）状態であり、その縁取りが`outline`（アウトライン）です。

もし、この枠線をCSSで `outline: none;` と書いて消してしまうと、「今、自分はどこにいるのか？」が完全にわからなくなってしまいます。 買い物カゴに商品を入れたつもりなのに、実は全然違う棚を指していた……なんて悲劇が起きてしまうわけです。

—

アウトラインを「消す」のではなく「育てる」

「でも、ブラウザ標準の青い枠線がデザインに合わないんだよなぁ……」という気持ちも、すごくよくわかります。そんなときは、無理に消すのではなく、あなたのWebサイトの世界観に合わせた「新しい光」を用意してあげればいいんです。

例えば、こんな風にCSSを書いてみましょう。

/
デフォルトのアウトラインは残しつつ、
自分のサイトに馴染むようにカスタマイズします！
/
a:focus {
/ まずは標準の線を消します /
outline: none;

/ 代わりに、もっとおしゃれな装飾を足してあげましょう /
/ 下線を太くしたり、背景色を変えたりするのがおすすめです /
border-bottom: 3px solid #ff6b6b;
background-color: #fff4f4;

/ これで「今ここにいるよ！」と優しく教えてくれます /
}

ポイントは、「何もしない」のではなく「別の方法で、現在地をしっかり伝える」ことです。これだけで、アクセシビリティ（誰にでも使いやすいこと）を保ちながら、こだわりのデザインを両立できます。

—

つまずきやすいポイント：`:focus` と `:hover` の違い

よくある間違いが、「マウスを乗せたとき（`:hover`）」と「キーボードで選んだとき（`:focus`）」を混同してしまうことです。

• `:hover`: マウスを使っている人が対象。
• `:focus`: キーボードや、スイッチ操作などの補助ツールを使っている人が対象。

「マウスでホバーしたときだけ枠線を出したい！」と思って `:hover` にだけデザインを当ててしまうと、キーボード操作の人には何も見えないままになってしまいます。

「キーボードで操作する人のためのデザイン」は、必ず `:focus` で設定する。 これを覚えておくだけで、あなたのサイトはぐっとプロフェッショナルな品質になりますよ！

—

今日のまとめ：優しさがコードに出る

Web制作は、パソコンの画面越しに「誰か」と対話する作業です。

もし誰かがあなたのサイトを訪れて、キーボードで一生懸命操作しているとき。あなたの書いたコードが、その人の歩みを優しくサポートする「道しるべ」になっていたら素敵だと思いませんか？

• `outline: none;` はなるべく控える（消すなら必ず代わりの目印を用意する！）
• `:focus` のスタイルをサイトの個性に合わせてデザインする

たったこれだけの気遣いで、あなたのサイトは「誰にとっても居心地のいい場所」に変わります。

最初は難しく感じるかもしれませんが、まずは「キーボードでTabキーを押して、自分のサイトを旅してみる」ことから始めてみてください。「あ、ここ見づらいかも？」という気づきこそが、最高のエンジニアへの第一歩です。

焦らず、一歩ずつ進んでいきましょうね。応援しています！