CSS講座 / リンクの状態とキーボードフォーカスを表示する

CSS講座

リンクの状態はlink、visited、hoverなどの擬似クラスで装飾し、キーボードの現在位置は見えるフォーカスで示します。色やhoverだけに頼らず、通常時の下線と操作時の輪郭を保ちます。

リンクを操作できるものとして示す

a {

  text-decoration: underline;

  text-underline-offset: 0.15em;

}

実際のリンクはhrefを持つa要素で作ります。文字を青くしただけではリンクになりません。下線があれば色の区別が難しい読者にも移動できる場所を伝えられます。text-underline-offsetは文字と下線の距離を調整し、ここでemはリンク自身の文字サイズが基準です。

「Click」のように行き先が不明な名前より「Visitor Information」のように内容が分かる名前にします。別の文書への移動はリンク、現在の画面で処理を実行するなら通常ボタンが適しています。見た目をボタン風にする前に役割を分けます。

状態と記述順を比較する

未訪問のリンクはlink、訪問済みと扱われるリンクはvisited、ポインターが上にある間はhover、押して有効化している間などはactiveに一致します。

a:link { color: #1756a9; }

a:visited { color: #6b438c; }

a:hover { color: #b53239; }

a:active { color: #8a2630; }

一つのリンクがvisitedとhoverに同時に一致することもあります。同じ詳細度などの条件なら後の同じプロパティが勝つため、link→visited→hover→activeの順にすると未訪問・訪問済みのどちらでもhoverと押下の色を見られます。

この順番がほかのカスケード条件を無条件に上回るわけではありません。変化しないときは適用中の宣言を調べます。activeはクリック後も「現在のメニュー」を示し続ける状態ではなく、その用途には別のクラスやaria-currentなどを検討します。状態を選ぶ擬似クラスと比較してください。

キーボードの現在位置を見せる

a:focus-visible {

  outline: 3px solid #e58c1f;

  outline-offset: 3px;

}

フォーカスはキーボード入力を受け取る対象です。Tabでリンクへ移動しても場所が見えなければ、どこでEnterを押すのか分かりません。focus-visibleはブラウザーが表示を必要と判断する状況で一致し、単純に「キーボードなら全部、クリックなら全部なし」と分かれるものではありません。

outlineは輪郭、outline-offsetは要素からの距離です。十分な代替表示を作らずoutline:noneで既定の表示を消さないでください。この例は下線とフォーカスの輪郭を両方残します。MDNのfocus-visibleと入力欄のフォーカスと状態も確認できます。

二つのHTMLファイルを作る

同じフォルダーにlinks.htmlとvisit.htmlを作り、次の順にUTF-8で保存します。一番目のリンクは別ファイル、二番目は現在のページ内の営業時間見出しへ移動します。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Link states exercise</title>

  <style>

    body { margin: 24px; font: 1rem/1.7 sans-serif; color: #333; }

    main { max-width: 65ch; }

    a { text-decoration: underline; text-underline-offset: 0.15em; }

    a:link { color: #1756a9; }

    a:visited { color: #6b438c; }

    a:hover { color: #b53239; }

    a:active { color: #8a2630; }

    a:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }

    nav li + li { margin-block-start: 0.7em; }

  </style>

</head>

<body>

  <main>

    <h1>Small Garden visitor information</h1>

    <nav aria-label="Instruction link"><ul>

      <li><a href="visit.html">Visitor information on a separate page</a></li>

      <li><a href="#hours">Opening hours on this page</a></li>

    </ul></nav>

    <h2 id="hours">Opening hours</h2>

    <p>Plant care takes place in the morning. These times are fictional sample content, not information about a real facility.</p>

    <p>Hover over the links or press Tab to check their colors and outlines.</p>

  </main>

</body>

</html>

<!doctype html>

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Visitor Information</title></head>

<body><h1>Visitor information page</h1><p>This separate document is opened by the first link.</p><p><a href="links.html">Return to the link exercise</a></p></body></html>

マウスとキーボードで実際に移動する

links.htmlを開き、一番目にポインターを重ねて赤、ボタンを押している間に濃い赤になることを見ます。離すと移動するためactiveの色は残りません。
リンク先を開いて戻り、ポインターを外して訪問済みの紫を確認します。既存の履歴、新しいプロファイル、プライベートウィンドウなどで結果は変わります。
ポインターをリンクから外し、Tabで移動します。オレンジの輪郭が見え、次のTabで別のリンク、Shift+Tabで逆順へ移ることを確認します。
一番目でEnterを押してvisit.htmlへ移動し、戻ったら二番目をEnterで開いて営業時間の見出しへ移動します。

visitedにはプライバシー上の制限があります。colorなど一部の色指定は使えますが、サイズや画像などを自由に変えて履歴を判別することはできません。getComputedStyleでも訪問済みの色をそのまま返さない場合があるため、計算値だけで履歴を判断しません。MDNのvisitedと訪問履歴に関する制約を参照できます。

変化や移動がないときの確認

移動しない場合はhrefの綴りとvisit.htmlの場所を確認します。二ファイルが同じフォルダーにあるかも見ます。訪問済み色の代わりにhover色だけが見えるならポインターを外し、ツールでhoverを固定していれば解除します。

Tabで移動できなければhrefのある本物のリンクか確認し、ブラウザーやOSのキーボードナビゲーション設定も調べます。輪郭が切れるなら親のoverflowと周囲の余白を見ます。タッチのhoverはデスクトップと異なることがあるため、必須情報をhover時だけに出しません。

順序を変える実習が終わったら元へ戻します。ツールの一時的なCSS変更は通常再読み込みで戻りますが、訪問履歴そのものは再読み込みだけでは消えません。

CSS講座