HTML5で定義された擬似クラスを現役デザイナーが解説【初心者向け】
初心者向けにHTML5で定義された擬似クラスについて解説しています。擬似クラスを使うと指定の条件にある要素にスタイルを適用することができます。擬似クラスの一覧とそれぞれの適用範囲、利用した場合のスタイル適用状態を確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTML5で定義された擬似クラスについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTML5で定義された擬似クラスについて詳しく説明していくね！
お願いします！
疑似クラスとは
擬似クラスは指定された要素に対して何か特定のアクションを起こしたり、要素の特定の個所にだけ特別なスタイルを当てたいときなどに使用します。よく見かけるのが、要素:hoverですよね。これは、特定の要素に対してマウスオーバーされたときは別のスタイルを当てますよ、というときに用います。
言い換えると「要素」が「●●の場合」と指定してあげる、ということになります。
HTML5で定義された擬似クラスについて
疑似クラスについては下記のようなものがHTMLの中で定義されています。
- :link クリックされていない場合のリンクのスタイルを指定する
- :visited 一度でもクリック済みのリンクのスタイルを指定する
- :active クリックした瞬間のスタイルを指定する
- :hover 要素内にカーソルが載った場合のスタイルを指定する
- :focus タッチデバイスでタップしたり、tabキーで移動した時のスタイルを指定する
- :target 指定したIDへのリンクがクリックされた時にあたるスタイルを指定する
- :nth-child(●) すべての要素の●番目にスタイルを指定する
- :nth-last-child(●) すべての要素の最後から数えて●番目にスタイルを指定する
- :nth-of-type(●) 並んでいる要素の●番目にスタイルを指定する
- :nth-last-of-type(●) 並んでいる要素の最後から数えて●番目にスタイルを指定する
- :first-child すべての要素の最初を指定する
- :last-child すべての要素の最後を指定する
- :first-of-type 並んでいるの要素の最初を指定する
- :last-of-type 並んでいる要素の最後を指定する
- :not(要素A) 要素A以外のものにスタイルを指定する
- :enabled 選択、クリック、入力などがされた要素を指定する
- :checked チェックボックスにチェックが付いたときのスタイルを指定する
疑似クラスを使ってみよう
いろいろありますが、初心者でもよく使うhoverを用いて、コードを書いてみましょう。
HTML
<div class="hoge">マウスを上に当てると黒から赤に変わるよ</div>
CSS
.hoge{
color:#000;
}
.hoge:hover{
color:red;
}
特にhoverはよく使う疑似クラスですし、初心者でも簡単に使うことができるので是非覚えておきたいですね。
監修してくれたメンター
| メンター増田直子
40歳直前までHTMLの存在すら知らなかったのですが、 現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
