この記事は人間が書きました
はじめに
こんにちは、赤神です!
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
擬似クラスとは?
擬似クラスとは、要素の特定の「状態」にスタイルを適用するためのものです。リンク(<a>
タグ)には、ユーザーの操作に応じて変化する4つの基本的な状態があります。
-
:link
:まだ一度も訪問していないリンク -
:visited
:一度でも訪問したことがあるリンク -
:hover
:マウスカーソルが上に乗っている状態 -
:active
:リンクをクリックしている最中の状態
重要なルール:LVHA(ラブハ)の順番
これらの擬似クラスを CSS で定義する際には、記述する順番が非常に重要です。以下の順番を守らないと、スタイルが正しく適用されないことがあります。
:link
:visited
:hover
: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>