CSS入門(aタグのCSSについて)

aタグのCSSについて、基本的なことに絞って書いています。

リンクの下線を消す

aタグは、デフォルトで下線が付いています。下線を表示したくない場合は、text-decoration: none;を指定します。

<a href="https://shiroyuki2020.hatenablog.com/">元Webデザイナー兼コーダーの備忘録</a>

a{ text-decoration: none; }

マウスカーソルの種類

マウスカーソルにはいくつか種類があります。詳しくは参考サイトを確認してください。aタグでカーソルの種類を指定していない場合は、初期設定でcursor: pointer;が設定されているはずです。

/* マウスカーソルの種類 */
a{
  cursor: help;
  /* cursor: wait; */
  /* cursor: crosshair; */
  /* cursor: not-allowed; */
  /* cursor: zoom-in; */
  /* cursor: grab; */
}

参考サイト

• https://developer.mozilla.org/ja/docs/Web/CSS/cursor

aタグの疑似クラス

aタグの疑似クラスの用途は、主に「未訪問リンク」と「訪問済みリンク」を視覚的に見分けることです。aタグで使う疑似クラスには、以下のようなものがあります。

• :link(未訪問のリンク)
• :visited(訪問済みのリンク)
• :hover(ホバー時)
• :active(マウスのボタンを押し下げたとき)

/* リンクの状態を色で分ける例(下線なし) */
a{
  text-decoration: none;
}
a:link {
  color: black;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}
a:active {
  color: yellow;
}

aタグの疑似クラスの記述順は、「:link→:visited→:hover→:active」の順で書きます。より下に書いたもので上書きされるためです。サンプルコードでは、リンクの状態を色分けで表現しました。色分けに加えて、「ホバー時の下線のある・なし」で表現しても良いと思います。どのような対応を取るかは、各自の判断です。

参考サイト

• https://developer.mozilla.org/ja/docs/Web/CSS/:link
• https://developer.mozilla.org/ja/docs/Web/CSS/:visited
• https://developer.mozilla.org/ja/docs/Web/CSS/:hover
• https://developer.mozilla.org/ja/docs/Web/CSS/:active