Section 9 : グループ化と「入れ子」

スタイルをいろいろ指定すると，長くなってしまうのはどうもいただけない。短縮属性以外にもまとめて指定する方法がいくつかある。

---

グループ化

見出しに使う H1 や H2 をいずれもゴシックフォントにする場合に，これらをまとめて指定できる。ただし，これは <STYLE>...</STYLE> の中やリンクされたスタイルシートでの話。

H1, H2 { font-family: "ＭＳ Ｐゴシック", Osaka, Gothic, sans-serif; }

複数の要素を半角カンマで区切って一気に指定する。これは，

H1 { font-family: "ＭＳ Ｐゴシック", Osaka, Gothic, sans-serif; }
H2 { font-family: "ＭＳ Ｐゴシック", Osaka, Gothic, sans-serif; }

と同じだから記述量はかなり減少する。

「入れ子」

<P>...</P> でくくられた段落の中に登場する <STRONG>...</STRONG> は赤，<EM>...</EM> は緑に文字色を変えることを考えてみよう。

P STRONG { color: red; }
P EM { color: green; }

本来なら周囲のスタイルが継承されるのであるが，<P> の中にある <STRONG> や <EM> というように「入れ子」になった部分に色を指定できる。このように半角のスペースで区切るところが，上のグループ化との違いである。<P>...</P> の外では効果はないわけで，たとえてみると「内弁慶」といったところ。

グループ化と「入れ子」を合体させることもでき

H3 EM, P EM { color: blue; }

のような指定もできる。これは以下と同じである。

H3 EM { color: blue; }
P EM { color: blue; }

詳細については，First step CSS の <STYLE>や Step forward CSS の「継承」と「入れ子による識別」を参照されたい。

---

---