HTML講座 - CSSの書き方

CSSの書き方

CSSの書き方ということで、前回紹介したのがstyle属性に書く方法です。

実は、これ以外にもCSSを書く場所があるので、これを今回紹介します。

style要素

ひとつはstyle要素です。style属性とは違うので注意しましょう。

これは、基本的にhead要素の中に書かれるものです。

具体例を見てみましょう。


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>テスト</test>
    <style type="text/css">
body {
	background-color:#000000;
	color:#ffffff;
}
    </style>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落</p>
  </body>
</html>

このページを表示してみると、やはり黒背景に白い文字で表示されます。

しかし、今回body要素にはstyle属性はありません。

かわりにhead要素の中にstyle要素があり、body { }というブロックの中に、前回同様のスタイルシートが書いてあるのです。

この「body」というのはもちろんbody要素のことで、「body要素に対してこのCSSが適用される」ということを示しています。この、どの要素に適用されるか決める記述のことをセレクタといいます。適用されるCSSは前回同様ですが次のようになっています。

background-color:#000000;
color:#ffffff;

改行がありますがこれは見やすさのためで、改行は無くても構いません。

それでは、セレクタをbody以外にしてみましょう。例えばp要素の文字色を赤にしたいとしましょう。そのときは次のようにしますね。


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>テスト</test>
    <style type="text/css">
p {
	color: #FF0000;
}
    </style>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
  </body>
</html>

いま、p要素を3つに増やしてみましたが、どれが赤くなるのでしょうか。実は、全部赤くなります。このように、style要素内に書かれたCSSというのは、当てはまる要素すべてに適用されます。

最初の例のbody要素というのは絶対に1つしかありませんから、style要素内に書こうがstyle属性に直接書こうが大して変わらないように見えます。しかし、見やすさのためにstyle要素内に書かれることが多いです。

ちなみに、style要素の中と、style属性の中に書いてあることがかぶったらどうなるのでしょうか。具体的には次のような場合です。


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>テスト</test>
    <style type="text/css">
p {
	color: #FF0000;
}
    </style>
  </head>
  <body>
    <h1>見出し</h1>
    <p style="color:#0000FF;">段落1</p>
    <p>段落2</p>
    <p>段落3</p>
  </body>
</html>

今、段落2と段落3は何もstyle属性がないので、style要素に書かれた指定である「文字色は赤」が適用されることが分かるとおもいます。

しかし、段落1もp要素ですから当然そのstyle属性の中の「文字色は赤」が適用されるのですが、その一方でそのp要素のstyle属性には「文字色は青」と書いてあるのです。

つまり、style要素に書いてあるほう（赤）とstyle属性に書いてあるほう（青）の、どちらが優先されるかという話になります。

これは、style属性のほう（青）が優先されます。

これは、なんとなくp要素に直接書かれているほうが密着している感じが出てるので、なんとなく理解するといいでしょう。

次回は、セレクタについてさらに詳しく解説します。