[CSS]隣接セレクタ

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

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

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

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

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

今回は「隣接セレクタ」

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

【HTML】


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

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

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

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

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

【css】


h2 + p {
	font-weight:bold;
}

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

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

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


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

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

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

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

ホームページ制作基礎講座の詳細

The following two tabs change content below.
アバター

スタッフ 「ほ」

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

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ