ホームページ 作り方
だれでもわかるホームページ講座
ホームページの作り方 教えます。
http://www.homepage-guide.com
　トップページ>>セレクタとは

CSSのセレクタとは
セレクタとはスタイルシートを適用する、対象グループを指定する宣言のことをいいます。

　セレクタとは、スタイルを設定したい対象グループを選択するものです。 <html>タグのstyle属性に記述する場合は関係ないですが、ヘッダー部の<style>タグや外部ファイルに記述する場合、どこにスタイルを適用したいかを指定するために用います。
　 セレクタにはタグ名、class属性、id属性、親子関係や擬似要素てグルーピングする方法がありますので次項からひとつずつ解説していきます。
1.タグ名で指定する

特定のタグにスタイルを設定するにはタグ名をセレクタに使います。 複種類のタグに同じスタイルを適用したい場合はカンマで区切って指定することが可能です。

例)H3タグに文字色と背景色を適用 
h3{color:white;
   background-color: red;
}

h3タグに文字色と背景色を適用した例
2.class名で指定する

タグのclass属性が同じ値をもつ要素をグループとしてスタイルを適用します。セレクタにはピリオド「.」に続けてclass名を指定します。

例)同じclass名「one」を<h2>タグと<img>タグに設定 
.one{font:bold 32px serif;
     width: 400px;
     background-color:#008800;
}

class名で指定した例
3.id名で指定する

タグのid属性が特定の値をもつ要素に対してスタイルを適用します。セレクタにはシャープ「#」に続けてid名を指定します。

例)id「two」を<P>に設定 
#two{border: 5px groove blue;
      text-align:center;
}

<p>タグにid="two"を設定、id名でグルーピング
4.親子関係で指定する

HTMLではタグ同士はいれこ状態で記述され、親子関係を持っています。例えば表を作成するとき<td>タグは必ず<table>〜</table>の内部にあるので、<table>と<td>には親子関係があると考えます。 この関係を利用して特定の親子関係の要素をグループとしてスタイルを適用します。 セレクタには親のタグ名と半角スペースを空けて子のタグ名をを指定します。

例)<p>タグの中の<b>タグに適用 
p b{background-color:#FF9999;
   font-weight:normal;}

ホームページづくりの上達の秘訣は、「習うより慣れろ」です。
5.擬似クラス、擬似要素で指定する

ハイパーリンクの各状態について設定する為に、擬似クラスというものが定義されています。
タグ名とコロン「：」に続いて指定することで、ハイパーリンクの各状態にもスタイルを適用できます。

  • :link 未訪問ページへのリンクの状態
  • :visited 訪問済ページへのリンクの状態
  • :hover リンク上にマウスカーソルがある時の状態
  • :active リンクをクリックした瞬間の状態
  • :focus 対象がクリックされた時の状態
  • :lang スタイルを適用する言語
擬似クラスとは別に要素内の特定の部分にスタイルを適用させるために擬似要素というものも定義されています。
  • :first-line 最初の１行を対象(ブロックレベル要素のみ指定可能)
  • :first-letter 最初の１文字目を対象
  • :before 要素の直前に追加される文字列(IE未対応？)
  • :after 要素の末尾に追加される文字列(IE未対応？)

入門編

HTML編

CSS編
CopyRight(C) 2009- 「ホームページの作り方 教えます。」 All right reserved.