サイト内検索

...スタイルシート(css)...

スタイルシート

「id」と「class」の違い

《サイズ15px・オレンジ色の文字の指定の場合》

[headの中]

<style type="text/css">
<!--
.sample0{font-size: 15px; color: #ffa500;}
-->
</style>

[bodyの中]

<div ciass="sample0"> サイズ15px・オレンジ色の文字になります。</div>

[ブラウザ上]

サイズ15px・オレンジ色の文字になります。

このスタイルが適用される全てのページの文字が同じスタイルになりますので、
違うサイズの文字にするために、「class」を指定します。

《サイズを25pxに変えるには》

[headの中]

<style type="text/css">
<!--
.sample1{font-size: 25px;}
-->
</style>

[bodyの中]

<div class="sample1">サイ25pxになります。</div>

[ブラウザ上]

サイズ25pxになります。

この「sample1」を適用したタグだけは、fontサイズが25pxになります。

《一部分(色も変えたい)を変えたいときに「id」を指定します。》

《色を変えるには》

[headの中]

<style type="text/css">
<!--
#sample2{color: #009900;}
-->
</style>

[bodyの中]

<div class="sample1" id="sample2">色をグリーンに変えます。</div>

[ブラウザ上]

色をグリーンに変えます。

「id」を指定すると、「class」による指定を行って、
一部分だけを変更することができます。

《「id」を使わないで、別の「class」での設定方法》

《別の「class」で、文字のサイズ・色を変えるには》

[headの中]

<style type="text/css">
<!--
.sample3{font-size: 25px; color: #009900;}
-->
</style>

[bodyの中]

<div class="sample3">25px・グリーン色に変えます。</div>

[ブラウザ上]

25px・グリーン色に変えます。

Copyright c 2007.10.01 luc All rights reserved.