id属性とclass属性:ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 CSS(id属性とclass属性について)

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



id属性とclass属性 clear.gif
【解説】
HTMLで扱う属性は「汎用属性」といい、この汎用属性の「id属性」と「class属性」にスタイルを適用する事が出来ます。
特定のキーワードにスタイルを設定しておき、必要に応じてid属性とclass属性の値として指定する方法です。

【特徴】
同じタグに複数のスタイルを指定したい場合や、適用するタグを指定しないで、いろんなスタイルを利用したい場合に有効です。

id属性
idとする値の前にシャープ「」をつけます。
【書式】
#id {プロパティ:値}
id名の前に特定の要素を指定すると、その要素のみにスタイルが適用される。
要素#id {プロパティ:値}

class属性
classとする値の前にピリオド「.」をつけます。
【書式】
.class {プロパティ:値}
class名の前に特定の要素を指定すると、その要素のみにスタイルが適用される。
要素.class {プロパティ:値}

※id名やclass名には連想出来る名前をつける事を推奨します。
注意:id属性は1つのHTMLファイル中に同じid名は使用出来ない事になっていますので注意して下さい。(ブラウザによっては使用出来ますが使用しない事を推奨します。)尚、英数字が使用出来ますが頭文字は英字を使用下さい。

【書式:例】
<p id="id名">・・・</p>
<p class="class名">・・・</p>

複数のclass名を1バイトスペースで区切って1つのclass属性に指定可。
<p class="class1 class2・・・class6">・・・</p>


ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora