HTML 入門

スタイルシートでデザインを作ろう

複数のセレクタに適用する

このページの特に後半の内容は CSS の最初の学習段階では理解が難しいかもしれません．ある程度理解ができてからこのページに戻ってきてもよいでしょう．ここでも前のページまでと同じ HTML ファイルを利用します．

index.html（抜粋）
<h1>スタイルシート</h1>
<h2>CSS ファイルの準備して読み込む</h2>
<p>拡張子が.cssのファイルを準備します．．．</p>
<h2>表示を確認する</h2>
<p>ブラウザで表示を確認します．．．</p>

見出し <h1> を赤色に，見出し <h2> を緑色にしてみます．この場合，h1，h2 をそれぞれセレクタとして文字色を指定すれば良いので，CSS ファイルに次のコードを記述すればよいでしょう．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css
@charset "utf-8";

h1 {
  color: #ff0000;
}

h2 {
  color: #00a000;
}

p {
  color: #0000ff;
  text-indent: 16px;
}

次に h1，h2 のどちらも緑色に指定したい場合を考えます．もちろん上の CSS で4行目を #00a000 に変更しても良いですが，h1，h2 の両方に同じスタイルを適用することも可能です．これは，セレクタをカンマで区切って次のように書くことができます．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css
@charset "utf-8";

h1, h2 {
  color: #00a000;
}

p {
  color: #0000ff;
  text-indent: 16px;
}

なお，上のスタイルシートでは後から追加した h1 や h2 のスタイルを p の前に入力しました．書く順番に絶対的な決まりはありません．ただ順序のルールを決めずに様々なデザインを追加すると結果的にスタイルシートが長くなり，セレクタの種類も多くなって管理が大変になります．例えばページ内で登場する要素の順番などに従って CSS も要素を並べて作成するようにすると良いでしょう．また，同じセレクタの同じプロパティに異なる複数のスタイルが適用された場合は後から適用されたスタイルが利用されることに注意してください．

例えば次の例では4行目周辺で h1 と h2 に緑色が設定されていますが，13行目で h1 が赤に上書きされ，17行目では h2 が青に上書きされています．その結果，最後に上書きされたデザインが適用されています．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css
@charset "utf-8";

h1, h2 {
  color: #00a000;
}

p {
  color: #0000ff;
  text-indent: 16px;
}

h1 {
  color: red;
}

h2 {
  color: blue;
}

なお，セレクタをカンマで区切ったものは セレクタリスト と呼び，すべての位置するノードを選択します．すでに説明した通り，次の2つの書き方で同じ結果になります．

style.css（抜粋）
h1 {
  color: #00a000;
}

h2 {
  color: #00a000;
}

style.css（抜粋）
h1, h2 {
  color: #00a000;
}

セレクタを改行して次のように書くスタイルが広く利用されています．もちろん，上と同じ結果になります．

style.css（抜粋）
h1,
h2 {
  color: #00a000;
}

次のようにセレクタを空白で区切った場合は 子孫結合子 となります．下のコードの場合 <header> 要素の中にある <li> 要素についてのみスタイルが適用されます．つまり，<header> 以外の <main> や <footer> の中にある <li> 要素には適用されません．

style.css（抜粋）
header li {
  color: #00a000;
}

index.html（抜粋）
<header>
  <ul>
    <li>ヘッダの箇条書き</li>
  </ul>
  <hr>
</header>
<main>
  <ul>
    <li>メインの箇条書き</li>
  </ul>
</main>

セレクタを >で区切った場合は 子結合子 となります．下のコードの場合 <header> 要素の直接の子要素である <p> 要素についてのみスタイルが適用されます．つまり，<header> の子要素として <div> があり，その子要素として <p> がある場合，この <p> 要素には適用されません．

style.css（抜粋）
header > p {
  color: #00a000;
}

index.html（抜粋）
<header>
  <p>
    header 直接の子要素です．
  </p>
  <div>
    <p>
      header, div の子要素です．
    </p>
  </div>
</header>

セレクタリスト，子結合子，子孫結合子およびその他を簡単な表で整理しておきます．これらの使い分けは慣れないうちは難しく，CSS の学習がある程度進んだ段階でこのページに戻ってくると良いでしょう．

目次に戻る