初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL3. スタイル設定の書式　その1★外部ファイルを作成する

　

３．「子孫セレクタ」

前章までで基本的なセレクタの書き方は解説したわけですが、HTML上での要素の配列に着目して、特定の条件下にある要素に対し、その条件を示すセレクタを設定して表示方法を指定するやり方があります。これは「子孫セレクタ」と呼ばれます。

子孫セレクタ {   設定   }

　

EX1.) 子要素に設定する

例えば<blockquote>で括られた引用の一部に<u>が含まれており、この部分のみ強調のために背景色を加えたいとします。通常なら u { background-color: #0c9; } と書けば良いわけですが、そのページ内の<blockquote>以外で括られた部分にも<u>が存在し、そちらは背景色を付けたくないとすれば、u に何らかのクラス設定をした上でHTMLから呼び出す必要が生じます。しかし、子孫セレクタを使って blockquote u { background-color: #0c9; } と書いておけば、HTML上の特定の<u>でクラスを呼び出す必要なく、<blockquote>で括られた中にある<u>のみに設定が反映されます。この場合、<p>や<blockquote>から見ると<u>は子要素ということになりますね。このように子孫セレクタは要素を並べてセレクタとすることで、特定の条件下にある要素にのみ設定を加えることが出来ます。

　

★blockquote u { 〜設定〜 } とした場合★

この例をCSSとHTMLで書くと以下のようになります。表示例をご覧になると分かると思いますが、<blockquote>で括られた間にある<u>〜</u>部分のみ、背景色が加わっており、<blockquote>より前にある<p>〜</p>間の<u>〜</u>は変化していません。

CSS設定

body { margin: 50px 50px; 
color: #00f;
background-color: #eaeaea;
font: normal normal bold 10pt/1.2 "ＭＳ Ｐ明朝"; 
}

blockquote u { background-color: #0d9; }

<body>部分のHTML

<body>

<p><u>ミュシャの作品に関して、1994年のニューズウィークには、
以下のような記述があります。</u></p>

<blockquote>

この展覧会での最大の驚きは、〜中略〜
それは今日の核の時代にも容易に当てはめて見ることができる。
<u>このように彼の華やかな一連の商業ポスターと全くの対照をなす作品の中には、
衝撃的な"Russia Restituenda"もあるが、
これは１９２２年のロシア飢餓救済基金を集める目的で描かれたポスターだ。</u>
暗い背景を背にして、 虚ろな目をした女性が胸に小さな子供を抱きしめている画面である。
またあまり知られていない素描やパステル画の中には、
<u>ミュシャもまた当時の多くのパリの画家たちの例にもれず、
神秘や超自然に深く惹かれていたことを示している。</u>

</blockquote> 

</body>

↓↓↓


　

EX2.) 孫要素に設定する

今度は、<div>に含まれる<p>内にある<u>で囲まれた部分のみ背景色を加えてみましょう。この場合は div u { background-color: #0f0; } と書きます。<div>から見ると<p>は子要素、<u>は孫要素ということになりますが、<div>に含まれる<u>ということで条件を特定出来ますので、真ん中の子要素<p>をセレクタに書き加える必要はありません。

　

★div u { 〜設定〜 } とした場合★

　

この例をCSSとHTMLで書くと以下のようになります。表示例をご覧になると分かると思いますが、<div>〜</div>間にある<u>で括られた部分のみ背景色が加わっており、<div>より前にある<p>〜</p>間の<u>〜</u>は変化していません。

CSS設定

body { margin: 50px 50px; 
color: #00f;
background-color: #fff;
font: normal normal bold 10pt/1.2 "ＭＳ Ｐ明朝"; 
}

div { width: 200px;
}

div u { background-color: #0f0; }

<body>部分のHTML

<body>

<p>CSS外部ファイルと言っても、〜中略〜
特に専用のソフトが必要になるわけではありません。
(※テキストエディタについては、
<u>Column6.「テキストエディタで作ってみよう」</u>を、
ご参照下さい。)<p>

<div>
<p>ファイル名は任意で構いませんが、
<u>必ず「.css」という拡張子を付けるのを忘れないこと。</u>
</p> 
保存したファイルを開きたい時は、メモ帳を起動して
「ファイル」→「開く」の順にクリック。
</div>

</body>

↓↓↓

　

　

EX3.) クラスが設定された要素にも子孫セレクタを適用できる

では、「div.special」というクラスの設定があり、その中の<p>で括られた中にある<u>部分のみ文字色を変えたいとしたら、どう書けばよいでしょうか。通常なら u { color: #0f0; } で良いわけですが、クラス呼び出しされていない<div>〜</div>間に含まれる<u>に影響を与えないためには、セレクタに<div　class="special">〜</div>間の<u>のみという条件付けをしなければなりません。この場合は div.special u { color: #0f0; } と書きます。

　

★div.special u { 〜設定〜 } とした場合★

　

この例をCSSとHTMLで書くと以下のようになります。表示例では<div class="special">〜</div>間にある<u>〜<u>部分のみ文字が蛍光グリーンに変わっています。下の2段落のみテキストが青くなっているのは、「div.special」というクラスセレクタ自体にテキスト色を指定してあるためです。つまり青いテキスト部分のみが「.special」というクラスを指定されており、その中で特にアンダーラインを引かれている部分だけが子孫セレクタによって更に色を変えられているわけですね。

CSS設定

body { margin: 50px 50px; 
color: #9b9bff;
background-color: #fff;
font: normal normal bold 10pt/1.2 "ＭＳ Ｐ明朝"; 
}

div.special { color: #00f; }

div.special u { color: #0f0; }

<body>部分のHTML

<body>

<div>
<p>CSS外部ファイルと言っても、〜中略〜
(※テキストエディタについては、
<u>Column6.「テキストエディタで作ってみよう」</u>を、
ご参照下さい。)<p>
</div>

<div class="special">
<p>では、まず「メモ帳」を起動してCSSファイルを作成しましょう。
〜中略〜
<u>必ず「.css」という拡張子を付けるのを忘れないこと。</u>
</p> 
<p>保存したファイルを開きたい時は、
メモ帳を起動して「ファイル」→「開く」の順にクリック。
</p>
</div>

</body>

↓↓↓

ちょっとややこしいですが、子孫セレクタは要素を並べて条件付けしたセレクタであると覚えておかれると良いでしょう。

　

初級篇2.VOL3.スタイル設定の書式・その1-2 <<

>> 初級篇2.VOL3.スタイル設定の書式・その1-3 〜書式に関する補足〜

　

2007.7.11.