Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSS
入門編

トップページ
CSS入門編 - class属性とid属性

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ですのでセレクタ名を日本語で記述してはダメです。

×	-main
×	2_column
◯	_main_2_column

こんな感じですね。

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

例
　main_contents
　main-contents

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

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

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

ではー。

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