head内に記入する場合 |
全体 |
|
指定 |
上記のものはホームページ全体を表しています。
その中の head 内に上のように書きます。
そして、スタイルシートを割り当てる 任意の名前を書いていきます。 それを下の body 内の id で名前指定して呼び出す事で簡単にスタイルシートを反映することができます。
後、名前部分にタグを指定してスタイルシートを記入しておくと、そのタグを使ったときに効果が反映されます。
( id の代わりに class を使うこともできます。詳しくは各ページへ )
|
効果 |
スタイルシートを複数指定する場合などに便利です。 |
解説 |
■ id でスタイルシートを呼び出す場合(id は1つにつき1つしか反映できません)
haed内のスタイルシートは #○○ という風に書きます。○○は任意の英数字を使ってください。※ 名前の前に # をつける事を忘れないようにしてください。そして、名前の後の { } 内にスタイルシートを書いていきます。複数指定する場合は ; で区切ってください。 例 #abc { font-size:14px; color:#ffaaaa; }
そして、実際にスタイルシートに反映するときは、タグなどに id="指定した名前"というふうに書きます。 例 <font id="abc">あああ</font> <b id="abc">あああ</b>
■ class でスタイルシートを呼び出す場合(複数指定可能です)
haed内のスタイルシートは .○○ という風に書きます。○○は任意の英数字を使ってください。※ 名前の前に . をつける事を忘れないようにしてください。そして、名前の後の { } 内にスタイルシートを書いていきます。複数指定する場合は ; で区切ってください。 例 .abc { font-size:14px; color:#ffaaaa; }
そして、実際にスタイルシートに反映するときは、タグなどに class="指定した名前"というふうに書きます。 例 <font iclass="abc">あああ</font> <b class="abc">あああ</b>
■ タグに直接反映させる場合
スタイルシートを反映させたいタグを head内のスタイルシート部分にそのまま書きます。そして、名前の後の { } 内にスタイルシートを書いていきます。複数指定する場合は ; で区切ってください。 例 font { font-size:14px; color:#ffaaaa; }
これで、指定したタグを使うとスタイルシートが反映されます。
注意をしなければならないのは、fontと指定すると、そのページにあるfontタグ全部に効果が反映してしまいます。部分的に反映させるには id で指定してください。それか、あまり使わないタグなどを使用するのもいいかもしれません。
後、使用したタグの効果も反映されます。
例 head部分に b { color:#ffaaaa; } と記述しておいて、<b>文字</b>と書きます。
すると、スタイルシートの文字色の変更と b のタグの太字の両方が反映される。
|
→ タグに直接書いていく場合
→ head内に記入する場合
→ 外部ファイルを用意する場合
▲上に移動
|