最も有名な擬似クラスの例

擬似クラスで最も有名なものといえば、「リンクの上にカーソルを乗せると色が変わる」という機能。この機能はたくさんのサイトで使われているのを見かけますよね。さてこの機能、具体的に何をしているのかというと、a要素に擬似クラスをくっつけてアクションが起こった時の動きをCSS上で振り分けています。こうすると、未訪問リンクや訪問済リンク、ポイント時、選択時にそれぞれ色を変えたり色々なスタイルを適用する事ができるんですね。 参考記事：TAG index http://www.tagindex.com/stylesheet/basic/format5.html

さてこんな便利な擬似クラスや擬似要素ですが、基礎編ではこれは一体何？というところから簡単な使用例までをご紹介していこうと思います。

【関連記事】：これ全部CSS!?驚くほど自由自在なCSSアニメーション20選

これ全部CSS!?驚くほど自由自在なCSSアニメーション20選


擬似要素・擬似クラスとは？

擬似要素や擬似クラスは何が便利なの？

HTMLやCSSには色々な要素(タグ)やプロパティが用意されていますが、例えば上記の例のようなリンクにカーソルを乗せた時に○○をする等の動きは、従来のそれでは実現できませんでした。もしくは、長くて面倒なコードを書かなければいけませんでした。最初の文字だけにスタイルを適用する:first-letterなどがいい例でしょう。こういった、今まで出来なかった事が出来るようになった、もしくは今まで面倒だった事が簡単に出来るようになった、というのが擬似要素や擬似クラスのいいところです。

擬似要素の特徴

擬似要素の特徴は、「最初の一文字」や「最初の一行」のような要素の一部分に対して、スタイルを指定したり文字や画像を追加できる事です。前述の:first-letterでは、適用した要素の最初の文字にだけスタイルを適用する事ができます。

【従来】 ```:javascript [html title="HTML"]

Code部

[/html]

```:javascript
[css title="CSS"]
h1 {color: #696969; font-size: 17px;}
.first-letter{color: #0099ff;}
[/css]

従来はこのようにspan要素を使って最初の文字のスタイルを個別に設定してやっていました。

【擬似要素:first-letter】

[html title="HTML"]

<h1>Code部</h1>

[/html]

[css title="CSS"]
h1 {color: #696969; font-size: 17px;}
h1:first-letter{color: #0099ff;}
[/css]

従来と結果は同じですが、擬似要素:first-letterを利用すると、HTMLにコードを書き加える必要がなく、より短いコードで簡単にコーディングできるのが嬉しいところです。

擬似クラスの特徴

擬似クラスは「マウスオーバー」や「訪問済リンク」のような特定の状態にある要素全体に対して、スタイルが適用できるようにするものです。有名なのがリンクの挙動ですね。通常時やオンカーソル(マウスオーバー)時、選択中や訪問先リンクなどリンクの状態によって色などのスタイルを変える事ができます。最も有名な例である「リンクの上にカーソルを乗せると色が変わる」では、擬似クラス:hoverを適用することで、オンカーソル時のスタイルを適用できます。

【擬似クラス:hover】

[html title="HTML"]
<a href="https://blog.codecamp.jp/">リンクはこちらからどうぞ</a>
[/html]

[css title="CSS"]
a {color:#a9a9a9;}
a:hover {color:#0099ff;}
[/css]

こういった特殊な動きは従来のHTMLやCSSだけでは表現できませんでした。擬似クラスがある事によって表現でき、より直感的でユーザーにわかりやすいホームページが制作できるようになりました。

【関連記事】：HTML初心者がおさえておきたい基本と学習方法

HTML初心者がおさえておきたい基本と学習方法

基礎知識を抑えれば他のプログラミング言語より簡単にできる…その敷居の低さがHTML/CSSの魅力だったりします。 今回はそんな基礎知識などHTML/CSSの入門知識を解説していきますね！ ちなみにこの内容は実際のレッスンで使用している教科書に沿った内容なので、CodeCampのレッスンがどんな感じなのかのイメージも掴んで頂けると嬉しいです。

擬似要素・擬似クラスの基本的な使用例

とは言え、概要の説明だけではちょっとわかりにくいかもしれません。ここからは実際に基本的な使用例を見ながら、擬似要素と擬似クラスのイメージを掴んでいきましょう。ご紹介できるのは一部ですが、どれも便利なものばかりです。

擬似要素の代表的な例

要素:first-line

要素の一行目にだけ擬似要素を適用する事ができます。例では一行目だけfont-sizeを180%に設定してみました。同じ<h1>内で文字の大きさを変えることができるのは、コーディング上とっても便利です。

[html title="HTML"]

<h1>Code部
〜プログラミング初心者を応援するメディア〜</h1>

[/html]

[css title="CSS"]
h1 {color: #696969; font-size: 17px;}
h1:first-line{font-size: 180%;}
[/css]

要素:before { content : 値 ; }

要素の前に画像や文字を挿入する事ができます。例では矢印のアイコンを挿入してみました。普通に画像を挿入してもいいのですが、HTMLのソースがごちゃつくので、擬似要素の:beforeを使った方がスマートにコーディングができます。

[html title="HTML"]

<a href="https://blog.codecamp.jp/">リンクはこちらからどうぞ</a>

[/html]

[css title="CSS"]
a:before{
    content : url("arrow.gif");
    vertical-align:middle;
}
[/css]

要素:after { content : 値 ; }

beforeとくれば、もちろんafterもあります。例ではNEWアイコンをリンクの後ろに挿入してみました。こちらもソースがすっきりするのが良い所です。

[html title="HTML"]

<a href="https://blog.codecamp.jp/">リンクはこちらからどうぞ</a>

[/html]

[css title="CSS"]
a:after{
    content : url("new.gif");
    vertical-align:middle;
    margin-left:5px;
}
[/css]

擬似クラスの代表的な例

リンク擬似クラス

擬似クラスの中でも特に呼び方のある擬似クラスのひとつが、このリンク擬似クラス。リンク要素であるa要素に適用するのですが、a:linkとa:visitedがこれに該当します。リンクの状態を判別してくれるこの擬似クラス、a:linkが未訪問状態のリンクでa:visitedが訪問済み状態のリンクとなります。

[css]
a:link {color:#a9a9a9;}    /*　未訪問リンクの文字色を変える */
a:visited {color:#330066;} /*　訪問済リンクの文字色を変える */
[/css]

ダイナミック擬似クラス

こちらも特に呼び方のある擬似クラスのひとつ、ダイナミック擬似クラス。こちらは要素のアクションの状態を判別してくれ、リンク要素であるa要素に適用します。a:hoverやa:activeがこれに当たり、a:hoverはカーソルが当たった状態のリンク、a:activeは選択中のリンク。

[css]
a:hover {color:#0099ff;}   /*　ポイント時のリンクの文字色を変える */
a:active {color:#666699;}  /*　選択中のリンクの文字色を変える */
[/css]

リンク擬似クラスとダイナミック擬似クラスは組み合わせて使う事が多いのですが、処理順によって正しく動作しない場合があるので順番が決まっている事もご紹介しますね。正しい処理順は「:link,:visited,:hover,:active」の順になります。

[css]
a:link {color:#a9a9a9;}    /*　未訪問リンクの文字色を変える */
a:visited {color:#330066;} /*　訪問済リンクの文字色を変える */
a:hover {color:#0099ff;}   /*　ポイント時のリンクの文字色を変える */
a:active {color:#666699;}  /*　選択中のリンクの文字色を変える */
[/css]

他にもたくさん擬似要素や擬似クラスはあるのですが、ブログ記事だけでは紹介しきれませんね！さて、そんな擬似要素や擬似クラスは覚えておくとホームページの見栄えが良くなるだけでなく、コーディングが楽になったりソースが綺麗になったりと嬉しい事が沢山あります。さらに、擬似要素や擬似クラスのスゴいところはこれだけではありません。なんとデザインにも応用できるスゴいところが！次回の記事では、擬似要素と擬似クラスをさらに応用したカッコいいデザインへの活用法をご紹介しますので、そちらもお楽しみに！