サイト内検索
...スタイルシート(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」で、文字のサイズ・色を変えるには》
<!--
.sample3{font-size: 25px; color: #009900;}
-->
</style>
[headの中]
<style type="text/css"><!--
.sample3{font-size: 25px; color: #009900;}
-->
</style>
[bodyの中]
<div class="sample3">25px・グリーン色に変えます。</div>[ブラウザ上]
25px・グリーン色に変えます。