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

CSSでハイパーリンクにさまざまなスタイルを適用する方法

ハイパーリンクに文字色やフォントサイズ、背景色などのさまざまなスタイルを設定したい場合は、以下のコードを実行して試してみてください。マウスカーソルを各リンクに重ねると、リンクごとに異なるスタイルが適用されます。

リンクの疑似クラスとは

CSSでは、リンクの状態に応じてスタイルを切り替えるための疑似クラスが用意されています。主な疑似クラスは次のとおりです。

  • :link — まだ訪問していないリンクに適用されるスタイル
  • :visited — すでに訪問したリンクに適用されるスタイル
  • :hover — マウスカーソルがリンク上に乗っているときに適用されるスタイル

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         a.first:link {color:#ff0000;}
         a.first:visited {color:#0000ff;}
         a.first:hover {color:#ffcc00;}
         a.second:link {color:#ff0000;}
         a.second:visited {color:#0000ff;}
         a.second:hover {font-size:150%;}
         a.third:link {color:#ff0000;}
         a.third:visited {color:#0000ff;}
         a.third:hover {background:#66ff66;}
      </style>
   </head>
   <body>
      <p>下のリンクにマウスカーソルを重ねてみてください：</p>
      <p><b><a class = "first" href = "demo1.html" target = "_blank">文字色が変わるリンク</a></b></p>
      <p><b><a class = "second" href = "demo2.html" target = "_blank">フォントサイズが変わるリンク</a></b></p>
      <p><b><a class = "third" href = "demo3.html" target = "_blank">背景色が変わるリンク</a></b></p>
   </body>
</html>

コードの解説

この例では、3つのクラス（first・second・third）に対して、それぞれ異なるホバー時の効果を定義しています。

  • first — ホバーすると文字色が黄色（#ffcc00）に変化します。
  • second — ホバーするとフォントサイズが150%に拡大されます。
  • third — ホバーすると背景色が緑（#66ff66）に変化します。

また、未訪問のリンクは赤（#ff0000）、訪問済みのリンクは青（#0000ff）で表示されるよう設定されています。このように疑似クラスを組み合わせることで、ユーザーの操作に反応する動的で視覚的にわかりやすいリンク表現を、JavaScriptなどを使わずにCSSだけで簡単に実装できます。

  1. CSSの:placeholder-shown疑似クラスでプレースホルダー表示中の入力フィールドのスタイルをカスタマイズする方法

    プレースホルダー（placeholder）が表示されている入力フィールドのスタイルをカスタマイズしたい場合には、CSSの:placeholder-shown疑似クラスを使用します。この疑似クラスは、placeholder属性が設定されており、かつユーザーがまだ何も入力していない状態の入力フィールドにマッチします。プレースホルダーが表示されている間だけ、枠線の色や背景色などを変更できるため、「まだ入力されていない」ことをユーザーに視覚的に伝えるのに非常に便利です。例1：:placeholder-shownの基本的な使い方以下の例では、:placeholder-shown疑似クラスを使って、プレー

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ