スタイルの適用先指定方法Ⅴ

文書の持つ木構造からは取得できない性質に対してスタイルを適用させる方法です。

擬似クラス

具体的には、

a:link（リンクを示す）
a:visited:（すでに見たリンク先）
a:hover（カーソルが上にある状態）
a:active（マウスボタンが押された状態）

などがあります。

aタグ関係は頻繁に使うので覚えておきましょう。特にa:hoverはナビゲーションには必須です。

擬似要素

:first-letter（ブロックレベル用の１文字目に適用）
:first-line（ブロックレベル用の１行目に適応）
:before（contentsプロパティで直前に追加される要素に適用）
:after（contentsプロパティで直後に追加される要素に適用）

スタイルの適用先指定方法Ⅳ

子孫セレクタ

これは適用先を指定するときに、「要素Ａの中の要素Ｂに適応させる」っという方法です。

例えば、class=”box”の中のpタグは全部上下に1emのmarginを付けたい時なんかはこれを使うと便利です。

書式としては、セレクタ名との間に半角スペースを入れます。

記述例

.box p {
      margin-top: 1em;
      margin-bottom: 1em;
}

これは、Ａの中のＢの中のＣの中のＤっといった感じであればあるだけ増やせますが、あまり使いすぎると今度は仕様変更するときなど、どこに何が適応されているのか分からなくなるので、適材適所！case　by　case！で上手く使い分けるようにしましょう。

追々記事にしていきますが、デフォルトの状態だとpタグにはすでにmarginがついています。

これは何かとうっとおしいのでリセットするように設定します。

実際にちょと使ってみる

あまり理屈をこねてもややっこしくなるだけなので、実際にちょっと作ってみましょう。

<div class=”box01″>

<h2 id=”h2-css_use”>CSS使ってhtmlを作ってみる</h2>

<p>boxなど一ページに複数使用が予想されるものにはclassを採用</p>
<p>h（見出し）タグなどそのページには一度しか使用されないようなものにはidを採用</p>

<p>必ずしもh（見出し）タグにidを付けないといけないわけではありません。</p>
<p>これらは目安であり絶対ではありません。</p>

</div>
<!–box01終わり –>

スタイルの適用先指定方法Ⅲ

クラスセレクタ

idの時と同じようにclass属性の値が指定されている要素を適応先として指定する方法です。
平たく言うと、適応させたい要素にclass=”名前”っと書いてスタイルを適応させる方法です。ちなみにidセレクタに関しても同じです^^;

書式としては、頭に（.）ドットを付けて名前を付て名前を付けます。

例えば、
.box01 {
      width: 515px;
      padding-left: 10px;
      margin: 80px 0px;
}

スタイルの適用先指定方法Ⅱ

idセレクタ

これはid属性が指定されている要素を適応先として指定する方法です。

書式としては、頭に#を付けてidの名前を付けます。

例えば
#h1-title {
      background: url(../img/h1-title.gif) no-repeat;
      width: 515px;
      height: 25px;
      margin-bottom: 5px;
}

ちなみにidは一ページ（サイト単位ではない）に一つしか使用できないのでご注意ください。
もし複数使用したい場合は、classを使いましょう。

スタイルの適用先指定方法Ⅰ

セレクタの基本

CSSの書き方は、まずスタイルの適用先を記述して、{～}内にスタイルを記述するという形式になっています。
このスタイル適用先を「セレクタ」と呼びます。

このセレクタにもいろいろな種類と指定方法がありますが、もっとも基本となるのは要素名（pタグなど）をそのままセレクタとして指定する方法です。

例えば、body要素にスタイルを指定してみます。

body { 
      color: #333333;
      font-size: 13px;
      line-height: 1.6em;
      letter-spacing: 0.11em;
 }

っといった感じで記述します。
全ての要素に適用させたい場合は、*（アスタリクス）を使います。
また、pとh1とbodyに同じスタイルを適用させたい場合は,カンマで区切って記述すると簡単になります。

body, h1, p { 
      margin: 0px;
      padding: 0px;
}

空要素の書式

HTMLでは、br要素やhr要素などの空要素は、<br>っといった感じで記述しても大丈夫でしたが、XHTMLでは「/」でとじないといけないようになっています。
だから br は、<br />と記述しなければいけなくなっています。

このあたりは、HTMLからXHTMLへ仕様変更するとき等に忘れがちなので注意しましょう！
後、ブログパーツやアフィリエイトプログラムでもよくありますが、imgタグをちゃんと閉じていなかったりするので注意して見ておくといいかもしれません。
そもそも、こんなものは作る側で注意しなければいけないことなのですが。。。

ちなみに、要素名（br など）の後の半角スペースは入れても入れなくてもいいのですが、厳密には入れた方がいいようです。