1. 擬似クラス（Pseudo-classes）の役割

HTMLの特定のタグに対して「マウスカーソルが重なった時」や「ボタンがクリックされている最中」など、特定の**『状態』**に対してのみスタイルを適用したい場合があります。この仕組みを 擬似クラス と呼びます。

セレクタの直後にコロン : を付けて記述します。代表的な擬似クラスは以下の通りです。

• :hover: マウスカーソルが要素の上に重なっている状態（PCでのホバー表現に不可欠）。
• :active: 要素がクリックされ、押し込まれている瞬間の状態。
• :focus: テキスト入力欄にカーソルが入り、入力状態になっている時。

2. 滑らかな変化を生み出す transition

通常、CSSのスタイル（色や大きさなど）がホバー時に切り替わる際、一瞬でパチッと変化してしまいます。これだとデザインが唐突で安っぽく見えてしまいます。

これを防ぐのが `transition` プロパティ です。変化にかける秒数を指定することで、スタイルがじんわりと滑らかに移り変わる高級感のあるマイクロインタラクションが作成できます。

3. @keyframes と animation プロパティ

ユーザー操作（ホバー）に関係なく、ローディング画面のように要素をループ回転させたり、フェードインさせたりし続けたい場合は、CSSの本格的なアニメーションシステムを使用します。

まず、`@keyframes` というルールを使ってアニメーションのコマ割り（0%時点の状態から100%時点の状態まで）を定義し、それを適用したい要素に対して `animation` プロパティで紐付けます。

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner {
    animation: spin 1s linear infinite; /* 1秒で無限ループ回転 */
}

4. ホバーで少し浮き上がるプレミアムボタン

以下のCSSを指定すると、マウスを乗せた時にボタンが少し浮き上がり（陰が濃くなり）、クリックした時には少し押し込まれる心地よいデザインが作成できます。

.interactive-btn {
    background-color: #10b981;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    transition: all 0.2s ease;     /* 変化を0.2秒に滑らか化 */
}

.interactive-btn:hover {
    transform: translateY(-2px); /* 2px上に浮き上がらせる */
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4); /* 影を濃くする */
}

.interactive-btn:active {
    transform: translateY(0);    /* クリック時は元の高さに戻す */
}

5. まとめと次回予告

第9回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

• 擬似クラスを使うことで、要素の特定の「状態（ホバー、クリックなど）」へスタイルを割り当てられる。
• `transition` を設定することで、状態が変化する際のアニメーションを驚くほど滑らかに演出できる。
• ループアニメーションや自動フェードは `@keyframes` でタイムラインを定義して `animation` で紐づける。

次回（第10回）は、本講座の集大成となる最終実践講義「実践！自己紹介サイトの装飾」です。HTML最終回で記述したポートフォリオページに、これまでに学んだCSSのすべてを適用して美しいサイトを完成させます。お楽しみに！