IDとclassを理解する

IDとclassを理解する
HPの作り方(簡単HP作成法)

HPの作り方TOP >IDとclassを理解する

関連リンク

スポンサードリンク

IDとclassを理解する

このような書き方でp要素に対してスタイルを定義した場合、その文章にある全てのp要素(メニュー1、メニュー2、コンテンツ)にそのスタイルが適用されてしまいます。

個々のp要素に対して別々のスタイルを適用したい、もしくは、文の中のある特定の単語だけをマークアップしたいと考えた時に、その要素に付ける名札のような存在である ID、class、spanと呼ばれる3つの要素を取り入れなければなりません。

これらの名札は、index.htmlファイルのh1やpなどの要素に対して指定します。例えば、コンテンツに対してclassとspanを適用した場合、

<p class="a1">
Lesson1では<span>Sample1</span>を用いたHPの作成方法を解説しています。
</p>

のように、class="○"の○につけたい名前を記述します。

idとclassの役割は全く同じですが、idで定義された名札は、1ページに対して1回しか使えないのに対して、classは何度でも使用可能という点で両者は異なります

<p class="a1">
Lesson1では<span>Sample1</span>を用いたHPの作成方法を解説しています。
</p>
<p class="a1">
Lesson2ではHPの公開の仕方を解説しています。
</p>

は正しい記述方法ですが、

<p id="a1">
Lesson1では<span>Sample1</span>を用いたHPの作成方法を解説しています。
</p>
<p id="a1">
Lesson2ではHPの公開の仕方を解説しています。
</p>

は、同じIDが2つ以上登場するので不適切な記述となります。(片方のID名をa1からa2などに変えれば正しくなります)

サンプルにID、classといった名札やspanを付けてみますと下のようになります。

<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2">
<h1><a href=""><img src="gif/4.gif" alt="sample page" width="150" /></a></h1>
</td>
</tr>
<tr>
<td colspan="2">
<p id="a1">|<a href=""> Sample1 </a>|<a href=""> Sample2 </a>|<a href=""> Sample3 </a>|</p>
</td>
</tr>
<tr>
<td>
<p class="a2"><img src="gif/6.gif" alt="menu" width="40" /></p>
<p class="a3"><a href="">・Lesson1</a></p>
<p class="a3"><a href="">・Lesson2</a></p>
<p class="a3"><a href="">・Lesson3</a></p>
</td>
<td>
<img src="gif/5.gif" alt="" width="100" />
<h2>■Lesson1</h2>
<p class="a4">
Lesson1では<span>Sample1</span>を用いたHPの作成方法を解説しています。
</p>
<p class="a4">
Lesson2ではHPの公開の仕方を解説しています。
</p>
</td>
</tr>
<tr>
<td colspan="2">
<address>Copyright(C) ○○○ all right reserved.</address>
</td>
</tr>
</table>

Copyright @2007 nkdesk all right reserved.