9-8 id とは
idは identity の略で、「正体」「身元」「独自性」「主体性」「同一性」という意味です。使い方はほぼ class属性 と似ておりますが、classとは違い一つの要素にだけ指定したスタイルを適用させる事が出来ます。
9-8-1 idの特徴 （classとの違い）
idは一つのページに一度しか使えません。（これとは反対にclassは一つのクラス名を複数の要素［タグ］で使用する事が出来ます）
- classとの違い
- idは一つのページに一度しか使えません。
- クラス名の時に使用した「.（ピリオド）」をidでは「#（ハッシュ）」に変更致します。
- id属性は
- 『要素に固有の名前を付ける（対象に名前を付けるのが目的）』 の際に利用致します。
- 同じ名前が幾つもあると困るので、結果として「あるidを持った要素はHTML文章中に一つだけしか存在しない」という状態になります。（例：header、footer、main、menu）。
- class属性は
- 同じ要素でも 『より細かく指定（分類）』 したい際に利用致します。
[ 関連事項 ： HP-TIPS > CSS > classとは ]
9-8-2 id名のみ
CSS
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
#menu {
background: #ffcccc; /* 背景色はピンク */
height: 30px; /* 高さ */
width: 180px; /* 横幅 */
}
#main {
background: #ffcc66; /* 背景色はオレンジ */
height: 50px; /* 高さ */
width: 200px; /* 横幅 */
}
-->
</style>
<!--
#menu {
background: #ffcccc; /* 背景色はピンク */
height: 30px; /* 高さ */
width: 180px; /* 横幅 */
}
#main {
background: #ffcc66; /* 背景色はオレンジ */
height: 50px; /* 高さ */
width: 200px; /* 横幅 */
}
-->
</style>
[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
HTML
<body> ～ </body> 内に記述して下さい。
<div id="menu">ここにメニュー項目を書きます。</div>
<div id="main">ここにメイン項目を書きます。</div>
<div id="main">ここにメイン項目を書きます。</div>
表示結果
ここにメイン項目を書きます。
CSS部分では #id名 { プロパティ： 値； } と書き込み、
HTML部分で id="" とid名を指定すればOKです。（今回の見本のid名は「menu」と「main」になります）
今回の書き方の他にも 要素名#id名 { プロパティ： 値； } と書くことも出来ます。
[ 関連事項 ： HP-TIPS > CSS > 基礎知識 > スタイルシートの書式 ]
9-8-3 id名の付け方
使用出来る文字は半角英数字であれば自由に付ける事が出来ますが、コンピューターにも理解出来るように出来るだけ意味のある言葉にした方が良いのかも知れません。
- OK
- 半角英数字（A～Z、a～z、0～9）
- ハイフン（-）
- NG
- アンダーバー（ _ ）：ユーザーの環境によっては表示出来ないケースがあります。
- ピリオド（.）
- コロン（：）
-
ピリオドやコロンは使っても良いとされておりますが、
ユーザーの環境によっては表示出来ないケースがあるかも知れません。現状ではハイフンのみの使用で名付ける事をお勧め致します。 -
但し、id値はアルファベットから始めなければいけないという決まりがあります。
（「chapter-1」という使い方は出来ますが、「1-chapter」や「-chapter」という使い方は出来ません）
[ 関連事項 ： HP-TIPS > CSS > ページのレイアウト > 名前の付け方 ]