0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【フロントエンド1000本ノック】0032_<a>タグの疑似クラス(:link, :visited, :hover, :active)をすべて適用したスタイルを記述せよ。

Posted at

この記事は人間が書きました

はじめに

こんにちは、赤神です!
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

擬似クラスとは?

擬似クラスとは、要素の特定の「状態」にスタイルを適用するためのものです。リンク(<a> タグ)には、ユーザーの操作に応じて変化する4つの基本的な状態があります。

  • :link:まだ一度も訪問していないリンク
  • :visited:一度でも訪問したことがあるリンク
  • :hover:マウスカーソルが上に乗っている状態
  • :active:リンクをクリックしている最中の状態

重要なルール:LVHA(ラブハ)の順番

これらの擬似クラスを CSS で定義する際には、記述する順番が非常に重要です。以下の順番を守らないと、スタイルが正しく適用されないことがあります。

  1. :link
  2. :visited
  3. :hover
  4. :active

覚え方として、母音を抜いたLVHA(LoVe HAte)というニーモハックが有名です。

作成したコード

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フロントエンド1000本ノック 0032</title>
    <style>
      a:link {
        color: blue;
      }
      a:visited {
        color: purple;
      }
      a:hover {
        color: red;
      }
      a:active {
        color: orange;
      }
    </style>
</head>
<body>
    <main>
      <h1>aタグの擬似クラス</h1>

      <a href="#">サンプルリンク</a>
    </main>
    <footer>
      <p>Copyright 2025</p>
      <p>フロントエンド1000本ノック</p>
    </footer>

</body>
</html>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?