レッスン7: CSSのちょっと便利な機能！擬似クラスと擬似要素をマスターしよう
擬似クラスと擬似要素を使って、マウスをのせたときの効果や装飾的な要素を作る方法を学びます。
🎯 学習目標
- 擬似クラス・擬似要素の違いと使い方を理解する
- ホバー（マウスをのせたとき）や最初/最後の要素へのスタイル付けを体験する
- 見出しの前に記号をつけたり、ボタンのホバー効果を作ってみる
- 実際のWebサイトでよく使われるテクニックを身につける
📘 目次
📚 レッスン
1. 擬似クラスとは？
擬似クラスは、HTML要素が特定の状態のときにだけスタイルを適用する仕組みです。
「状態」というのは例えば
- マウスが乗っているとき
- 要素が最初の子要素であるとき
- クリックされているとき
HTMLにクラスを追加しなくても、こういう「特定の条件・状態」を指定できるので便利です。
よく使う擬似クラス
| 擬似クラス | 意味 |
|---|---|
:hover |
要素にマウスカーソルが乗っているとき |
:active |
要素がクリックされているとき |
:focus |
要素がフォーカスされているとき（入力中など） |
:first-child |
親要素の中で最初の子要素であるとき |
:last-child |
親要素の中で最後の子要素であるとき |
:nth-child(n) |
親要素の中でn番目の子要素 |
例：ボタンにホバー効果をつける
<style>
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
}
button:hover {
background-color: #0056b3;
cursor: pointer;
}
</style>
<button>送信</button>実際の動作デモ:
↑ マウスを乗せると色が変わります
2. 擬似要素とは？
CSSの擬似要素とは、HTML要素の一部に特定のスタイルを適用するために使われる「疑似的な要素」です。
たとえば、以下のような用途があります。
- 要素の特定部分（たとえば最初の文字、最初の行）にだけスタイルを適用したい
- HTMLには存在しないけど見た目として追加したい装飾を作る（たとえばボックスの前後に装飾）
よく使う擬似要素
| 擬似要素 | 意味 |
|---|---|
::before |
要素の前に内容を追加 |
::after |
要素の後に内容を追加 |
::first-letter |
最初の1文字だけにスタイル |
::first-line |
最初の行だけにスタイル |
例：見出しの前にアイコンを追加する
<style>
h2::before {
content: "📌 ";
color: orange;
}
</style>
<h2>今日のトピック</h2>実際の動作デモ:
今日のトピック
↑ 見出しの前にアイコンが追加されています
重要：
content プロパティを指定しないと ::before や ::after は表示されません。
3. ホバー効果を作ってみよう
実際のWebサイトでよく見るホバー効果を作ってみましょう！
リンクのホバー効果
<style>
.nav a {
padding: 10px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
.nav a:hover {
background-color: #ddd;
color: blue;
}
</style>
<div class="nav">
<a href="#">ホーム</a>
<a href="#">ブログ</a>
<a href="#">お問い合わせ</a>
</div>ボタンのかっこいいホバー効果
<style>
.fancy-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: all 0.3s;
}
.fancy-button:hover {
background-color: #45a049;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
<button class="fancy-button">クリックしてね！</button>実際の動作デモ:
↑ マウスを乗せると色が変わり、少し浮き上がり、影がつきます
4. スムーズなアニメーション効果を作ろう
CSSのtransitionとtransformプロパティを使うと、スムーズなアニメーション効果を簡単に作ることができます。
transitionプロパティ
transitionプロパティは、要素のスタイルが変化する際のアニメーション効果を設定します。
<style>
.button {
background-color: blue;
color: white;
padding: 10px 20px;
/* transitionを設定 */
transition: all 0.3s ease 0s;
}
.button:hover {
background-color: darkblue;
}
</style>| プロパティ | 説明 | 値の例 |
|---|---|---|
transition-property |
アニメーションさせるプロパティを指定 | background-color, all |
transition-duration |
アニメーションの継続時間 | 0.5s, 300ms |
transition-timing-function |
アニメーションの速度変化 | ease, linear, ease-in-out |
transition-delay |
アニメーション開始までの遅延時間 | 0.2s, 100ms |
transition（短縮形） |
上記をまとめて指定 | all 0.3s ease 0s |
ヒント：
transition: all 0.3s;と記述すると、すべてのプロパティの変化が0.3秒かけて滑らかに変化します。
transformプロパティ
transformプロパティは、要素の形状を変形させることができます。回転、拡大縮小、移動などの効果があります。
<style>
.card {
width: 150px;
height: 150px;
background-color: #007bff;
transition: transform 0.3s ease;
}
.card:hover {
/* transformを使って1.1倍拡大、5度回転 */
transform: scale(1.1) rotate(5deg);
}
</style>実際の動作デモ:
マウスを乗せてみて！
↑ マウスを乗せると拡大して回転します
| transform値 | 説明 | 使用例 |
|---|---|---|
scale() |
拡大/縮小 | scale(1.5) - 1.5倍に拡大 |
rotate() |
回転 | rotate(45deg) - 45度回転 |
translate() |
移動 | translateY(-10px) - 上に10px移動 |
skew() |
傾斜 | skew(10deg) - 10度傾斜 |
活用ポイント：
transitionとtransformを組み合わせると、ボタンやカードにホバーした時のエフェクトなど、多彩で魅力的なインタラクションを実現できます。
5. 装飾的な要素を追加しよう
段落の最初の文字を大きくする
<style>
p::first-letter {
font-size: 200%;
color: darkgreen;
font-weight: bold;
}
</style>
<p>これは段落の最初の文字だけを大きくする例です。</p>実際の動作デモ:
これは段落の最初の文字だけを大きくする例です。このように特定の部分だけスタイルを変えることで、より読みやすく魅力的なデザインを作ることができます。
↑ 段落の最初の「こ」だけが大きく、色が変わっています
リストアイテムの前にカスタムマークを追加
<style>
.custom-list li {
list-style: none;
position: relative;
padding-left: 25px;
}
.custom-list li::before {
content: "✓";
color: green;
font-weight: bold;
position: absolute;
left: 0;
}
</style>
<ul class="custom-list">
<li>HTMLを覚える</li>
<li>CSSを覚える</li>
<li>JavaScriptを覚える</li>
</ul>実際の動作デモ:
- HTMLを覚える
- CSSを覚える
- JavaScriptを覚える
↑ 各リストアイテムの前にチェックマークが追加されています
6. 今日のまとめ
| タイプ | 記述方法 | 例 | 用途 |
|---|---|---|---|
| 擬似クラス | :xxx |
a:hover |
状態に対するスタイル |
| 擬似要素 | ::xxx |
p::first-letter |
要素の一部へのスタイル |
ポイント： 擬似クラスと擬似要素は、ページの「ちょっとした見た目改善」に非常に役立ちます。特にホバー効果は、ユーザー体験を大きく向上させることができます！
📚 リファレンス
このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。
✍️ 演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。
演習1：ナビゲーションのホバー効果を作ってみよう！
<style>
.exercise-nav {
display: flex;
gap: 10px;
}
.exercise-nav a {
padding: 10px;
text-decoration: none;
color: #333;
border-radius: 5px;
}
.exercise-nav a:hover {
/* ここにCSSを追加しましょう */
}
</style>
<div class="exercise-nav">
<a href="#">ホーム</a>
<a href="#">ブログ</a>
<a href="#">お問い合わせ</a>
</div>
<style>
.exercise-nav {
display: flex;
gap: 10px;
}
.exercise-nav a {
padding: 10px;
text-decoration: none;
color: #333;
border-radius: 5px;
}
.exercise-nav a:hover {
background-color: #007bff;
color: white;
}
</style>
<div class="exercise-nav">
<a href="#">ホーム</a>
<a href="#">ブログ</a>
<a href="#">お問い合わせ</a>
</div>
解説:
:hover擬似クラスで背景色と文字色を変更しています。これによりナビゲーションのホバー効果が有効になります。- ナビゲーションメニューの背景色や文字色は解答例と違っていてもOKです。
演習2：リストの最初と最後の項目にマークをつけてみよう！
見本
- りんご
- ばなな
- みかん
↑ 最初の項目は緑色に、最後の項目は赤色になっています
<style>
.exercise-list {
list-style: none;
background-color: #fff;
padding: 15px;
}
.exercise-list li {
padding: 8px 0;
border-bottom: 1px dashed #eee;
}
.exercise-list li:first-child {
color: green;
}
.exercise-list li:last-child {
color: red;
}
/* 最初の要素に適用されます */
.exercise-list li:first-child::before {
/* ここにCSSを追加しましょう */
}
/* 最後の要素に適用されます */
.exercise-list li:last-child::after {
/* ここにCSSを追加しましょう */
}
</style>
<ul class="exercise-list">
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
</ul>
<style>
.exercise-list {
list-style: none;
background-color: #fff;
padding: 15px;
}
.exercise-list li {
padding: 8px 0;
border-bottom: 1px dashed #eee;
}
.exercise-list li:first-child {
color: green;
}
.exercise-list li:last-child {
color: red;
}
/* 最初の要素に適用されます */
.exercise-list li:first-child::before {
content: "★ ";
}
/* 最後の要素に適用されます */
.exercise-list li:last-child::after {
content: " ★";
}
</style>
<ul class="exercise-list">
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
</ul>
解説:
::beforeと::after擬似要素を使って、最初と最後の項目にはスター記号を追加しています。- リストには
list-style: none;やborder-bottom: 1px dashed #eee;を使ってモダンなリストスタイリングにしています。
✅ 理解度チェック
クイズに正解すると、このレッスンは「完了済み」として記録されます。
📘 次回予告
次回（レッスン8）はCSSレイアウトのキホン！ボックスモデルを理解しようについて学びます。
要素の幅、高さ、余白、境界線などを制御するボックスモデルの概念を理解して、より正確なレイアウトを作れるようになりましょう！