無料ホームページ作成！ＣＳＳ・スタイルシート
セレクタの種類

無料ホームページ作成！CSS
セレクタの種類

ホームページで使うセレクタ

セレクタ？

セレクタって何？っておっしゃる方は多いと思います、セレクタとは簡単に言えばＣＳＳ・スタイルシートの適用先です、たとえばｐ要素に適用させたいならセレクタはｐと記述します。

CSSソース

p{
	color:#000000;
	font-size:10px;
}
 

これでp要素には２つの属性が適用されました。
｛｝内はスペースなどは無視されるようですので見やすく書くためこうしています。

基本セレクタ

基本セレクタとは要素を指します、例えばp要素やa要素ですね。属性などを記述しなくても適用されますのでうまく使えばHTML内がとてもすっきりします。

CSSソース

p{
	color:#ff0000;
	font-size:10px;
}
 

HTMLソース

<p>基本セレクタ</p>
 

結果

基本セレクタ

IDセレクタ

IDセレクタとは一度使うと消える属性の事を指します。セレクタの頭に「#」をつけて書き、id属性としてHTMLでは記述します、「#」の後のセレクタの名前は自由に決められますので意味にあった名前を付けましょう。

CSSソース

#mozi{
	color:#ff0000;
	font-size:10px;
}
 

HTMLソース

<p id="mozi">IDセレクタ</p>
 

結果

IDセレクタ

ページ内で一度宣言してしまうと使えなくなってしまうので土台などに使いましょう。

CLASSセレクタ

classセレクタとは何度も使える属性の事を指します、idセレクタと似ていてセレクタ名を自分で決め、必ず頭に「.」を付けます。

CSSソース

.mozi{
	color:#ff0000;
	font-size:10px;
}
 

HTMLソース

<p class="mozi">CLASSセレクタ</p>
 

結果

CLASSセレクタ