---
title: "擬似クラスとは？hoverやfocusで変化するCSSの基礎"
description: "マウスオーバーで色が変わる、フォーカス時に枠が光る。こうしたインタラクションをCSSだけで実現するのが擬似クラスです。hoverやfocusを中心に動作原理と使いどころ、混同しやすい擬似要素との違いまで説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-pseudo-class"
markdown: "https://giga-site.com/articles/what-is-pseudo-class/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 擬似クラスとは？hoverやfocusで変化するCSSの基礎

ボタンにカーソルを乗せると色が変わる、入力欄を選ぶと枠が光る。こうした操作への反応を作っているのが擬似クラスです。この記事では、hoverやfocusに代表される擬似クラスの仕組みと使いどころ、そして気をつけたい点を、初心者向けにやさしく説明します。

> Source HTML: https://giga-site.com/articles/what-is-pseudo-class
> Article index: https://giga-site.com/articles/index.md

## 擬似クラスとは何か

擬似クラスは、要素の状態や位置に応じてスタイルを当てるための仕組みです。HTMLにクラスを書き足さなくても、「カーソルが乗っているとき」「選択されているとき」といった状況を条件にできます。

セレクタの後ろにコロンと状態名を付けて書きます。利用者の操作に反応する動きを、JavaScriptを使わずCSSだけで表現できるのが特徴です。

## よく使う擬似クラス

代表格がhoverです。マウスカーソルが要素の上にあるときにスタイルが適用され、ボタンやリンクの反応を作るのに使われます。

focusは入力欄などが選ばれているとき、activeはクリックされている瞬間に当たります。これらを組み合わせると、操作の手応えが伝わる自然なインターフェースになります。

## 実務ではどこで関係する？

擬似クラスは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

擬似クラスについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## アクセシビリティとfocus

focusはマウス操作だけでなく、キーボードでの操作にも深く関わります。Tabキーで項目を移動する利用者にとって、今どこを選んでいるかが分かることはとても重要です。

見た目を整えるためにfocusの枠線を消してしまうと、キーボード利用者が現在地を見失います。デザインと操作のしやすさの両立を意識して、状態が分かる表示を残すことが大切です。

## 擬似クラスを使う手順

ボタンにカーソルを乗せたときの変化を付ける基本的な流れを示します。

1. スタイルを変えたい要素にまず通常時のスタイルを当てる
2. 同じセレクタにコロンとhoverを付けた指定を追加する
3. hover時に変えたい色や背景などを書く
4. 必要に応じてfocusやactiveの状態も同様に追加する
5. マウスとキーボードの両方で動きを確認する

## やりすぎに注意

状態に応じた変化は操作感を高めますが、変化が大きすぎたり多すぎたりすると、かえって読みづらく落ち着かない印象になります。色や影をほんの少し変える程度でも十分に手応えは伝わります。

また、スマホなどタッチ操作の端末ではhoverが効きにくい点にも注意が必要です。hoverだけに頼らず、見て分かる表示と組み合わせて設計するとよいでしょう。

## 操作感を実機で確認したいとき

hoverやfocusの動きは、コードを眺めるだけでは伝わりません。実際にマウスを乗せ、キーボードで操作して初めて感触が分かります。関係者にも触って確かめてもらいたい場面です。

ギガサイト便はHTMLやCSSを含むZIPをドロップすると共有URLを発行でき、URLを開けばその場で操作を試せます。同じURLのまま中身を差し替えられるので、調整した版をすぐ共有し、動きの感触をフィードバックしてもらえます。

## よくある質問

### 擬似クラスとクラスは何が違うのですか

通常のクラスはHTMLに名前を書いて指定しますが、擬似クラスはHTMLを変えずに状態や位置を条件にスタイルを当てます。hoverやfocusのように、操作に応じて自動で切り替わる点が大きな違いです。

### スマホでもhoverは効きますか

タッチ操作の端末ではhoverが効きにくく、意図どおり反応しないことがあります。スマホ利用者のためにも、hoverだけに頼らず見て分かる表示と組み合わせて設計するのが安全です。

### focusの枠線は消してもよいですか

見た目のために消すのは避けたほうがよいです。キーボードで操作する利用者が現在地を見失ってしまいます。消す場合は、代わりに分かりやすい別の表示を用意してください。

### 状態変化はどのくらい付けるとよいですか

控えめがおすすめです。色や影をわずかに変える程度でも操作の手応えは十分伝わります。変化が大きすぎると落ち着かない印象になるため、やりすぎない方が見やすくなります。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [擬似クラスとは？:hoverや:first-childでスタイルを切り替える基礎](https://giga-site.com/articles/pseudo-class-term/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "擬似クラスとは？hoverやfocusで変化するCSSの基礎",
  "description": "マウスオーバーで色が変わる、フォーカス時に枠が光る。こうしたインタラクションをCSSだけで実現するのが擬似クラスです。hoverやfocusを中心に動作原理と使いどころ、混同しやすい擬似要素との違いまで説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-pseudo-class",
  "url": "https://giga-site.com/articles/what-is-pseudo-class",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "擬似クラスとクラスは何が違うのですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "通常のクラスはHTMLに名前を書いて指定しますが、擬似クラスはHTMLを変えずに状態や位置を条件にスタイルを当てます。hoverやfocusのように、操作に応じて自動で切り替わる点が大きな違いです。"
      }
    },
    {
      "@type": "Question",
      "name": "スマホでもhoverは効きますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "タッチ操作の端末ではhoverが効きにくく、意図どおり反応しないことがあります。スマホ利用者のためにも、hoverだけに頼らず見て分かる表示と組み合わせて設計するのが安全です。"
      }
    },
    {
      "@type": "Question",
      "name": "focusの枠線は消してもよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "見た目のために消すのは避けたほうがよいです。キーボードで操作する利用者が現在地を見失ってしまいます。消す場合は、代わりに分かりやすい別の表示を用意してください。"
      }
    },
    {
      "@type": "Question",
      "name": "状態変化はどのくらい付けるとよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "控えめがおすすめです。色や影をわずかに変える程度でも操作の手応えは十分伝わります。変化が大きすぎると落ち着かない印象になるため、やりすぎない方が見やすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```