6日でできる 新HTML&CSS入門｜擬似クラスと擬似要素の基本
状態に反応するCSS、前後に足せるCSS。
擬似クラスと擬似要素を使って、動きと装飾のあるWebページを作ろう。
Webページのデザインでは、HTMLに書かれているタグやclassだけを指定してスタイルを当てることができます。たとえば、buttonに背景色を付けたり、pに文字色を指定したり、classを使って特定の要素だけ見た目を変えたりできます。
しかし、実際のWeb制作では、それだけでは足りない場面があります。たとえば、ボタンにマウスを乗せたときだけ色を変えたい、入力欄をクリックしたときだけ枠線を目立たせたい、リストの最初の項目だけ別の色にしたい、テキストの後ろに小さなラベルを付けたい、といった場面です。
このような「状態」や「位置」、または「要素の前後に追加する見た目」をCSSで表現するときに使うのが、擬似クラスと擬似要素です。
擬似クラスは、要素が特定の状態になったときや、特定の条件に当てはまるときにスタイルを適用する仕組みです。たとえば:hoverは、マウスが要素に乗ったときに使います。:focusは、入力欄などが選択されたときに使います。
一方、擬似要素は、HTMLに直接書いていない仮想的な要素をCSSで作る仕組みです。::beforeや::afterを使うと、要素の前や後ろに文字や記号のような装飾を追加できます。
この記事では、擬似クラスと擬似要素の違い、基本的な書き方、よく使う種類、実際のサンプルコードを使った動きの確認まで、初心者にも分かりやすいように順番に解説していきます。
擬似クラスとは何か
擬似クラスは、HTML要素の状態や条件に応じてCSSを適用するための記法です。通常のセレクタでは、タグ名、id、classなどを使って要素を選びます。擬似クラスでは、それに加えて「どのような状態のときか」「何番目の要素か」といった条件を指定できます。
擬似クラスは、セレクタの後ろに:と名前を付けて書きます。
セレクタ:擬似クラス {
プロパティ: 値;
}たとえば、buttonにマウスを乗せたときだけ背景色を変えたい場合は、次のように書きます。
button:hover {
background-color: #bbdefb;
}この指定では、通常時のbuttonではなく、マウスが乗っている状態のbuttonだけにスタイルが適用されます。
擬似クラスを使うと、HTMLに新しいclassを追加しなくても、ユーザーの操作や要素の位置に合わせてスタイルを変えられます。これにより、Webページに自然な反応や見やすい強調を加えられます。
図1：擬似クラスは状態に応じてスタイルを変える
この図から分かること
擬似クラスを使うと、通常の状態だけでなく、マウスが乗ったとき、クリックされたとき、入力欄が選択されたときなど、特定の状態に応じてCSSを適用できます。HTMLを増やさなくても、ユーザーの操作に合わせた見た目の変化を作れるところが大きな特徴です。
よく使う擬似クラス
擬似クラスにはいろいろな種類があります。まずは、Web制作でよく使われるものを整理しておきましょう。
| 擬似クラス | 主な用途 | 書き方の例 |
|---|---|---|
| :hover | マウスが要素に乗ったとき | a:hover |
| :active | クリック中など、要素がアクティブなとき | button:active |
| :focus | 入力欄などが選択されたとき | input:focus |
| :visited | リンクが訪問済みのとき | a:visited |
| :first-child | 親要素の中で最初の子要素 | li:first-child |
| :last-child | 親要素の中で最後の子要素 | li:last-child |
| :nth-child() | 親要素の中で指定した順番の子要素 | li:nth-child(2) |
| :not() | 指定した条件に当てはまらない要素 | p:not(.note) |
この中でも、:hover、:focus、:first-child、:nth-child()は特によく使います。ボタンやリンクに反応を付けたり、リストの特定の項目だけ装飾したり、表の行を交互に色分けしたりするときに役立ちます。
:hoverはマウスが乗ったときの状態を指定する
:hoverは、マウスカーソルが要素の上に乗ったときに適用される擬似クラスです。リンクやボタンに使うと、ユーザーが「ここは操作できる場所だ」と気づきやすくなります。
たとえば、ボタンにマウスを乗せたときに背景色を変えると、クリックできることが分かりやすくなります。
ファイル名： lesson35_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>擬似クラス hover の確認</title>
<style>
.contact-button {
padding: 10px 24px;
background-color: #f7f7f7;
border: 2px solid #64b5f6;
color: #1565c0;
font-size: 1.08em;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.contact-button:hover {
background-color: #bbdefb;
color: #0d47a1;
}
</style>
</head>
<body>
<button class="contact-button">お問い合わせする</button>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、通常時のボタンは薄いグレーの背景で表示されます。ボタンの上にマウスを乗せると、背景色が淡い青に変わり、文字色も少し濃い青になります。
この変化は、.contact-button:hoverによって指定されています。つまり、class="contact-button"が付いたbuttonのうち、マウスが乗っている状態のものだけにスタイルが適用されます。
transitionを指定しているため、色の変化が急に切り替わるのではなく、少しなめらかに変わります。transitionは必須ではありませんが、ボタンの反応を自然に見せたいときに便利です。
サンプルで使っているCSSの確認
| CSS・属性 | 役割 |
|---|---|
| class | CSSを適用するための名前を要素に付ける |
| :hover | マウスが乗った状態を指定する |
| padding | ボタン内側の余白を作る |
| background-color | 背景色を指定する |
| border | 枠線を指定する |
| color | 文字色を指定する |
| border-radius | 角を丸くする |
| cursor | マウスカーソルの見た目を指定する |
| transition | スタイル変化をなめらかにする |
:hoverは、ユーザー操作に反応する代表的な擬似クラスです。ボタンやリンクのようにクリックできる要素に使うと、操作しやすいWebページになります。
:focusは入力中の場所を分かりやすくする
:focusは、入力欄やボタンなどが選択された状態になったときに適用される擬似クラスです。フォームでとてもよく使われます。
たとえば、入力欄をクリックしたときに枠線を青くすると、今どこに入力しているのかが分かりやすくなります。
input:focus {
border-color: #1976d2;
outline: none;
}フォームでは、ユーザーが入力中の場所を迷わないようにすることが大切です。:focusを使うと、見た目で現在の入力位置を伝えられます。
ただし、outlineを消す場合は注意が必要です。outlineはキーボード操作をしているユーザーにとって重要な手がかりになります。outlineを消すなら、代わりに分かりやすい枠線や影を付けるようにしましょう。
位置で選ぶ擬似クラス
擬似クラスは、ユーザー操作だけでなく、要素の位置を指定するときにも使えます。
たとえば、リストの最初の項目だけ色を変えたい場合は:first-childを使います。最後の項目だけ色を変えたい場合は:last-childを使います。
li:first-child {
color: #388e3c;
}
li:last-child {
color: #e53935;
}この指定では、リストの最初のliが緑色になり、最後のliが赤色になります。
また、:nth-child()を使うと、何番目の子要素かを指定できます。
li:nth-child(2) {
background-color: #f0f0f0;
}この指定では、2番目のliに背景色が付きます。:nth-child(odd)や:nth-child(even)を使えば、奇数行と偶数行を分けて装飾することもできます。
| 指定 | 意味 |
|---|---|
| li:first-child | 最初のli |
| li:last-child | 最後のli |
| li:nth-child(2) | 2番目のli |
| li:nth-child(odd) | 奇数番目のli |
| li:nth-child(even) | 偶数番目のli |
リストや表のように同じ要素が並ぶ場面では、位置で選ぶ擬似クラスがとても便利です。
図2：擬似クラスは位置や条件でも要素を選べる
この図から分かること
擬似クラスは、マウス操作や入力状態だけでなく、要素の位置を指定するときにも使えます。最初の要素、最後の要素、偶数番目の要素などをCSSだけで選べるため、リストや表の装飾に役立ちます。
擬似要素とは何か
擬似要素は、HTMLに直接書かれていない仮想的な要素をCSSで作り、スタイルを適用する仕組みです。代表的なものに::beforeと::afterがあります。
::beforeは、対象要素の中身の前に仮想的な内容を追加します。::afterは、対象要素の中身の後ろに仮想的な内容を追加します。
セレクタ::before {
content: "前に追加する内容";
}
セレクタ::after {
content: "後ろに追加する内容";
}擬似要素を使うと、HTMLを増やさずに装飾用の文字や記号、ラベル、飾り線などを追加できます。
たとえば、注目させたいテキストの後ろに「NEW」という文字を付けたり、見出しの前に小さなマークを付けたりできます。
擬似クラスと擬似要素の違い
擬似クラスと擬似要素は、書き方が似ているため混同しやすいです。大きな違いは、何を選んでいるかです。
擬似クラスは、要素の状態や条件を選びます。たとえば、マウスが乗っている状態、入力欄が選択されている状態、最初の子要素などです。
擬似要素は、要素の一部や前後に作られる仮想的な部分を選びます。たとえば、要素の前に追加する内容、要素の後ろに追加する内容などです。
| 種類 | 書き方の例 | 役割 |
|---|---|---|
| 擬似クラス | button:hover | 要素の状態や条件を選ぶ |
| 擬似クラス | li:first-child | 要素の位置を選ぶ |
| 擬似要素 | .label::before | 要素の前に仮想的な内容を作る |
| 擬似要素 | .label::after | 要素の後ろに仮想的な内容を作る |
見分け方として、:hoverや:first-childのようにコロン1つで書くものが擬似クラス、::beforeや::afterのようにコロン2つで書くものが擬似要素、と覚えると分かりやすいです。
::afterでテキストの後ろにラベルを追加する
次に、擬似要素の::afterを使って、テキストの後ろに小さなラベルを追加する例を見てみましょう。HTMLには「新着情報」とだけ書き、CSSで後ろに「NEW」を追加します。
ファイル名： lesson35_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>擬似要素 after の確認</title>
<style>
.news-label::after {
content: " NEW";
color: #ff9800;
font-size: 0.9em;
font-weight: bold;
}
</style>
</head>
<body>
<span class="news-label">新着情報</span>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、「新着情報 NEW」のように表示されます。HTMLにはNEWという文字を書いていませんが、.news-label::afterのcontentによって、要素の後ろに仮想的な内容が追加されています。
このように、擬似要素を使うと、HTMLを増やさずに装飾用の文字を追加できます。通知ラベル、必須マーク、見出しの飾り、カードのアクセントなどにも応用できます。
擬似要素で使うcontent
::beforeや::afterを使うときに特に重要なのがcontentです。contentは、擬似要素として挿入する内容を指定するCSSです。
.news-label::after {
content: " NEW";
}contentには、文字列を指定できます。また、空文字列を指定して、装飾用の箱や線だけを作ることもあります。
.title::before {
content: "";
display: inline-block;
width: 6px;
height: 16px;
background-color: #1976d2;
}このように、content: "";と書くと、文字は表示しませんが、擬似要素そのものは作れます。そこにwidthやheight、background-colorを指定することで、小さな装飾パーツを作ることができます。
擬似要素で使うdisplay
擬似要素は、初期状態ではインライン要素のように扱われることが多いです。そのため、幅や高さを指定したい場合には、displayを指定することがあります。
.title::before {
content: "";
display: inline-block;
width: 6px;
height: 16px;
background-color: #1976d2;
}display: inline-block;にすると、文章の一部のように並びながら、widthやheightを指定できるようになります。
display: block;にすると、改行されるブロック要素のように扱えます。見出しの下に飾り線を作りたい場合などに便利です。
| displayの値 | 特徴 |
|---|---|
| inline | 文章の一部として表示される |
| inline-block | 横に並びながら幅や高さを持てる |
| block | 改行され、1つのブロックとして表示される |
擬似要素で装飾を作るときは、contentとdisplayをセットで考えると理解しやすくなります。
図3：擬似要素はHTMLにない装飾をCSSで追加できる
この図から分かること
擬似要素を使うと、HTMLに直接書いていない内容をCSSで追加できます。::beforeは要素の前、::afterは要素の後ろに仮想的な内容を作ります。contentを使って文字を追加したり、空のcontentとdisplayを使って装飾用の図形を作ったりできます。
ブロック要素とインライン要素も意識する
擬似クラスや擬似要素を使うときは、対象となる要素の表示形式も意識しておくと分かりやすくなります。HTML要素には、大きく分けてブロック要素とインライン要素があります。
| 要素分類 | 主なタグ例 | 特徴 |
|---|---|---|
| ブロック要素 | <div>、<p>、<ul>、<h1> | 前後で改行され、1つのまとまりとして表示される |
| インライン要素 | <span>、<a>、<strong>、<img> | 文章の一部として横に並ぶ |
たとえば、spanはインライン要素なので、文章の途中に自然に入ります。今回の::afterのサンプルでは、spanの後ろにNEWを追加しています。文章の一部としてラベルを付けたい場合に向いています。
一方で、divやpはブロック要素です。大きな枠やカードのようなまとまりを作るときに使いやすいです。
擬似要素で幅や高さのある装飾を作る場合は、display: inline-block;やdisplay: block;を使って、表示形式を調整すると扱いやすくなります。
擬似クラスと擬似要素でよく使うタグとCSS
擬似クラスや擬似要素は、さまざまなHTML要素と組み合わせて使えます。ここでは、よく使うタグやCSSを整理しておきます。
| タグ・CSS | 説明 |
|---|---|
| <a> | リンクを表す。:hoverや:visitedとよく組み合わせる |
| <li> | リスト項目を表す。:first-childや:nth-child()と相性がよい |
| <button> | ボタンを表す。:hoverや:activeで操作感を出せる |
| <input> | 入力欄を表す。:focusで入力中の見た目を変えられる |
| <span> | 文章の一部を囲む。::beforeや::afterでラベルを追加しやすい |
| :hover | マウスが乗った状態を指定する |
| :active | クリック中などの状態を指定する |
| :focus | 入力欄などが選択された状態を指定する |
| :visited | 訪問済みリンクを指定する |
| :first-child | 最初の子要素を指定する |
| :last-child | 最後の子要素を指定する |
| :nth-child() | 指定した順番や条件の子要素を指定する |
| :not() | 特定の条件を除外して指定する |
| ::before | 要素の前に仮想的な内容を追加する |
| ::after | 要素の後ろに仮想的な内容を追加する |
| content | 擬似要素で挿入する内容を指定する |
| display | 擬似要素の表示形式を調整する |
擬似クラスは、要素の状態や位置を選ぶときに使います。擬似要素は、要素の前後に装飾を追加したいときに使います。それぞれの役割を分けて考えると、混乱しにくくなります。
擬似クラスを使うと操作感が分かりやすくなる
Webページでは、ユーザーが操作できる場所を分かりやすく示すことが大切です。リンクやボタンに何も変化がないと、そこがクリックできる場所なのか分かりにくい場合があります。
:hoverを使って背景色や文字色を変えると、マウスを乗せたときに反応が出ます。:activeを使うと、クリックしている瞬間の見た目を変えられます。:focusを使うと、キーボード操作やフォーム入力中の場所を分かりやすくできます。
このように、擬似クラスは見た目の装飾だけでなく、使いやすさにも関係します。ユーザーが迷わず操作できるようにするための大切なCSSです。
擬似要素を使うとHTMLを増やさず装飾できる
擬似要素の便利なところは、HTMLに装飾用のタグを増やさなくても、CSSだけで見た目を追加できることです。
たとえば、見出しの前に小さな線を付けたい場合、HTMLに装飾用のspanを追加する方法もあります。しかし、装飾のためだけにHTMLを増やすと、構造が少し複雑になります。
::beforeや::afterを使えば、HTMLはシンプルなまま、CSSで装飾を追加できます。
.heading::before {
content: "";
display: inline-block;
width: 6px;
height: 18px;
background-color: #1976d2;
margin-right: 8px;
}このように、擬似要素はラベル、アイコン風の記号、見出しのアクセント、カードの飾りなどに幅広く使えます。
学習するときの確認ポイント
擬似クラスと擬似要素を学ぶときは、まず役割の違いを押さえることが大切です。
| 確認すること | 見るポイント |
|---|---|
| 状態を変えたいのか | :hover、:active、:focusを使う |
| 位置で選びたいのか | :first-child、:last-child、:nth-child()を使う |
| 条件を除外したいのか | :not()を使う |
| 前後に内容を足したいのか | ::before、::afterを使う |
| 擬似要素に何を入れるのか | contentを確認する |
| 幅や高さを持たせたいのか | displayを確認する |
最初は、:hoverでボタンの色を変えるところから始めると分かりやすいです。次に、:first-childや:nth-child()でリストを装飾し、最後に::beforeや::afterで装飾を追加していくと、段階的に理解できます。
擬似クラスと擬似要素を使えるようになると、HTMLを必要以上に増やさずに、状態に応じた見た目や細かな装飾を作れるようになります。CSSだけで表現できる幅が広がり、ボタン、リンク、フォーム、リスト、見出しなどをより分かりやすく、使いやすく整えられます。