2.1 擬似クラス :hover
状態擬似クラスは、ユーザーとのインタラクションや現在の状態に基づいて要素にスタイルを適用することを可能にします。これらの擬似クラスは、ユーザーインターフェースを改善し、ユーザーのアクションに対する視覚的なフィードバックを提供するためによく使用されます。
擬似クラス:hoverは、ユーザーがマウスカーソルを要素に乗せたときに適用されます。
シンタックス:
セレクタ:hover {
プロパティ: 値;
}
例:
この例では、リンクにカーソルを合わせたときに色が変わり、下線が追加され、ボタンの背景色とテキストが変わります。
/* リンクにカーソルを合わせたときのスタイル */
a:hover {
color: red;
text-decoration: underline;
}
/* ボタンにカーソルを合わせたときのスタイル */
button:hover {
background-color: #3498db;
color: white;
}
2.2 擬似クラス :focus
擬似クラス:focusは、フォーム要素をクリックするか、Tabキーを使って移動したときなど、要素がフォーカスを受け取ったときに適用されます。
シンタックス:
セレクタ:focus {
プロパティ: 値;
}
例:
この例では、入力フィールドはフォーカス時に境界線の色が変わりアウトラインが消えます。テキストエリアは背景色が変わります。
/* 入力フィールドのフォーカス時のスタイル */
input:focus {
border-color: blue;
outline: none;
}
/* テキストエリアのフォーカス時のスタイル */
textarea:focus {
background-color: #f0f0f0;
}
2.3 擬似クラス :active
擬似クラス:activeは、ユーザーが要素をアクティブにするとき、例えばマウスボタンを押した瞬間に適用されます。この擬似クラスは、インターフェース要素をクリックするときの視覚的なフィードバックを作成するためによく使用されます。
シンタックス:
セレクタ:active {
プロパティ: 値;
}
例:
この例では、リンクがクリックされた瞬間に色が変わります。ボタンは背景色が変わり、少し縮小され、クリックエフェクトが作成されます。
/* リンクがクリックされた瞬間のスタイル */
a:active {
color: green;
}
/* ボタンがクリックされた瞬間のスタイル */
button:active {
background-color: #2980b9;
transform: scale(0.98);
}
2.4 擬似クラス :visited
擬似クラス:visitedは、ユーザーがすでに訪問したリンクに適用されます。これにより、訪問済みリンクを未訪問のリンクと異なる方法でスタイリングすることができます。
シンタックス:
セレクタ:visited {
プロパティ: 値;
}
例
この例では、訪問済みのリンクが紫色に変わり、未訪問のリンクと区別されます:
/* 訪問済みリンクのスタイル */
a:visited {
color: purple;
}
2.5 擬似クラスの組み合わせ
状態擬似クラスを組み合わせて、複雑なインタラクティブスタイルを作成することができます。例えば、リンクの状態に応じて異なるスタイルを設定できます。
例: 完全な実装
この例では、リンクの状態に応じてスタイルが変わります: 基本状態、訪問済みリンク、リンクのホバー時、クリックされた瞬間のリンク:
/* リンクの基本スタイル */
a {
color: blue;
text-decoration: none;
}
/* 訪問済みリンクのスタイル */
a:visited {
color: purple;
}
/* リンクのホバー時のスタイル */
a:hover {
color: red;
text-decoration: underline;
}
/* リンクがクリックされた瞬間のスタイル */
a:active {
color: green;
}
GO TO FULL VERSION