スタイルシートマニア
ホームページカスタマイズ 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;
}