CSS基礎講座1 セレクタについて

CSS LctureではCSSの基礎から順序をおって記載していきたいと思っているので、今後ともどうぞ宜しくお願いします。

一番初めセレクタの基礎からLctureしていこうと思います。

もうそんなの知っているよ!って方は違うエントリーをご覧下さい。

…ここからが続き

セレクタの基礎

CSSの書式は、まずはスタイルの適用先を示し、それに続く具体的なスタイルを記述するという形になっています。
そのスタイルの適用先の事をセレクタと言います。

記述の仕方は下記の通りです。

セレクタ	{
	プロパティ: 値;
}

セレクタの種類

  1. セレクタ
  2. idセレクタ
  3. クラスセレクタ
  4. 子孫セレクタ

セレクタ

要素名をそのまま記載

例:body h1 p ul など

※複数の要素へ同じスタイルを適用したいときは、適用先を指定するセレクタを「,」(カンマ)で区切って示してね。

body	{
	プロパティ: 値;
}
body, h1 ,p ,ul	{
	プロパティ: 値;
}

idセレクタ

特定のid属性の値が指定されている要素を適用対象として指定した場合には、セレクタの頭に「#」をつけて記述する。
たとえば「id="header"」と指定されている場合は下記の通りになる。

#header	{
	プロパティ: 値;
}

クラスセレクタ

特定のclass属性の値が指定されている要素を適用対象として指定した場合には、セレクタの頭に「.」をつけて記述する。
たとえば「class="navi"」と指定されている場合は下記の通りになる。

.navi	{
	プロパティ: 値;
}

子孫セレクタ

適用先を指定する際、「要素Aに含まれる要素B」という指定方法。
この子孫セレクタを上手く使えば、無駄にidやclassを増やす事なく、スマートに適用させる事が出来ます。

A B C	{
	プロパティ: 値;
}
#header .navi ul	{
	プロパティ: 値;
}

Comments

MIYA

MIYA

ありがとうございます!今後とも頑張りたいと思います^^

2009年11月27日 00:37

FOT

FOT

いつも、拝見させていただいてます。

web初心者の自分にとっては、どの記事もやさしく丁寧に解説があり、大変参考にさせていただいてます、一番のお気に入りサイトです。

今後も、サイトの更新、よろしくお願いします。

2009年11月26日 14:41

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article