【6日でできるHTML入門】リンクのCSS

　リンクはホームページにおける重要なナビゲーション要素ですが、ブラウザの初期設定のままでは「青色＆下線」という古典的な見た目になりがちです。CSSを用いてリンクの文字色や下線、有効状態ごとのスタイルを自在にカスタマイズできるようになると、デザイン性とユーザビリティが向上します。ここでは、リンクに関する各種CSSプロパティと擬似クラスを使った書式指定の方法を、具体的なサンプルとともに解説します。

１．リンクの基本書式指定

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

link-cssダウンロード
夕焼け

1.1. 文字リンクの色・下線を変更

　HTMLの<a>タグは通常、青い文字に下線が引かれます。下線を消したり、色やサイズを変えたりするには、次のようにCSSでa要素を指定します。

ファイル名： lesson19-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎨 カスタムリンク</title>
  <style>
    p { line-height: 1.8; }
    a {
      font-size: 16pt;
      color: #E60033;         /* リンク文字色を変更 */
      text-decoration: none;  /* 下線を消す */
    }
  </style>
</head>
<body>
  <h1>おすすめ検索エンジン</h1>
  <p>
    <a href="https://duckduckgo.com/">DuckDuckGo</a><br>
    <a href="https://www.bing.com/">Bing</a>
  </p>
</body>
</html>

ブラウザの出力例

1.2. 画像リンクの枠線を消す

　<a><img></a>で画像リンクを作成すると、クリック可能領域に枠線が表示される場合があります。以下のようにimg要素にborder:none;を指定すると枠線を消せます。

ファイル名： lesson19-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🏖 画像リンク</title>
  <style>
    img { border: none; /* 枠線を消去 */ }
  </style>
</head>
<body>
  <h1>旅行サイト</h1>
  <a href="https://www.jalan.net/">
    <img src="sunset.png" alt="夕焼け">
  </a>
</body>
</html>

ブラウザの出力例

２．擬似クラスを使ったリンク状態別スタイル

2.1. 未訪問・訪問済みリンク

　リンクの状態（未訪問／訪問済み）に応じて色を変えるには、:link と :visited を使います。

擬似クラス条件
:link未訪問のリンク
:visited訪問済みのリンク

ファイル名： lesson19-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔗 状態別リンク</title>
  <style>
    a:link {
      color: #0066CC;       /* 未訪問リンク */
    }
    a:visited {
      color: #993399;       /* 訪問済みリンク */
    }
  </style>
</head>
<body>
  <h1>ニュースサイト</h1>
  <p>
    <a href="https://www3.nhk.or.jp/news/">NHKニュース</a><br>
    <a href="https://mainichi.jp//">毎日新聞</a>
  </p>
</body>
</html>

ブラウザの出力例

2.2. マウスオーバー・クリック時の表示

ホバー時やクリック時のスタイルは、:hover と :active で指定します。

擬似クラス条件
:hoverマウスオーバー時
:activeクリック中

ファイル名： lesson19-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>✨ ホバーとアクティブ</title>
  <style>
    a:link, a:visited {
      text-decoration: none;
      font-size: 16pt;
    }
    a:hover {
      color: #FFFFFF;
      background-color: #FF6600; /* 背景色を付与 */
    }
    a:active {
      color: #000000;
      background-color: #FFCC00; /* クリック時の色 */
    }
  </style>
</head>
<body>
  <h1>カスタムボタン風リンク</h1>
  <p>
    <a href="https://www.rakuten.co.jp/">楽天市場</a>
  </p>
</body>
</html>

ブラウザの出力例

３．疑似クラスとクラス属性の組み合わせ

　特定のリンクだけに擬似クラスを適用したい場合、class属性と組み合わせて次のように指定します。

a.special:link    { color: #008000; }
a.special:hover   { text-decoration: underline; }

<p><a href="#" class="special">特別なリンク</a></p>

まとめ

  • リンクの基本書式はa{…}で色や下線を変更可能
  • 画像リンクの枠線はimg{border:none;}で消去
  • :link, :visited, :hover, :activeで状態別スタイルを制御
  • class属性と擬似クラスを組み合わせて特定リンクのみカスタマイズ

使用タグ一覧

タグ用途
<a>リンクを作成
<img>画像を表示
<p>段落を示す
<h1>見出し（大）
<style>CSSを記述
<head>文書のメタ情報を含む
<body>本文を含む