IDとclassを理解する
＞HPの作り方TOP ＞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> |