初心者必見！HTMLでリンクの色を変える方法｜hoverでマウスオーバー時の色も簡単に変更

html

ホームページやブログを作っていて、「リンクの色をもっと自分好みに変えたい」と思ったことはありませんか？

デフォルトのリンクは青色で下線がついていますが、デザインに合わせて色を変えるとサイト全体がグッとおしゃれに見えます。

この記事では、HTML（エイチティーエムエル）とCSS（シーエスエス）を使ってリンクの色を変える基本の方法から、マウスを載せたとき（hover）に色が変わるテクニックまでわかりやすく解説します。

HTMLだけではリンクの色は変えられない？

基本のリンクはaタグ

HTMLではリンクを作るときに <a>（エータグ）を使います。

これは「アンカー」の略で、他のページや同じページの別の場所へのリンクを作ります。

<a href="https://example.com">こちらをクリック</a>

ブラウザではこれが 青色 & 下線付き で表示されます。これはどのブラウザでも同じ表示になるよう、あらかじめ決められたデザインです。

なぜHTMLだけでは色を変えられないの？

HTMLは文書の構造を決めるための言語で、デザインを決めるのはCSSの役割です。リンクの色を変えたいときにHTMLだけではできません。

HTMLとCSSの役割の違い

  • HTML: 「ここにリンクがあります」という情報を伝える
  • CSS: 「このリンクは赤色にしてください」という見た目を指定する

CSSが必要な理由

リンクの色を変えるには CSS（デザインの設定）を使います。CSSを使うことで：

  • 色を自由に変更できる
  • 統一感のあるデザインにできる
  • 後から簡単に修正できる
  • スマートフォンやタブレットでも見やすく調整できる
スポンサーリンク

リンクの色を変える基本的な方法

colorプロパティを指定する

CSSの color プロパティを使えば簡単にリンクの文字色を変えられます。

基本的な使い方

<style>
a {
  color: red;
}
</style>

<a href="https://example.com">赤色のリンク</a>

これでリンクの色が赤色になります。

色の指定方法

色の指定には以下の方法があります：

色名で指定

a {
  color: blue;    /* 青色 */
  color: green;   /* 緑色 */
  color: red;     /* 赤色 */
}

カラーコードで指定

a {
  color: #3366cc;  /* 青みのあるリンク */
  color: #ff6600;  /* オレンジ色のリンク */
  color: #333333;  /* 濃いグレー */
}

RGB値で指定

a {
  color: rgb(51, 102, 204);  /* 青色 */
  color: rgb(255, 102, 0);   /* オレンジ色 */
}

複数のリンクに違う色を設定する

すべてのリンクではなく、特定のリンクだけ色を変えたい場合は、クラス名を使います。

クラス名を使った例

<style>
.important-link {
  color: #ff0000;
  font-weight: bold;
}
.sub-link {
  color: #666666;
}
</style>

<a href="https://example.com" class="important-link">重要なリンク</a>
<a href="https://example.com" class="sub-link">サブリンク</a>
<a href="https://example.com">普通のリンク</a>

どんなときに使うの？

  • 重要なリンクを目立たせたいとき
  • カテゴリーごとに色を分けたいとき
  • ボタンのようなリンクを作りたいとき

リンクの状態別に色を変える方法

マウスを載せたとき（hover）の色を変える

リンクにカーソルを載せたときに色を変えたい場合は、 :hover 擬似クラスを使います。

基本的な使い方

<style>
a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: orange;
  text-decoration: underline;
}
</style>

<a href="https://example.com">マウスを載せると色が変わるリンク</a>

この例では：

  • 普段は黒色で下線なし
  • マウスを載せるとオレンジになり下線がつく

なぜhoverを使うの？

hoverを使うメリットは：

  • ユーザーがリンクだと気づきやすい
  • 操作しやすくなる
  • デザインがきれいに見える
  • アクセシビリティが向上する

訪問済みリンクの色を変える

ユーザーが一度クリックしたリンクは「訪問済みリンク」としてブラウザが覚え、紫など別の色で表示されます。これも :visited 擬似クラスでカスタマイズできます。

基本的な使い方

<style>
a:visited {
  color: gray;
}
</style>

これで一度訪問したリンクは灰色になります。

注意点

セキュリティの理由で、:visited に指定できるプロパティは制限されています。主に色の変更のみ可能です。

クリックしたとき（active）の色を変える

リンクをクリックした瞬間の色も変えることができます。

基本的な使い方

<style>
a:active {
  color: red;
}
</style>

すべての状態をまとめて設定する

<style>
a {
  color: #0066cc;           /* 通常の色 */
  text-decoration: none;    /* 下線なし */
}
a:hover {
  color: #ff6600;           /* マウスを載せたとき */
  text-decoration: underline; /* 下線をつける */
}
a:visited {
  color: #666666;           /* 訪問済み */
}
a:active {
  color: #ff0000;           /* クリック時 */
}
</style>

実際のデザイン例

ボタンのようなリンク

<style>
.button-link {
  color: white;
  background-color: #007bff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}
.button-link:hover {
  background-color: #0056b3;
}
</style>

<a href="https://example.com" class="button-link">ボタンリンク</a>

メニューのリンク

<style>
.menu-link {
  color: #333333;
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
}
.menu-link:hover {
  color: #007bff;
  background-color: #f8f9fa;
}
</style>

<a href="https://example.com" class="menu-link">ホーム</a>
<a href="https://example.com" class="menu-link">サービス</a>
<a href="https://example.com" class="menu-link">お問い合わせ</a>

フッターのリンク

<style>
.footer-link {
  color: #888888;
  text-decoration: none;
  font-size: 14px;
}
.footer-link:hover {
  color: #333333;
  text-decoration: underline;
}
</style>

<a href="https://example.com" class="footer-link">プライバシーポリシー</a>

よくある問題と解決方法

色が変わらないときの対処法

優先度の問題

CSSには優先度があり、より具体的な指定が優先されます。

<!-- 効かない例 -->
<style>
a { color: red; }
.link { color: blue; }  /* こちらが優先される */
</style>

<a href="#" class="link">リンク</a>

解決方法

<style>
a.link { color: red; }  /* より具体的に指定 */
</style>

importantはなるべく使わない

a {
  color: red !important;
}

!important を使うと強制的に色を上書きできますが、管理が難しくなるので多用しない方が無難です。

なぜ使わない方がいいの？

  • 後から修正しにくくなる
  • CSSの優先度が分かりにくくなる
  • 他の開発者が理解しにくい

下線の調整

下線を消したいときは text-decoration: none; を使いましょう。

a {
  text-decoration: none;  /* 下線を消す */
}

下線の種類も変更できます：

a {
  text-decoration: underline;    /* 下線 */
  text-decoration: overline;     /* 上線 */
  text-decoration: line-through; /* 取り消し線 */
}

アクセシビリティを考えた色の選び方

色のコントラストを意識する

リンクの色を選ぶときは、背景色とのコントラストを意識しましょう。

良い例

/* 白い背景に濃い青 */
a {
  color: #0066cc;
  background-color: white;
}

悪い例

/* 白い背景に薄い黄色（見えにくい） */
a {
  color: #ffff99;
  background-color: white;
}

色以外の情報も併用する

色だけでなく、下線や太字なども使って、色覚に障害のある方でもリンクだと分かるようにしましょう。

a {
  color: #0066cc;
  text-decoration: underline;
  font-weight: bold;
}

まとめ

HTMLでリンクの色を変えるポイントは：

  • <a> タグ単体では色を変えられない
  • CSSで color プロパティを指定する
  • :hover や :visited でマウスオーバーや訪問後の色を調整
  • クラス名を使って特定のリンクだけ色を変更
  • アクセシビリティを考慮した色選び

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました