CSSでリンクの色と下線をカスタマイズする徹底解説！

初心者でも分かるCSSリンクカスタマイズ解説イメージ CSS
2024.01.24
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSを使ってリンクの色や下線をカスタマイズする方法について、初心者目線で詳しく徹底解説します。

サンプルコード付きなので、すぐに実践できるようになります。

●CSSとは？

CSS（Cascading Style Sheets）は、HTMLやXMLなどのマークアップ言語で記述された文書の見た目やレイアウトを制御するための言語です。

CSSを使うことで、効率的にデザインを調整し、ウェブページの見た目を統一できます。

●リンクの色を変更する方法

CSSを使ってリンクの色を変更するには、aタグに対してcolorプロパティを使用します。

a {
  color: red;
}

このコードは、すべてのリンクの文字色を赤に変更します。

●リンクの下線を消す方法

リンクの下線を消すには、aタグに対してtext-decorationプロパティを使用します。

a {
  text-decoration: none;
}

このコードは、すべてのリンクの下線を消します。

●リンクの色と下線を同時にカスタマイズする方法

リンクの色と下線を同時にカスタマイズするには、次のようなコードを使用します。

a {
  color: red;
  text-decoration: none;
}

このコードは、すべてのリンクの文字色を赤に変更し、下線を消します。

●リンクの状態ごとに色を変更する方法

リンクは、通常状態・ホバー状態（マウスオーバー時）・アクティブ状態（クリック時）・訪問済み状態の4つの状態があります。

それぞれの状態に対して色を変更するには、疑似クラスを使用します。

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

このコードは以下のように機能します。

  • 通常のリンク（未訪問）は青色
  • 訪問済みのリンクは紫色
  • マウスオーバー時のリンクは赤色
  • クリック時のリンクは緑色

●リンクの状態ごとに下線をカスタマイズする方法

リンクの状態ごとに下線をカスタマイズするには、疑似クラスとtext-decorationプロパティを組み合わせて使用します。

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

このコードは以下のように機能します。

  • 通常のリンク（未訪問）と訪問済みリンクは下線なし
  • マウスオーバー時とクリック時のリンクに下線を表示

●リンクの状態ごとに色と下線を同時にカスタマイズする方法

リンクの状態ごとに色と下線を同時にカスタマイズするには、疑似クラスとcolorプロパティとtext-decorationプロパティを組み合わせて使用します。

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: green;
  text-decoration: underline;
}

このコードは次のように機能します。

  • 通常のリンク（未訪問）は青色で下線なし
  • 訪問済みのリンクは紫色で下線なし
  • マウスオーバー時のリンクは赤色で下線あり
  • クリック時のリンクは緑色で下線あり

まとめ

これで、CSSを使ってリンクの色と下線をカスタマイズする方法が分かったかと思います。

初心者の方でも簡単に実践できるサンプルコードを試してみて、自分のウェブページに応用してみましょう。