初心者きつねコンテンツの前後に別のコンテンツを実装したり、カーソルを当てたら変化するアニメーションを作るにはどうすればいいの？
今回は、擬似要素の代表格とも言えるbeforeやafter、hoverについて解説したり、実際の使い方を見ていきたいと思います。
ちなみに、今回紹介するCSSは、実務でもよく使うので
これから案件を取っていきたい方や、できることの幅を広げたい方はぜひ最後まで読んでくださいね！
擬似要素とは？
擬似要素とは、HTMLのソースコードを変更せずに、スタイルを変更したりコンテンツを追加したりすることができる要素のことです。
HTML構造を変更させたくないけど、指定した要素の前後に変化をもたらしたいときに利用します。
使い方としては、指定したタグやclass名、id名の後ろにコロン（:）を1つ、または2つ付けて擬似要素名を書きます。
例：
nav ul li:hover {
background: red;
}後ほど紹介しますが、「hover」の擬似要素はカーソルを当てた際に変化やアニメーションをさせたいときに使用します。
上の例だと、ホバーしたら背景が赤色になります。
before
beforeは、コンテンツの前に要素を追加する擬似要素です。
beforeで指定されたコンテンツは、指定した要素の子要素の最初にきます。例えば
<h2>お客様の声</h2>というh2があった際、このh2の前に「📢」の絵文字を置きたいとします。
その場合
h2:before {
content: "📢";
}というCSSを当ててあげることによって、下の画像のようにh2で囲まれた「お客様の声」というテキストの前に「📢」
のマークを配置することができます。
この際、検証ツールを見てみるとh2タグの「お客様の声」というテキストの前に「::before」が記載されています。
このように、beforeの擬似要素は指定した要素（今回だったらh2）内の最初に指定されます。
after
afterは、コンテンツの後ろに要素を追加する擬似要素です。
beforeの逆と考えれば理解しやすいですね！
ただ、使い方や考え方としては、beforeの時とほとんど一緒です。
先ほどと同じh2に、今後はafterの擬似要素をつけていきます。
h2:after {
content: "‼️";
}すると、画像のように後ろに赤いエクスクラメーションマークが付きます。
なかなかインパクトがある表現方法ですね。笑
また、こちらも検証ツールを見てみると、今度はh2に指定した後ろにafterの表記が来ています。
このように、afterの擬似要素は指定した要素（今回だったらh2）内の最後に指定されます。
僕が担当したサイト制作の案件の中に、「会社のロゴ画像の後ろに社名も入れてほしい」という要望をもらったことがありましたが、このafterの擬似要素を利用して対応しました。
このように、beforeやafterは実際の案件でも役に立つので、ぜひ覚えておきましょう！
わいただし、imgタグに直接擬似要素をつけることはできないので注意です！
hover
hoverは、カーソルを当てた際に変化やアニメーションをつけるための擬似要素です。
・カーソルを当てた時だけ、ナビゲーションメニューの一部に赤色の背景を付け、テキスト色を白にする
・カーソルを当てたら、対象画像を1.1倍に拡大する
こういった変化を与えたいときにhoverは役立ちます。
例１）カーソルを当てた時だけ、ナビゲーションメニューの一部に背景色を付け、テキスト色も変更する
hoverの擬似要素を使えば、実務や模写コーディングでもよくみる
ホバーした際にだけナビゲーションメニューの特定の要素の背景色やテキストの色を変更することができます。
今回は、4つあるナビゲーションメニューの最後にある「お問い合わせ」の背景色を赤、テキストの色を白に変更したいと思います。
元の状態はこちら（スクショの範囲外ですが、ブラウザの背景も白なので分かりやすいようにヘッダーの背景色に薄いグレーを当てています）。
HTMLはこんな感じです。
<header>
<div class="header_contents">
<div class="header-logo">
<h1>サイトロゴ</h1>
</div>
<nav>
<ul>
<li>私たちについて</li>
<li>制作実績</li>
<li>ブログ</li>
<li class="contact">お問い合わせ</li>
</ul>
</nav>
</div>
</header>CSSはこんな感じ。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background: #efefef;
}
.header-logo {
display: flex;
align-items: center;
}
.header_contents {
display: flex;
}
header nav {
margin-left: auto;
}
header nav ul {
display: flex;
list-style: none;
gap: 20px;
padding: 20px 0;
font-weight: bold;
}
header nav ul li {
padding: 10px;
}
.contact {
transition: .3s;
padding: 10px;
}
.contact:hover {
color: #fff;
background: red;
border-radius: 5px;
}これで、ナビゲーションメニューの「お問い合わせ」というリストだけ、ホバーしたら背景は赤く、テキストは白くなる設定ができました。
実際にアニメーションを見ていきましょう。
うまく実装できてますね。
アニメーションを実装する際は必ずと言っていいほど使う
.contact {
transition: .3s;
}も実装しているので、急に変化するのではなくゆっくり各色が変化していきます。
もしまだtransitionをきちんと理解し切れていない人や、使い方が不安な方は
こちらの記事で自分の認識度合いをチェックしてみてください！
分かりやすいようにヘッダーの背景に薄いグレーを当てているので赤との相関が微妙ですが、こんな感じで特定のリスト要素にだけ背景色やテキストの色を変更するアニメーションを実装することができます。
例２）カーソルを当てたら、対象画像を拡大する
続いては、カーソルが当たったら対象画像を拡大するアニメーションですが、これも良く使います。
今回は、下の画像をhoverを利用してカーソルを当てた時にだけ拡大される仕様にしてみたいと思います。
実際のコードも記載しておくので、自分でもやってみたい方は参考にしてください（画像はご自身でご用意ください、「Dummy Image Generator」などと検索すると、幅と高さを指定して絶対パスで使用できるダミー画像を作れるようなサイトもあります）。
<div class="img-wrapper">
<a href="#">
<img src="./CodeSnow logo.png" alt="CodeSnowロゴ">
</a>
</div>.img-wrapper {
margin: 30px;
}
.img-wrapper:hover {
transform: scale(1.1);
}すると、このようにホバーしたら画像が拡大されます。
最初に見た時は複雑なCSSを当てているのかな？と思った方もいるかもしれませんが、このようにシンプルなCSSから構成されています。
ちなみに、このようなhoverを利用して画像を拡大するCSSも、僕が最初に担当した案件で使用しました。
このように、擬似要素は実務でもよく使うのでぜひ覚えておきましょう！
最後に
ということで、案件でもよく利用する擬似要素の代表格である、beforeやafter、hoverについて解説してきました！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
わい記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれないよ！
＼ 最新情報をチェック ／
コメント