バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[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クリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。作成したポストカードはお持ち帰りいただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ