スタイルシートマニア

ホームページカスタマイズ Tips

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

子孫セレクタ

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

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

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

記述例

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

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

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

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

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

クラスセレクタ

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;
}