コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。itこれからCSSを勉強してみたいと考えている方向けに、超簡単に噛み砕いて解説しています。どんな感じなのかなぁ~、くらいの興味でオッケーです。今回はCSSの疑似クラスについて書いています。基本セレクターに加え、疑似クラスを上手く使えると、効率的に書けるだけでなく、さらに表現の幅も広がります。OK】CSS基本セレククターの種類と書き方を基礎から解説2022.08.15フエル「もう知ってるよー」って所は読み飛ばしても大丈夫です。Sheets(カスケーディング・スタイル・シート)の事。webサイトのレイアウト文字の色など、見た目を調整する役割として使います。HTMLは文章構造を構築する役割を担っています。例えるなら「本」と同じです。まとめ:疑似クラス編CSSセレクターとは(CSSの基礎・HTMLの予備知識)CSSは、HTMLで作られた構造に対して文字の色やレイアウトの指定など、見た目の調整を行うもの。その調整をどこにするのかを指定する時に使うのが「CSSセレクター」です。HTMLとCSSはそれぞれ役割が違うんだねこの記事では「CSS疑似クラス」というものを説明していきます。「もう知ってるよー」って方は、「CSS疑似クラスとは?」の項目へどうぞ予備知識:HTMLの構造CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。HTMLはタグと呼ばれる記号で構成されています。開始タグと終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。この開始タグから終了タグで囲われた所を「要素」といいます。タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。後で紹介する「id」や「class」も、「属性」と「属性値」になります。要素をタグで囲むことも出来ます。「入れ子」と言ったりもします。下の図だと、三つの要素は階層構造になっています。外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。サンプルでは<div>が親要素。上にさかのぼって行けば<html>が親要素になります。CSSの基本文法CSSは、「セレクター」「プロパティ」「値」の3つで構成されています。セレクターで指定する事により、デザインの適用先を選択しています。フエルCSSを適用する事を、「CSSを掛ける」と言ったりするよ。CSS疑似クラスとは?擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。文章構造にある情報によってスタイルを変化させることができます。CSSにおける疑似クラスはセレクタに付加するキーワードのことで、選択される要素の特定の状態のスタイルを指定するものです。CSS疑似要素とのちがい疑似要素は、要素の特定の部分にスタイルを適用するために使用します。リンクに関する疑似クラス実は普段何気なく押しているリンクも疑似クラスです。リンクは何も装飾をしていない場合、青色のテキストと下線がひかれた状態で表示されます。多くの場合、サイトのイメージに合わない為、何かしらの装飾を加えている場合が多いです。リンクには記述する順番があるリンクの疑似クラスは関連するものを入れて全部で4つあります。記述する順番が決まっているので気を付けましょう。表示結果は、分かり易いようにタグを付けて表示しているよ。1.a:link(未訪問時の要素へ指定):link疑似クラスは、まだ訪問されていない要素に対してスタイルを指定します。対象は<a>、<area>、<link>など、href属性を持つ未訪問の要素です。#0FB813;}2.a:visited(訪問済みの要素へ指定):visited疑似クラスは、ユーザーがすでに訪問したリンクに対してスタイルを指定します。#ff3c07;}3.X:hover(マウス等がホバーした要素へ指定):hover疑似クラスは、要素に対してマウス等のポインターがホバーした時のスタイルを指定します。画像や通常のテキスト等、リンク以外にもスタイルを適用できます。#f7a51b;}4.X:active(アクティブな状態の要素へ指定):active疑似クラスは、まだ訪問されていない要素に対してスタイルを適用します。対象は<a>、<button>要素で使われます。#00bce9;}「何番目か」絞り込んだ要素に適用する疑似クラスリストや見出し等、同じ要素が沢山ある時に「絞り込んでスタイルを適用させたい時」に使うと凄く便利です。5.X:first-child(兄弟要素の中で最初の要素に指定)よくある使い方は、リストに付けた一番最初の下線やグローバルナビの区切り線を消したり、最初の要素だけ色の変更や余白の調整をするなどですね。ポイントは、同じ階層の一番最初の要素であるという事。#00bce9;}6.X:last-child(兄弟要素の中で最後の要素に指定)5.のfirst-childと真逆で、リストに付けた一番最後の下線やグローバルナビの区切り線を消したり、最後の要素だけ色の変更や余白の調整をする場合などで使います。ポイントは、同じ階層の一番最後の要素であるという事。#00bce9;}7.X:nth-child(odd,even)(兄弟要素の中で偶数行もしくは奇数行に指定)nth-child(odd)、nth-child(even)は、それぞれ偶数行、奇数行に対してスタイルを適用できます。テーブルとかリストの背景をストライプ状にする時なんかに便利です。#00bce9;}8.X:nth-child(An+B)(兄弟要素の中でn番目の要素か絞り込んで指定)リスト中の「An+B」番目の要素に対してスタイルを指定します。n番目のnは0番目からカウントします。9番目[=(3×2)]のように指定できます。7番目[=(3×2)+1]のように指定できます。今回は良く使う疑似クラスを紹介いたしました。他にもまだ沢山の疑似クラスがあるのですが、使い勝手などを考えると他のセレクターで代用してもいいのかなと思います。言え、どうしても効率的にスタイルを掛けるのが難しい時はマニュアルを検索してみて下さいね。この他にもセレクターはあるのでこの記事と合わせてご覧ください。css検索:FUERU(フエル)ウェブデザイナーが知識と経験をもとに、制作やSEO対策、ITスキルについて解説・発信するブログ。デザイン・コーディングからSEO対策やライティングなど幅広くWEB制作をしています。スキルアップして仕事に活かしましょう。コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。