【初心者向け】CSSの疑似クラスの使い方を解説

2021.11.10

CSSの疑似クラスがよくわからない

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

  • CSSの疑似クラスの使い方がわかる

少しずつコーディングに慣れてくるとよく耳にする「疑似クラス」。ただ、説明文だけ読んでも理解は非常にしづらいと思います。

本記事では具体例を中心に説明しますので、是非本記事をお読みいただき理解を深めてください。

CSSの疑似要素とは

疑似クラスの説明の前に、疑似要素について解説します。擬似要素とは、要素の一部に対してスタイルを適用する方法です

早速具体例を見ていきましょう。以下のように1文字目の「1」だけを緑字にしてみましょう。

まず疑似要素を使わない場合、以下の書き方になります。

html
<h3><span>1</span>文字目を装飾します</h3>
css
h3 span {color:green;}

スタイルを変更したい「1」をspanタグで囲い、colorをgreenに指定しています。

もちろんこの書き方でも合ってはいるのですが、いちいちCSSに適用したい内容を書き加える必要があり、コードのメンテナンスが非常に煩雑になってしまいます

webサイトのコンテンツ自体がまだ少ないタイミングでは修正量も少ないので上記で説明した書き方でも問題ないですが、コンテンツが増えてきたり、サイト設計に関わる人が増えてくると一律の方法で修正をすることが非常に難しく、コストも莫大になります

可能な範囲で、汎用的な書き方を心がけましょう。

それでは、ここに疑似要素を使ってみましょう。

html
<h3>1文字目を装飾します</h3>
css
h3::first-letter {color:green;}

このように、「1文字目」という要素を「first-letter」という書き方で指定でき、これを疑似要素といいます。

疑似要素はコロンを2つつけますので、注意してください

first-letterの他に、主な疑似要素としては「first-line(1行目を装飾)」「before(要素の直前に追加)」「after(要素の直後に追加)」があります。

本記事は初心者向けなので1つ1つを細かくは説明しないですが、まずは「first-letter」の書き方を習得すれば他の書き方も理解は容易にできるはずです。

CSSの疑似クラスとは

擬似クラスとは、指定した要素が特定の状態である場合にスタイルを適用させる方法です。

具体例として、「まだクリックされていないリンクを緑色に、1度クリックされたらそのリンクは青色に」してみましょう。

まだクリックされていないリンクを緑色に表示するやり方

html
<div>
<p><a href="#">まだクリックされていないリンクの色を緑色にします。</a></p>
</div>
css
a:link{ color:green;}

上記のように、CSSで「link」を指定することで、まだクリックされていない状態の場合の装飾の指定(今回では文字色を緑色にする)をすることができます。

1度クリックされたらそのリンクは青色にするやり方

それでは、上記のCSSに「1度クリックされたらそのリンクは青色にする」指定を追加していきましょう。

html
<div>
<p><a href="#">まだクリックされていないリンクの色を緑色にします。1度でもクリックされたら青色になります。</a></p>
</div>
css
a:link{ color:green;}
a:visited{ color:blue;}

CSSにvisitedを追加すると、1度でもクリックされたら(=訪問されたら)文字色を青色に装飾する指定ができます。

この、「link」や「visited」を疑似クラスといいます。冒頭で説明したとおり、指定した要素が”特定の状態(今回で言うと、クリックされたかされていないか)”である場合にスタイルを適用しています。

主な疑似クラスは、他に「hover(要素にマウスがホバーした際の指定)」「active(要素がアクティブになった際の指定)」があります。

まとめ

いかがでしたでしょうか。疑似要素、疑似クラスの基本的な例を紹介しました。

コーディングに少しずつ慣れてくると、次のステップに進むためにクラスの習得は欠かせません。是非本記事をきっかけに、理解を深めてください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5