CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:focus擬似クラスでフォーカス時のリンク色を変更する方法

CSSの:focus擬似クラスとは

リンクにフォーカスが当たったときの色を変更するには、CSSの:focus擬似クラスを使用します。ユーザーがTabキーなどでリンクを選択した際に、指定したスタイルが適用されるため、キーボード操作での視認性向上にも役立ちます。

色の値には、任意の色名のほか、16進数のカラーコード、RGB・HSL値など、有効な形式のカラー値であれば自由に指定できます。

サンプルコード

以下のコードを実行すると、フォーカスされたリンクの色が青色（#0000FF）に変化します。実際にTabキーでリンクを選択して、動作を確認してみてください。

<html>
   <head>
      <style>
         a:focus {
            color: #0000FF;
         }
      </style>
   </head>
   <body>
      <a href = "">これはデモ用のリンクです</a>
  </body>
</html>

ポイント

フォーカス時のスタイルは、アクセシビリティの観点からも重要です。デフォルトのアウトラインを消す場合でも、:focusを使って色や下線などを工夫し、現在どこにフォーカスがあるのかが一目でわかるデザインを心がけましょう。

  1. CSSでテキスト選択時のデフォルト色を変更する方法｜::selectionの使い方

    Webページ上でテキストをドラッグして選択すると、通常は青っぽいハイライトが表示されます。このデフォルトの選択色は、CSSの ::selection 疑似要素を使うことで、文字色や背景色を自由に上書きできます。 以下に、選択時のハイライトを紫背景・白文字にカスタマイズするサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html> <head> <style>    /* Firefox向け（旧バージョン対応） */    ::-moz-selection {   &

  2. HTMLでリンクの色を変更するにはどうすればよいですか？

    HTMLでリンクの色を変更する基本HTMLでリンクの色を変更するには、CSSの「color」プロパティを使用します。具体的には、style属性と組み合わせて指定します。style属性は、個々の要素に対してインラインスタイルを適用するための属性です。リンク（<a>タグ）にstyle属性を追加し、そこへcolorプロパティを記述することで、リンクの色を自由に変更できます。ただし、1点注意が必要です。style属性によるインラインスタイルは最も優先度が高いため、<style>タグや外部スタイルシートで設定されたスタイルは上書きされてしまいます。コード例以下のコードを実行すると