第3回 基本的なセレクタの解説 - CSS Level 1 - ブロガー向けCSS入門
この記事は以下のブロガー対象としています。
- ブログをカスタマイズしたい
- 全くCSSの知識が無い
こんにちはnasustです。
セレクターとは、前回(第2回 CSSの基本的な書き方 - ブロガー向けCSS入門 - nasust life blog)で、
スタイルを適用させるルールであると解説してしました。
今回は基本的なCSSのセレクタについて解説します。
CSSは3回バージョンアップしています。 その度にセレクターの種類も増えていますので。
この記事では最初のCSS Level 1の範囲のセレクタを解説します。
CSS Level 1のセレクタの種類
CSS Level 1のセレクタは最も使用する基本的な物です。 以下の様に種類があります。
クラスセレクタ
クラスセレクタは最も使う頻度が高いです。
ブログのカスタマイズなどは主に、このセレクタを使用して行います。
例:CSSファイル
<!DOCTYPE html> <html lang="ja"> <head> <style> .font-color-red{ color:red; } </style> </head> <body> <p>おはようございます</p> <p class="font-color-red">こんにちは</p> </body> </html>
クラスセレクタは、クラス名を追加した要素にスタイルを適用します。
名前を付けるだけなので、最も使いやすく使われています。
.
+ クラス名 という書式です。
例: .font-color
ブログをカスタマイズする際には、新たにクラスセレクタのスタイルを再定義することで、 自分のデザインを表現することができます。
例:ブログのカスタマイズでスタイルを再定義する
<!DOCTYPE html> <html lang="ja"> <head> <style> .font-color{ color:red; ← ブログでは赤のフォントがデフォルトで指定してある } .font-color{ color:blue; ← 自分のデザインでは青にする。 } </style> </head> <body> <p>おはようございます</p> <p class="font-color">こんにちは</p> </body> </html>
このように同じクラス名でスタイルを再定義することで、ブログをカスタマイズできます。
ID セレクタ
クラスセレクタと同じ様な書式です。
タグのid属性に適応します。
#
+ id名 という書式です。
例: #contents
<!DOCTYPE html> <html lang="ja"> <head> <style> #contents{ font-size:16px; } .font-color{ color:red; } </style> </head> <body> <section id="contents"> <p>おはようございます</p> <p class="font-color">こんにちは</p> </section> </body> </html>
sectionタグのidにcontentsが指定されています。この中のフォントのサイズが16pxになります。
ブログのカスタマイズの場合、クラスセレクタと同じように再定義して上書きできます
コンテキスト セレクタ
タグ名に対してスタイルを適用させます。
例:
p { color:red }
このように要素を指定します。
例:html
<!DOCTYPE html> <html lang="ja"> <head> <style> p { color:red } </style> </head> <body> <section> <p>おはようございます</p> <p>こんにちは</p> </section> </body> </html>
pタグの文字が全て赤になります。
そしてこのコンテキストセレクタは適応させるパターンを指定することが出来ます。
コンテキストセレクタのパターン
例えば、section p
と指定することができます。
これはsectionタグの中のpタグにスタイルを適用するというパターンです。
<!DOCTYPE html> <html lang="ja"> <head> <style> section p { color:red } </style> </head> <body> <section> <p>おはようございます</p> <p>こんにちは</p> </section> <p>さようなら</p> </body> </html>
この例では、”おはようございます”と"こんにちは"が赤色になります。
"さようなら"の色は変わりません。
また、パターンでクラス名を指定することも出来ます。
<!DOCTYPE html> <html lang="ja"> <head> <style> section p { color:red } section .font-color-blue{ color:blue; } </style> </head> <body> <section> <p>おはようございます</p> <p>こんにちは</p> </section> <section> <p>さようなら</p> <p class="font-color-blue">おやすみ</p> </section> <p class="font-color-blue">睡眠中</p> </body> </html>
"さよなら"は赤ですが、"おやすみ"は青になります。
この例ですと、section p
の赤色がsection .font-color-blue
でスタイルが上書きされ青色になります。
"睡眠中"の色はパターンに一致しないので、黒のままです。
擬似クラス
htmlのaタグの状態を表すパターンでスタイルを適応させる事が出来ます。
擬似クラスは以下の通りです。
- a:link ⋯ 訪れていないリンクの状態
- a:visited ⋯ 訪れた後のリンクの状態
- a:active ⋯ リンクをマウスをクリック(マウスダウン)した状態
cssの例
a:link{ color:blue; } a:visited{ color:red; } a:active{ color:green; }
上記の例ですと、訪問前のリンクの色が青色で、訪問後は赤くなります。
リンクにマクスをクリックした状態ですと緑色になります。
#contents a:link{ color:blue; }
このようにパターンで適用させる事もできます。
擬似要素
擬似要素とは、あるスタイルのパターンに一致したタグに擬似的な要素を適用させます。 擬似要素は以下の通りです。
- ::first-line ⋯ 最初の行に一致する
- ::first-letter ⋯ 最初の文字に一致する
これは言葉では説明しにくいので例で説明します。
例 :first-line
<!DOCTYPE html> <html lang="ja"> <head> <style> p::first-line{ color:red; font-size:32px; } </style> </head> <body> <section> <p>我輩は猫である<br> 我輩は犬である </p> </section> </body> </html>
表示例:
我輩は猫である
我輩は犬である
例 :first-letter
<!DOCTYPE html> <html lang="ja"> <head> <style> p::first-letter{ color:red; font-size:32px; } </style> </head> <body> <section> <p>我輩は猫である</p> </section> </body> </html>
表示例:
我輩は猫である
我輩は犬である
まとめ
CSS Level 1のセレクタは以下の様に種類があります。
- クラスセレクタ
.XXXXX
- ID セレクタ
#XXXXX
- コンテキスト セレクタ
XXXX YYYY
- 擬似クラス
a:link
a:visited
a:active
- 擬似要素
::first-line
::first-letter
シンプルなので覚え易いかと思います。
次回はCSS Level 1のプロパティについて解説します。
次回
第4回 フォント関係のプロパティ - CSS Level 1 - ブロガー向けCSS入門 - nasust life blog |