10.1 擬似クラス
HTMLとCSSの擬似クラスと擬似要素を使えば、要素の状態や内容に基づいてスタイルを適用することができるよ。追加のクラスを使ったり、HTML文書の構造を変えたりする必要はないんだ。これでインタラクティブで見た目が魅力的なウェブページを作るツールが手に入るね。
擬似クラスは要素の状態や文書の構造内での位置に基づいて適用されるんだ。それで、カーソルが上にある時とか、フォーカスした時とか、色んな状況で要素をスタイリングできるんだよ。擬似クラスはコロン (:)から始まるんだ。
一番簡単な擬似クラスはこんな感じだよ：
擬似クラス :hover はユーザーが要素にカーソルを合わせたときに適用されるよ。
<button type="button">ボタン</button>
button:hover {
color: red;
}
擬似クラス :focus はフォーカスを受けた要素に適用されるんだ。例えば、入力フィールドをクリックしたときとかね。
<input type="text">
input:focus {
outline-color: blue;
}
擬似クラス :active はリンクやボタンをクリックしたときに要素に適用されるんだ。
<button type="button">ボタン</button>
button:active {
background-color: green;
}
擬似クラス :visited はユーザーが訪問したことのあるリンクに適用されるんだ。
<a href="#">リンク</a>
a:visited {
color: purple;
}
10.2 擬似要素
擬似要素は、独立したHTML要素ではない要素の一部をスタイリングするためのものだよ。これらは二つのコロン (::)から始まるんだ。擬似要素を使って、要素の前や後にコンテンツを作ったり、最初の行や最初の文字を強調したり、色々なことをするんだよ。
一番簡単な擬似要素はこんな感じだよ：
擬似要素 ::before は要素のコンテンツ前に内容を挿入するよ。
<p>僕の名前はステパンです。</p>
p::before {
content: "こんにちは！ ";
color: blue;
}
擬似要素 ::after は要素のコンテンツ後に内容を挿入するよ。
<p>注意！</p>
p::after {
content: " 注目してくれてありがとう！";
color: red;
}
擬似要素 ::first-line は要素の最初の行に適用されるんだ。最初の行のテキストだけをスタイリングできるよ。
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
擬似要素 ::selection はユーザーが選択したテキストに適用されるんだ。
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
結果でテキストを選択してみてね。
10.3 擬似要素の使用例
HTMLとCSSの擬似クラスと擬似要素は、要素の状態や内容に基づいてスタイリングするためのすごい機能を提供してくれるんだ。これで、HTMLの構造を変えずに、もっとインタラクティブで視覚的に魅力的なウェブページを作成できるんだよ。
例 1: リンクのテキストの前にアイコンを挿入
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">これはアイコン付きのリンクです</a>
</body>
</html>
例 2: 段落の後にスタイル付きブロックを追加
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>これはテキストの段落です。</p>
</body>
</html>
組み合わせ
擬似クラスと擬似要素は組み合わせて、複雑でパワフルなスタイルを作ることができるんだ。
例: リンクの上でハイライトしたテキストをホバーでスタイリング
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">このテキストを選択して、その後にカーソルを上に動かしてみて。</a>
</body>
</html>
GO TO FULL VERSION