「id」属性も以下のように使用することで、HTMLタグにオリジナルの名前をつける
ことが可能です。
HTMLファイル --------------------------------------------------
<h2 id="tigers">阪神</h2>
<h2 id="marines">ロッテ</h2>
---------------------------------------------------------------
ただし、CSSの記述は「class」属性とは違い、
以下のように、セレクタの先頭に「＃（シャープ）」をつけてください。
CSSファイル ----------------------------------------------------
#tigers {
color: #FFCC00;
}
#marines {
color: #000000;
}
---------------------------------------------------------------
同じ機能を持っている属性ですが、「class」属性と「id」属性は、使用回数に
違いがあります。
「class」属性は、１つのページ内に何度使用してもＯＫです。
しかし、「id」属性は、１つのページ内に１度しか使用してはいけません。
であれば、何度も使える「class」属性ばかり使えばいいのでは？
という声が聞こえてきそうですが、確かにその通りですね。
ただ、CSSファイルも、CSSスタイルをたくさん記述すれば、一杯になって
何が何だか分からなくなってしまいますよね。
私の場合は、CSSを整理する為に、記述方法の違う「id」属性を使っています。
後、皆さん使われたことがあると思いますが、「id」属性は、ページ内リンクの
リンク先としても使用することが出来ます。
例えば、以下のように、「阪神関連の記事」というテキストに、「#tigers」という
リンクを貼って、クリックすると、id="tigers"のある箇所までジャンプするのです。
HTMLファイル --------------------------------------------------
<a href="#tigers">阪神関連の記事</a> <- このリンクをクリックすると。
<p>野球関連記事</p>
<p id="tigers">阪神</p> <- ここまでジャンプします。
<p id="marines">ロッテ</p>
---------------------------------------------------------------
以上が、これからCSSデザインをする上で必ず覚えておかなければならない
CSS記述の基本になります。
|
