継承と子孫セレクタとは?:CSS入門

ブログが作りたい!CSS入門 > 継承と子孫セレクタとは?:CSS入門

継承と子孫セレクタとは?:CSS入門

継承と子孫セレクタとは?:CSS入門

CSS入門(10)

CSS用語に、継承、子孫セレクタというものがあります。継承だの子孫だのセレクタだのと言われても、「何のことやら分からん」と思います。

でも、大丈夫だぜ、セニョール。だって、これから説明するのだから。お話は、次の順番で進みます。

▲ページの先頭に戻る

CSSの継承とは?

このCSS入門を通してご覧になっている人は、実はすでに継承という方法でコードを書いています。ごめんね、知らないうちに書かせちゃって・・・。

1:前回までの状態

(01)

はじめに、前回までの状態を確認しておきましょう。marginやpaddingをほどこしたところで、終わっているはずです。

ブラウザで表示

CSSコードは、次のような感じです。だいぶ長くなってきましたね。

▲ページの先頭に戻る

2:表(<table>タグ)の中の背景色を変更する

(02)

今回は、表(<table>タグ)内の背景色を、変更してみたいと思います。全体(<body>)の色と同じ黄色では見難いですからね。

みなさんは、すでに背景色の指定(background-color)を行っているはずですから、方法は分かると思います。ちょっと、コードを考えてみてください。

表(<table>タグ)の中の背景色を変更

(03)

どのような、コードを頭に思い浮かべましたか?次のような感じでしょうか?んーお見事!そうですね。

table { background-color: #ffffff; }

<table>タグに対して、background-colorを指定してあげれば良いわけです。

(04)

しかし、ちょっと待ってください。当り前のように通り過ぎてしまいそうですが、何か気になるところはありませんか?

<table>タグ内のHTML文の構成を思い出してみてください。<tr>タグやら<td>タグが中に入っています。

tableの構成

あなたがもし、前述(03)の段階で、<table>タグに色付けをしたのだとしたら、なぜ、内包しているタグまで同じ色に変わっているのでしょうか?

<td>タグの背景色を変えるような指示をしましたっけ?

おそらく、みなさんは漠然とした感覚では分かっていると思います。「そりゃあ、あれだよ。<td>タグは、<table>タグの子分みたいなもんだからさぁ・・・」といった感じ。

▲ページの先頭に戻る

3:継承とは?

(05)

えぇ、そうなんです。その漠然とした感覚が、「継承(けいしょう)」と呼ばれるものなのです。子分は、親分の真似をするわけです。

冒頭で、「みなさんは、すでに継承という方法でコードを書いています」とお話しました。あら、どこだったのかしらん?

記事「背景色の変更【background-color】:CSS入門」で背景色を変更したときに、まっ黄色(あなたがbodyに設定した色)になりませんでしたか?

あれも実は、body親分が「おれ、黄色が好き!」と言ったものだから、子分たちが気を利かせて、「やっぱ、そうッスよね~、黄色いいッスよね~」と調子をあわせたわけです。

いかがでしょう?「継承(けいしょう)」の意味が、少し明確になってきたのではないでしょうか?

▲ページの先頭に戻る

子孫セレクタという書き方

しかし、いつも親分の言った通りになんてしていられません。

1:表内(<th>タグ、<td>タグ)の背景色を変更する

(01)

ところで、表(<table>タグ)内を、<th>タグと<td>タグに分けて書いていたのですが、覚えていらっしゃるかしら?

えぇ、覚えているわけないと思います。私もさっきトイレで思い出したばかりです。

記事「表を作る 【<table>タグ】」をご覧いただくと分かるのですが、左側の列を見出し(<th>タグ)とし、右側の列をデータ(<td>タグ)としてあります。

どうでしょう?せっかく分けてあるわけですから、それぞれに背景色を付けてみませんか?ちょっと、コードを考えてみてください。

表内(<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】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

kumaさんこんにちわ。

今回も大変楽しい講座でテンション上がりっぱなしです♪

質問失礼致します。

例えば子で
table th {} / table td {} でbackground-colorを指定する場合は親のtable {background-color:~}は必要ないのでしょうか?
試しに省いてみたら枠線の色が#000000(黒)が無色(影のみ)になりました。
必要ない(影だけでもいい)場合でも編集・メンテナンスを考慮し記載した方が賢明なのでしょうか?
htmlの場合はbgcolor="(半角スペース)"で対応できるような事をを入門編で学んだ覚えがあるのですがCSSの場合は何か方法があるのでしょうか?

tableの背景色

nobuさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

もうここまで読んじゃったのね。
すごい神速。(´Д`;)


table背景色のご質問は、うまく意図が読みとれていないので、

期待するような回答にならないかもしれませんが、
お答えいたします。

「th、tdでどのように指定するから」ということに関係なく、

判断する基点は、最初の設計の段階で、
どのようにデザインしたいか?で考えることになるかと思います。

デザインとして「必要ない(影だけでもいい)」と判断した場合は、
指定しなくて良いと思います。

必要のない記述をしないことこそが、
編集・メンテナンスに考慮した指定になるかと思います。

また、「bgcolor="(半角スペース)"」を、
どのような場合に指定しておくのかよく分からないのですが、

「必要ない(影だけでもいい)」場合という意味であれば、
CSSでは、そのような方法はありません。

継承がなされるはずですから、
「必要ない(影だけでもいい)」場合は何もしません。

・・・と、こういうお返事で良いものかしら。

話がかみ合っていない場合は、
お手数ですが改めてまたコメントしてくださいませ。

CSSを自在に操れたら・・・

KumaCrowさん、こんにちは。

CSSは、そのものを見ると
「あー、なるほど~」
なんて思うんですがいざそれをなにもないときに思い出せるかというとそんなふうにはならず。
検索して探し当てて「あーそうそう、これこれ」なんて思う日々です。

思ったようにすらすらと記述できたらどんなにいいだろうかと、
去年に引き続き今年も思っただけで心から勉強はせずな一年でした。

KumaCrowさんのブログは私の玉手箱です。
勝手に頼ってしまっております。
来年はちょっと自分のプロバイダの無料HPを自力CSSでやってみようかなと思ったり・・・
無理かwと最初から思ったり・・・です。


それにしても、今年は(も・・・です)お世話になりました。
来年もどうぞよろしくお願いします。
よいお年をお迎えくださいませ。

あけてビックリ玉手箱、白い煙がもっくもく

Missdiamondさん、こんちあ!(・∀・)/ぐもに
コメントありがとうございます。

えぇ、そうですよねー、ほんと。
意外とCSSって難しいと思います。

私の場合、そこそこできるようになるまでには、
1年とか、2年とかかかったような気がします。

おっしゃる通り、覚えるのはそんなに時間はかからないのだけれど、
得心して使い慣れるまでは時間がかかるみたい。

検索して探し当てるレベルにあるだけでも、
たいしたものではないかしら。

そんなことを繰り返しているうちに、
すらすらーっとね。できちゃうような気がします。

きっと。ヾ(*´∀`*)ノ

無料HPで、自力CSS!
それは楽しみ。

ホームベーカリーに特化したアフィリエイトサイトとか、
いいんじゃないですかねー。

知識も豊富でいらっしゃるし。

単価が高めの本体から、単価の低い粉モノまで、
紹介するバリエーションも豊富だし。

作り方とか、変わったパンのお試しとか、
記事にするネタも豊富だし。

動画とかにもしやすいし。

楽しみながら作れて、必要性にせまられると、
CSSも自然に身につくかもー。(´▽`)♪


こちらこそ、いろいろとお世話になりました。

いっぱい記事でご紹介していただいて、
本当にありがとうございました。

これといったお返しもできず、
恐縮です。

あ、今日~明日と、大荒れらしいですね。
寒くなるのかな。

どうぞ、お身体に気をつけて、
良い新年をおむかえくださいませ。

来年もよろしくお願い申し上げます。
(かよ坊たちにもよろしく~♪)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/272-e914be16
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて