シェアする
The class and id Attributes - Japanese Only
みなさまどうも。
続きまして『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文法について解説していきますので引き続き頑張っていきましょう。
ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
