スタイルの指定方法その2 -- HTML & CSS入門

CSS第2部の始まりです。スタイルの指定方法のページでは、クラスやIDを使ってデザインを指定する方法を紹介しました。ところが実は、スタイルの指定方法はまだほかにもあります。このページでは、知っておくと便利な文法事項を説明します。

全要素を設定

全称セレクタという便利なものがあります。例を見てください。

* {
color: black;
background-color: white;
}

今まで「.クラス名」や「#ID名」を書いていた部分が「 * (アスタリスク)」になっています。こうすると、h1、h2、p、em、strongなどすべての要素の文字色が黒、背景色が白になります。全要素のスタイルをまとめて設定できるんです。

ところで、CSSを使わなかった場合、みなさんのブラウザではem要素(〜)はどのように表示されますか？Internet Explorerだと斜体で表示されるようです。ところがこれはInternet Explorerが

と考えて、勝手にデザインを変えてくれているだけなんです。

もしかすると他のブラウザは

と考えるかもしれません。〜の部分がどのように強調されるのかはブラウザごとに違うのです。

そこでこの「全称セレクタ」の出番です。これを使って次のように指定します。

* {
color: black;
background-color: white;
text-decoration: none;
font-weight: normal;
font-style: normal;
}

「どの要素も色は黒、背景色は白、下線は引かない、スタイルも太さも標準になれ！」と指定します。一度装飾が何もない状態にリセットするのです。そのあとでemやh1のデザインを好きなように指定します。

em {
color: red;
}

こうすれば、em要素は文字色が赤になる以外、ほかの装飾がない状態で表示されるはずです。

要素を指定するときに「li em」と要素を二つ続けて並べると、li要素の中のem要素(<li>〜</li>)のデザインだけを変えることができます。

li em {
color: red;
}

<ul>
  <li>私の好きなラーメンは<em>とんこつ</em>です。</li>
</ul>
<p>私の好きなラーメンは<em>とんこつ</em>です。</p>

リストの例と段落の例を比べてみてください。li要素の中の「とんこつ」は赤字になり、p要素の中の「とんこつ」は黒字のままになります。

私の大好きなラーメンはとんこつです。

要素やクラス、IDを「 , (カンマ)」で区切ると、スタイルをまとめて指定できます。たとえば、

h1, h2, h3 {
color: blue;
font-weight: bold;
}

とすると、h1要素、h2要素、h3要素の文字が青い太字になります。