class属性とid属性

みなさまどうも。

続きまして『id属性』と『class属性』について勉強していきましょう。

これは非常によく使う属性で使いこなせればCSSの記述の幅が広がるのでぜひ使いこなせるようになっちゃってください。

まず「id属性ってなに？class属性ってなに？」ってお話ですが、簡単に言うと要素に名前をつけるような感じです。でもってCSSやJavaScriptなどからその名前が付いた要素を特定して処理させたりすることができます。

これまでは特定の要素全部にスタイルを適用させる記述をしてきましたね。id属性やclass属性を使うと特定の要素にスタイルを適用させることができるようになります。

では記述の方法をHTMLソースからみていきましょう。

HTML側はタグにid属性と値、もしくはclass属性と値を記述するだけでOKです。

<p id="test">ここにスタイルを適用するよ</p>

<p class="test">ここにスタイルを適用するよ</p>

id属性とclass属性を同時に記述することも可能です。

<p id="test_id" class="test_class">ここにスタイルを適用するよ</p>

一般にid属性の値は『id名』、class属性の値は『クラス名』(class名)と呼ばれます。よく使われる言葉なので覚えておきましょう。

続いてid属性とclass属性には多少の命名規則がありますのでそれも確認しておきましょう。使用できる文字列はアルファベット、数字、『-』(ハイフン)、『_』(アンダースコア)です。ただし、先頭に数字または『-』は使えません。日本語もNGですのでセレクタ名を日本語で記述してはダメです。

こんな感じですね。

そして注意するべきところですが一般的なブラウザでは『標準モード』と『互換モード』でCSSの大文字小文字の解釈が変わります。標準モードとは厳格なレンダリングを行うモード、互換モードとは適当に解釈してレンダリングを行うモードといったところです。標準モードでは大文字小文字が区別されますが互換モードでは大文字小文字が区別されません。ですのであまり大文字は使われなく、すべて小文字で構成するのが一般的です。単語の区切りは『-』か『_』を使用すると良いです。

例
　main_contents
　main-contents

id名とクラス名で若干の違いがありますが同じような命名規則となっています。なので上記の事を守れば問題ないです。

HTML側のid属性とclass属性の記述方法については以上となりますが問題はないでしょうか。書いていくうちに慣れてくるかと思います。

続いての記事でid属性とclass属性の違いやCSS文法について解説していきますので引き続き頑張っていきましょう。

ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア