[CSS]隣接セレクタ

2014年9月18日(木曜日)

今日から、東京ゲームショウが始まりますね。

私自身、大のゲーム好きというわけではありませんが、好きなタイトルの新作がお披露目になるようで、楽しみです。

ゲームはだんぜんRPG派のスタッフ「ほ」です。

さて、ここのところ、このブログがWebネタで埋まりつつありますが、きっと「の」が挽回してくれるはずなので、私は空気を読まずにCSSネタでいきます。

セレクタ祭りはまだまだ続きます。

今回は「隣接セレクタ」

自分が指定した２つの要素が隣り合った場合に装飾を行います。

【HTML】


<h2>見出し</h2>
<p>リード文リード文リード文</p>
<p>本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト</p>

<h2>見出し</h2>
<p>リード文リード文リード文</p>
<p>本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト</p>

上記のようなソースが使いどころです。

２カ所にあるリード文に対して装飾を行いたい場合、リード文の<p>タグにclass名を設定し、CSSで装飾をする方法が考えられます。

ただ、「リード文が必ず<h2>要素の次に出てくる」というのが決定しているのであれば、CSSで以下のように記述することができます。

【css】


h2 + p {
	font-weight:bold;
}

「h2 + p」とセレクタに記述することで、h2と隣接したp要素だけに装飾を適用することができます。

上手に利用することで、HTMLには手を加えずに個別の装飾を行うことができるようになります。

ぜひぜひ使ってみて下さい。

バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎！Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験認定インストラクター

スタッフブログ