超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのスタイルシート講座 > タグに対する設定の方法 > Next 

■ タグに対する設定の方法

タグにスタイルを設定する場合は、

タグ{ プロパティ:値; }

となります。
例えば、見出しタグ <h2> に文字色黄色、背景色青、テキストの位置中央を設定する場合は、

h2{
 color:#ffff00; background-color:#0000ff; text-align:center;
}

となります。

同じスタイルをいくつかのタグに設定したい場合はこのようにすることもできます。

タグ1,タグ2,タグ3{プロパティ:値;}

タグをカンマ(,)で区切って並べます。{ }の中のプロパティと値は同じです。
上記の例を <h3> と <h4> にも適用したい場合は、

h2,h3,h4{
 color:#ffff00; background-color:#0000ff; text-align:center;
}

となります。

<h2>h2の見出しだよ!</h2>

h2の見出しだよ!

<h3>h3の見出しだよ!</h3>

h3の見出しだよ!

<h4>h4の見出しだよ!</h4>

h4の見出しだよ!


似たような書き方ですが次のような書き方をすると意味は全然変わってしまいます。これも覚えておきましょう。

タグ1 タグ2{プロパティ:値;}

これは、「 <タグ1> に囲まれた <タグ2> に対する設定」です。<タグ1> と <タグ2> との間にスペースを入れて並べます。
<タグ1> 以外のタグの中に <タグ2> があってもこのスタイルは適用されません。

p strong{ color:#ff0000; }

と設定すると、<strong> タグが <p> タグに囲まれている場合は、<strong> タグに囲まれた文字は赤くなりますが、<strong> タグが <p> 以外のタグ内にあっても赤くはなりません。

<p> タグ内にある場合

<p>肩・関節の痛みに<strong>ジワーッ</strong>と効き目浸透</p>

肩・関節の痛みにジワーッと効き目浸透

<div> タグ内にある場合

<div>肩・関節の痛みに<strong>ジワーッ</strong>と効き目浸透</div>

肩・関節の痛みにジワーッと効き目浸透

<div> タグ内にある場合は、<strong> タグにより強調はされますが赤くなりません。


 Home < 超初心者のためのスタイルシート講座 < Back < タグに対する設定の方法 > Next