記事一覧

セレクタの種類

 posted by suzu
CSSの基礎知識

WordPressに限った話ではないですが、CSSを使ってページデザインする際には、
「セレクタ」をきちんと理解した方がよいでしょう。

セレクタとは
一言でいうと、「セレクタ」とはCSS命令を適用する範囲のことです。

body { font-size: 14px; }

これは「<body>~</body>の間の文字サイズを14pxにします」というCSS命令ですね。
このbodyを指定してる部分、{ }内のCSS命令を適用する範囲を選択(セレクト)
している部分をセレクタと呼びます。
 

セレクタとして指定できるもの
【HTML要素自体】

<p>サンプル</p>
p { color: #333333; }

上記の場合は、HTML上の全てのPタグで囲まれた部分が
CSSの適用範囲になります。
CSSでの指定の仕方は、「[タグ名] {・・・}」となります。

【HTML要素の属性に設定したクラス名】

<p class="sample">サンプル</p>
.sample { color: #333333; }

上記の場合は、「class=”sample”」でクラス名を付けたタグで囲まれた部分が
CSSの適用範囲になります。
CSSでの指定の仕方は、「.[クラス名] {・・・}」となります。

【HTML要素の属性に設定したID名】

<p id="sample">サンプル</p>
#sample { color: #333333; }

上記の場合は、「id=”sample”」でID名を付けたタグで囲まれた部分が
CSSの適用範囲になります。
CSSでの指定の仕方は、「#[ID名] {・・・}」となります。
 

CSSの基本は、HTML要素、クラス、IDを指定してスタイルを割り当てる作業に
なりますが、セレクタにはもっと細分化された種類や強さがあって、
それによってスタイルが適用される優先順位があります。
これが分かっていないと、「きちんとセレクタを指定しているはずなのに、
思ったようにスタイルが適用されない」ってなことになって、ドツボにはまります。
後の記事でもう少し細かく説明していきたいと思います。

関連記事

eyecatch_css

セレクタの優先順位

CSS命令を適用する範囲である「セレクタ」には優先順位があります。 これが分かっ...

記事を読む

eyecatch_css

float の指定と挙動

今回は、先の記事 「ブロックレベルとインライン」 で少し解説した display...

記事を読む

eyecatch_css

ブロックレベルとインライン

CSSでデザインする際に、HTMLタグ要素が ブロックレベル要素であるかインライ...

記事を読む

カレンダー

2019年4月
« 7月    
 123456
78910111213
14151617181920
21222324252627
282930  
PAGE TOP ↑