1. タグ <style>
HTML要素にスタイルが多すぎる場合、専用の要素、つまりタグ styleに移すことができるよ。
通常は<head>タグ内に配置され、以下のように見えるんだ：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSSの例</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>これはタグ<style>内でスタイルを使用する例です。</p>
</body>
</html>
これで、style属性内に<body>タグのための長いスタイルを書く必要がなくなるし、
それをstyleタグに移すことができるよ。すごく便利だよね。
同じことは<p>タグ（段落）にも言える。さらに、
<head>内の<style>タグで記述されたスタイルは、
ドキュメント内のすべての段落に適用されるんだ、たとえそれが何千もあってもね。あくまで<style>タグ内では
スタイルがセレクタを使って指定されているからなんだ。
5.2 セレクタ
セレクタ — これはCSSプロパティを適用するHTML要素を選択する方法だよ。いろいろなタイプのセレクタが存在するから見てみよう：
タグセレクタ
特定のタイプのすべての要素にスタイルを適用するんだよ。タグ名とその後に波括弧を書くんだ。
tagname {
// スタイル
}
tagnameは何でもOKだよ：body, image, a, p、…何でも。
クラスセレクタ
CSSプロパティをあるタグに関連付けるのではなく、一群のCSSプロパティに名前をつけることもできるよ。
このようなグループはCSSではクラスと呼ばれるんだ。
このスタイルは、特定のクラスを持つすべての要素に適用されるんだよ。クラスはHTMLのclass属性で指定されるんだ。
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">これは重要なテキストです。</p>
<p>これは通常のテキストです。</p>
</body>
</html>
上記の例では、太字で表示されるのは、スタイル/クラス「important」を適用した最初の段落のテキストだけ。2番目の段落にはそのスタイルはないよ。
<style>タグでスタイルを記述する際、以下の3つの方法で指定できるんだ：
- tagname { …}
- tagname.classname { …}
- .classname { …}
セレクタのトピックについては、CSSを学ぶときにもっと詳しく取り上げるよ。 今はHTMLの例の中にCSSが出てくることがあって、私はしばしばstyleタグにスタイルをまとめたり、 特定のHTML要素にスタイルを適用するためにセレクタを使うことがあるよ、と教えておくね。
GO TO FULL VERSION