HTML 入門

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

クラスを使う

class は特定の（いくつかの）要素にだけスタイルを適用したいときに，それらの要素を特定するために付ける名前であると理解すると良いでしょう．たとえば，次のとおりアンケート結果の意見を好意的な意見と否定的な意見に分け，各意見に positive または negative のどちらか一方の class を指定してみます．これによってアンケート結果を2種類の意見に分けることを考えます．

index.html（抜粋）コピー
<h2>アンケート結果</h2>
<ul>
  <li class="positive">今日のスタイルシートはよくわかりました</li>
  <li class="negative">セレクタが難しかった</li>
  <li class="positive">理解できるとデザイン作成が楽しくなった</li>
  <li class="negative">今日は寝坊で遅刻しました</li>
  <li class="positive">来週も頑張ります</li>
</ul>

スタイルシートには positive と negative のそれぞれに異なったスタイルを記述してみます．具体的には，positive クラスは文字色を青色に変更し，negative クラスは茶色に変更します．なお，セレクタに class を指定するときには先頭にピリオド (.) を付ける必要があることに注意しよう．クラスごとに異なったスタイルが適用されていることが確認できるでしょう．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.cssコピー
@charset "utf-8";

.positive {
  color: blue;
}

.negative {
  color: brown;
}

さらに，<span> を使って任意の範囲にスタイルを適用できることも確認しておこう．たとえば，keyword という名前のクラスを作成して，そのクラスが適用された範囲を黄緑色（シャルトリューズ：chartreuse）のラインマーカーで塗ったようにハイライトしてみよう． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

index.html（抜粋）コピー
<h2>アンケート結果</h2>
<ul>
  <li class="positive">今日の<span class="keyword">スタイルシート</span>はよくわかりました</li>
  <li class="negative"><span class="keyword">セレクタ</span>が難しかった</li>
  <li class="positive">理解できるとデザイン作成が<span class="keyword">楽しくなった</span></li>
  <li class="negative">今日は<span class="keyword">寝坊で遅刻</span>しました</li>
  <li class="positive">来週も<span class="keyword">頑張ります</span></li>
</ul>

style.cssコピー
@charset "utf-8";

.positive {
  color: blue;
}

.negative {
  color: brown;
}

.keyword {
  background-color:chartreuse;
}

なお，上のとおりセレクタに .positive と指定すると，class="positive" が指定されたすべての要素が選択されます．したがって，次のようにすると，同じ class="positive" が指定された <p> と <li> がどちらも選択されてスタイルが適用されます．

style.css（抜粋）コピー
.positive {
  color: blue;
}

.negative {
  color: brown;
}

index.html（抜粋）コピー
<p class="positive">肯定的な意見です</p>
<ul>
  <li class="positive">今日のスタイルシートはよくわかりました</li>
  <li class="positive">理解できるとデザイン作成が楽しくなった</li>
  <li class="positive">来週も頑張ります</li>
</ul>
<p class="negative">否定的な意見です</p>
<ul>
  <li class="negative">セレクタが難しかった</li>
  <li class="negative">今日は寝坊で遅刻しました</li>
</ul>

一方でセレクタに p.positive と指定すると，class="positive" が指定された <p> 要素だけが選択され，li.positive と指定すると，class="positive" が指定された <li> 要素だけが選択されます．したがって，次のようにすると，同じ class="positive" が指定された <p> と <li> で異なるスタイルを適用することができるようになります．

style.css（抜粋）コピー
p.positive {
  font-weight: bold;
  color: midnightblue;
}

p.negative {
  font-weight: bold;
  color: chocolate;
}

li.positive {
  color: blue;
}

li.negative {
  color: brown;
}

目次に戻る