コーディングでよく使用するCSSの擬似クラスを習得しよう

Webデザイナーがよく使うCSS擬似クラス

今回は、HTML+CSSのコーディングの際によく使用する擬似クラスについて習得していきましょう。擬似クラスというのは、CSSのセレクタの後に:(コロン)をつけて指定する事で、クリックした時、マウスオーバーした時などの装飾を施す事ができます。

数ある擬似クラスの中でもWebデザイナーがコーディングの際によく使うものをピックアップしてまとめてみました。参考にしていただければ幸いです。

 

1.Webデザイナーがコーディングでよく使うCSSの擬似クラス

1-1.要素のマウスオーバーを指定する(:hover)

マウスオーバー時の装飾を指定出来ます。主にテキストリンクに指定します。

See the Pen ZaMpyW by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-2.要素のクリック時を指定する(:active)

クリック時の装飾を指定出来ます。こちらもテキストリンクに使用する事が多いです。以下はクリックすると赤のテキストになります。

See the Pen OOoRjd by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-3:最初の要素のみを指定する(:first-childまたは:first-of-type)

最初の要素を指定する事が出来ます。

See the Pen JOaRvO by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-4:最後の要素のみを指定する(:last-childまたは:last-of-type)

最後の要素を指定する事が出来ます。

See the Pen ZaMpRB by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-5.何番目の要素のみを指定する(:nth-child(n))

〜番目の要素を指定する事が出来ます。nの部分を数字にすると指定出来ます。以下は最初から5番目のテキストの色が変わっている事がわかります。

See the Pen bYxwjb by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-6.何番目以降の要素を指定する(:nth-child(n+数字))

要素のX番目以降をすべて指定する事が出来るようになります。以下は3番目以降のテキストカラーが変わっています。

See the Pen LOJRBd by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-7.奇数の要素のみを指定する(:nth-child(odd))

奇数番目の要素すべてに指定する事が出来ます。

See the Pen KyxgxV by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-8.偶数の要素のみを指定する(:nth-child(even))

偶数番目の要素すべてに指定を行う事が出来ます。

See the Pen OOoRoY by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-9:倍数で指定したい (:nth-child(倍数n))

〜の倍数番目の要素の指定を行う事が出来ます。例えば、5番目10番目15番目の要素のみにCSSを適用する。以下は2の倍数番目の要素のテキストカラーが変わっています。

See the Pen eeLdbv by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-10:要素の前に指定したい(:before)

要素の前の指定をしたい場合に便利です。

See the Pen wPEzOv by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

1-11:要素の後に指定したい(:after)

要素の後の指定をしたい場合に便利です。

See the Pen VrGKJV by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

 

まとめ

今回は、Webデザイナーがコーディングの際に特によく使用する擬似クラスについてご紹介させていただきました。

前回ご紹介した「Webデザイナーを目指す人の為のCSSプロパティ入門」「Webデザイナーを目指す人の為のHTML5タグ入門」もあわせてHTML+CSSの勉強を進めていただくと、ほぼコーディングで使用するタグなどはカバー出来ます。ぜひ参考にして下さい。

コメントを残す

Photoshop本で挫折した方必見!! Webデザイナーに必須のPhotoshop力がたった7日で身につく動画講座

STACK DESIGN

一生涯使える人気のスキル!Photoshopを使ったデザイン力がたったの7日間で身につくオンライン動画講座。すべて無料で受講出来ますので、この機会にぜひご活用下さい。

  • デザイナー歴13年のプロが、デザインする時に使うテクニックのみを厳選してわかりやすくご紹介。無駄なテクニックはすべて排除。
  • デザインにかかる作業時間を10倍スピードアップさせるショートカットキーをご紹介。
  • あなたのわからないを現役デザイナーがすべて解決!解決するまで質問し放題です。
  • PC・スマホ・タブレット対応。学校、カフェ、通勤、通学あなたがどこにいても動画で学習出来ます。