CSSの基本書式実施例
セレクタのグループ化
HTML
<body>
<h1>CSSの書式</h1>
<p>
CSSで書式を設定するにはセレクタを指定し、プロパティと値をセットにして記述していきます。
</p>
<p>
セレクタには様々な種類があります。</p>
</body>
css
h1,p {
color: #4682b4;
}
CSSの書式
CSSで書式を設定するにはセレクタを指定し、プロパティと値をセット にして記述していきます。
セレクタには様々な種類があります。
複数のセレクタに対し同じプロパティへ同じ値を設定する場合 セレクタを「,」で区切って続けて記述すると同じグループとして扱うことができます。
h1 {color: #4682b4;
p {
color: #4682b4;
と個別に指定する必要は無い
子孫セレクタ
HTML
<body>
<p>
CSSで書式を設定するには<strong>セレクタ</strong>を指定し、プロパティと値をセットにして記述していきます。
</p>
<p>
<strong>セレクタ</strong>には例えば次のようなものがあります。
</p>
<ul>
<li>要素型<strong>セレクタ</strong></li>
<li>子孫<strong>セレクタ</strong></li>
</ul>
</body>
css
ul strong{
color: #ff0000;
}
結果
CSSで書式を設定するにはセレクタを指定し、プロパティと値をセットにして記述していきます。
セレクタには例えば次のようなものがあります。
- 要素型セレクタ
- 子孫セレクタ
解説
ul要素の孫要素であるstrong要素に対してだけ文字色を赤に設定しました。
p要素の中にもstrong要素は使われていますがスタイルは設定されてません。
子供セレクタ
HTML
<div>
CSSで書式を設定するには<strong>セレクタ</strong>を指定し、プロパ
ティと値をセットにして記述していきます。
</div>
<div>
<p>
<strong>セレクタ</strong>には例えば次のようなものがあります。
</p>
</div>
<ul>
<li>要素型<strong>セレクタ</strong></li>
<li>子孫<strong>セレクタ</strong></li>
</ul>
css
div > strong{
color: #ff0000;
}
結果
セレクタには例えば次のようなものがあります。
- 要素型セレクタ
- 子孫セレクタ
解説
div要素の直接の子要素であるstrong要素に対してだけスタイルを設定しました。p要素の中にもstrong要素は使われていますがdiv要素の孫要素となっているためスタイルは設定されていません。
隣接兄弟セレクタ
HTML
<h1>CSSの書式</h1>
<h2>セレクタ</h2>
<p>
CSSで書式を設定するにはセレクタを指定し、プロパティと値をセットにして記述していきます。
</p>
<h2>プロパティ</h2>
<p>
プロパティは例えば文字の色やマージンなど要素が持つ様々な特徴です。
</p>
css
h1 + h2{
color: #ff0000;
}
結果
CSSの書式
セレクタ
CSSで書式を設定するにはセレクタを指定し、プロパティと値をセットに して記述していきます。
プロパティ
プロパティは例えば文字の色やマージンなど要素が持つ様々な特徴です。
解説
h1要素の直後のh1要素に対してだけスタイルを設定しました。2番めのh2要素にスタイルは設定されていません。