id(アイ・ディー)の使い方
クラスの意味・書き方はわかりましたか?
class(クラス)は記述したページ内で何度も使う事ができましたが
id(アイ・ディー)は、ページ内で一度だけ使うことができます。
主にページの大枠やレフトナビ、メインコンテンツ等そのページ内で一度しか出てこないものに対して使います。
CSSの書き方 id
書き方はclassとほとんどいっしょです。 classは . (ドット)をつかいましたがidでは #(シャープ)を使い、指定するときはclass=の代わりに id=を使います。
<head>
<style type="text/css">
<!--
#font{
color:blue;
}
-->
</style>
<head>
<body>
<p id="font">idを使って青字にします。</p>
</body>
</html>
idを使って青字にします。
書き方はclassのときとほとんどいっしょですね。
<head>部分に<style type="text/css">〜</style>を記入しその中にCSSを記入していきます。
画面に記入したCSSが見えないように<!--〜-->
をつかってコメントアウト(見えないようにする)します。id(アイ・ディー)を使うので
# (シャープ)を書きアイ・ディー名を書きます。classの時と同じで数字(1,2,3...)や記号(_,-)
からは始められません。
#font-red #width-120px ←○
#-font #120px ←×
名前を決めたら { 〜 } を記入しその中に
『プロパティ』と『値』を記入します。
『プロパティ』と『値』の記入方法はタグの中に書く方法と同じです。
では、作ったアイ・ディーをタグに指定します。アイ・ディー名は font なのでタグの中に id="font"と記入します。これで指定したタグの中のテキストは青く表示されます。
<p>idで文字を赤にしてみましょう</p>
<p>〜</p>に囲まれた文字、上は緑色、下は赤にしてみましょう。
<head>
<style type="text/css">
<!--
#font-green{
color:green;
}
#font-red{
color:red;
}
-->
</style>
</head>
<body>
<p id="font-green">文字を緑にしてみましょう。</p>
<p id="font-red">文字を緑にしてみましょう。</p>
</body>
</html>
clssとidは用途によって使い分けるようにしましょう。