セレクタ/プロパティ/疑似クラス/疑似要素 CSSの基本を整理！しました

サイトやブログの制作に関わる方なら、普段当たりまえのように記述しているCSS(カスケードスタイルシート)。

今さら感もありますが、私自身の復習も兼ね、セレクタ・プロパティ・疑似クラス・疑似要素といった言葉の意味、その役割を整理しましょう。

※このコンテンツは、CSS2の基礎レベルのみで作成しました。CSS3関連には触れていませんのでご了承ください。

あえて公式的に表すと、、、

逆に混乱を招いてしまうかもしれませんが、あえてCSSの定義を公式みたいに表すと、以下のようになります。

これらの言葉を、例をまじえて解説していきます。

とりあえず基本的な①プロパティを覚えておく。

スポンサードリンク

色・長さ・大きさといったスタイルの種類をプロパティと呼び、基本的なものは覚えておかないと、話にならないかもしれません。

よく使われるプロパティとして、以下が挙げられます。

color, font, background, width, height, padding, margin, text-align, border, line-height, list-style, border, padding, margin, float, clear, vertical-align, text-indent, text-decoration, overflow, display, position, z-indexなど。

②セレクタとは？

スタイルを適用する場所を指定する記述をセレクタと呼び、下記などが おなじみかと。

• div { ○○○:×××;}
• p.className { ○○○:×××;}
• #idName { ○○○:×××;}
• p em { ○○○:×××;}
• a:hover { ○○○:×××;}

要するに、 { の前にある記述が、セレクタです。

ちなみに、
divなどのHTML要素を指定する場合を、基本セレクタ
classを指定する場合は、クラスセレクタ
id指定を、IDセレクタ
p要素の中にあるem要素といった指定を、子孫セレクタ
といいます。

また、a:hoverは 疑似クラスという名前のセレクタです。

③疑似クラスと疑似要素

「名前は聞くが、いまいち整理しにくい」と耳にすることが多い、疑似クラスと疑似要素。

共にスタイルを適用する場所を指定する記述、すなわちセレクタです。

疑似クラス＝特定の状況を、classが付与されたみたいに扱うセレクタ！

疑似クラスを使うと、特定の状況をclass付与みたいに扱う事が可能。

例えば、カーソルが乗っている状況を、classが付けられているみたいに扱えるので、class対するのと同様にスタイルを適用できます。
（※「〜みたい」なので「疑似」という名前がついている！）

これによって、カーソルが乗ったら背景を赤色にするといった効果を指定できるわけです。

疑似クラスの代表例として、次のような記述があります。

• :link（リンクが貼られている状況を、class付与みたいに扱う）
• :visited（リンク訪問済の状況を、class付与みたいに扱う）
• :hover（カーソルが乗った状況を、class付与みたいに扱う）
• :active（クリック中の状況を、class付与みたいに扱う）
• :first-child（一番最初に現れる状況を、class付与みたいに扱う）

疑似要素＝何か別の要素を付け加えたみたいに扱うセレクタ！

例えば、こんな風に最初の文字だけ大きくしたい時、

以下のような記述を行う方法があるかと思います。

一方、下記でも同じ効果を得ることができます。

このケースは:first-letterが疑似要素であり、spanという別要素を付け加えたみたいに扱われていることが、ご理解いただけるかと思います。

疑似要素の代表例は、下記のとおりです。

• :first-line（最初の一行に、別の要素を付け加えたみたいに扱う）
• :first-letter（最初の一文字に、別の要素を付け加えたみたいに扱う）
• :before（直前に、別の要素を付け加えたみたいに扱う）
• :after（直後に、別の要素を付け加えたみたいに扱う）

CSS基本整理のまとめ

プロパティとは？

＝スタイルの種類。

セレクタとは？

＝スタイル適用の場所を指定する記述。

疑似クラスとは？

＝特定の状況を、classが付与されたみたいに扱うセレクタ。

疑似要素とは？

＝別の要素を付け加えたみたいに扱うセレクタ。

以上、CSSの理解に必要な基本用語を解説しました。

プロパティやセレクタは、たくさんの種類があり、知っておくとデザインの幅が広がります。
（※特に今回は触れていないCSS3を含めると！）

ただ、丸暗記とかはキツいし面白くないので、上記のような基本的な意味を理解した上で、幅を広げていっていただければ幸いですね。

Tags

css