継承と子孫セレクタとは？：CSS入門
CSS入門（10）
CSS用語に、継承、子孫セレクタというものがあります。継承だの子孫だのセレクタだのと言われても、「何のことやら分からん」と思います。
でも、大丈夫だぜ、セニョール。だって、これから説明するのだから。お話は、次の順番で進みます。
CSSの継承とは？
このCSS入門を通してご覧になっている人は、実はすでに継承という方法でコードを書いています。ごめんね、知らないうちに書かせちゃって・・・。
1：前回までの状態
（01）
はじめに、前回までの状態を確認しておきましょう。marginやpaddingをほどこしたところで、終わっているはずです。
CSSコードは、次のような感じです。だいぶ長くなってきましたね。
2：表（<table>タグ）の中の背景色を変更する
（02）
今回は、表（<table>タグ）内の背景色を、変更してみたいと思います。全体（<body>）の色と同じ黄色では見難いですからね。
みなさんは、すでに背景色の指定（background-color）を行っているはずですから、方法は分かると思います。ちょっと、コードを考えてみてください。
（03）
どのような、コードを頭に思い浮かべましたか？次のような感じでしょうか？んーお見事！そうですね。
table { background-color: #ffffff; }
<table>タグに対して、background-colorを指定してあげれば良いわけです。
（04）
しかし、ちょっと待ってください。当り前のように通り過ぎてしまいそうですが、何か気になるところはありませんか？
<table>タグ内のHTML文の構成を思い出してみてください。<tr>タグやら<td>タグが中に入っています。
あなたがもし、前述（03）の段階で、<table>タグに色付けをしたのだとしたら、なぜ、内包しているタグまで同じ色に変わっているのでしょうか？
<td>タグの背景色を変えるような指示をしましたっけ？
おそらく、みなさんは漠然とした感覚では分かっていると思います。「そりゃあ、あれだよ。<td>タグは、<table>タグの子分みたいなもんだからさぁ・・・」といった感じ。
3：継承とは？
（05）
えぇ、そうなんです。その漠然とした感覚が、「継承（けいしょう）」と呼ばれるものなのです。子分は、親分の真似をするわけです。
冒頭で、「みなさんは、すでに継承という方法でコードを書いています」とお話しました。あら、どこだったのかしらん？
記事「背景色の変更【background-color】：CSS入門」で背景色を変更したときに、まっ黄色（あなたがbodyに設定した色）になりませんでしたか？
あれも実は、body親分が「おれ、黄色が好き！」と言ったものだから、子分たちが気を利かせて、「やっぱ、そうッスよね〜、黄色いいッスよね〜」と調子をあわせたわけです。
いかがでしょう？「継承（けいしょう）」の意味が、少し明確になってきたのではないでしょうか？
子孫セレクタという書き方
しかし、いつも親分の言った通りになんてしていられません。
1：表内（<th>タグ、<td>タグ）の背景色を変更する
（01）
ところで、表（<table>タグ）内を、<th>タグと<td>タグに分けて書いていたのですが、覚えていらっしゃるかしら？
えぇ、覚えているわけないと思います。私もさっきトイレで思い出したばかりです。
記事「表を作る 【<table>タグ】」をご覧いただくと分かるのですが、左側の列を見出し（<th>タグ）とし、右側の列をデータ（<td>タグ）としてあります。
どうでしょう？せっかく分けてあるわけですから、それぞれに背景色を付けてみませんか？ちょっと、コードを考えてみてください。
（02）
みなさんは、CSSコードをどのように書いたでしょうか。次のような感じでしょうか？
確かに、これでも表示できるのですが・・・。
2：子孫セレクタという書き方
（03）
実はですね、こういう<th>タグや、<td>タグのような、親分が決まりきっているタグを書くときは、次のように書きます。
親となるタグ、そして半角スペースを間にして、子となるタグを書きます。（一般的に、<tr>タグは省略します）
「tableの中のth（td）に、background-colorを指定しまっせ」という意味です。
ただ、理由がね〜・・・・・・気にしたこともなかったので分からないんですけれど、慣例的なものなのかしら。調べてもそれらしい回答は見つかりませんでした。
オチがついていませんが、「そういうものなんか」という感じで覚えておいてください。明確な理由が分かったら、改めて書きます。
2：復習（padding）
（04）
復習です。表内の文字が、窮屈（きゅうくつ）な感じもするので、paddingを入れておきたいと思います。
前回の記事「間隔をあける【margin、padding】：CSS入門」の復習もかねて、<th>タグと<td>タグにpaddingを入れてみてください。
上下を2pxくらい、左右を10pxくらいで、いかがでしょうか。たいして変わらない？いえいえ、こういうちょっとした心遣いが、のちのち効いてくるのです。
「ずきゅーん」と効いてくるのです。あの娘のハートを、がっちりキャッチしちゃうのです。
（08）
paddingは、覚えていたかしらん？
あとがき
継承、子孫セレクタは、いかがでしたか？
おそらく、どういうものなのかは、ご理解いただけたと思うのですが、あまり何がしたいのだか分からなかったのではないでしょうか。
「で？何なの？」という感じ。
しっかーし、のちのち「こういう使い方ができるんですわ、うっひゃっひゃっひゃ」という話へつながっていくので、もうしばらくお待ちください。
継承や、子孫セレクタを計画的に使うと、無駄のないCSSコードが書けるようになりますよ。
次回予告
次回は、箇条書きのリストマークの変更【list-style-type】について書いています。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
- 継承と子孫セレクタとは？（この記事です）
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/19 更新日：2008/04/19
« 「間隔をあける【margin、padding】」｜「箇条書きの装飾【list-style-type】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/272-e914be16
