こんにちは。栗野りつ(@kurinoritu)です。
ブログをワードプレス へお引越しするため、
準備を着々と進めております。
素人なりに見やすいブログになるよう、
プログラミングを勉強しながら構築中!
学んだことをシェアしていきます。
HTMLでは、要素(divとかpとか)をさらにグループ分けしたり、特定のものだけを指定するために、classやidという属性をつけることができます。
1. classとidってなに?
例えば
<p>くりの</p>
<p>りつ</p>
というHTMLの記述があるとします。
これにCSSで装飾する命令をすると、
p {
color:red;
}
赤文字にすることができます。
でもこれだと、「くりの」も「りつ」も赤文字になってしまうんですよね。
そんな時に属性が役に立ちます。
<p class=“strong”>くりの</p>
<p id=“name”>りつ</p>
のようにしておけば、それぞれに個別で指示を出すことができるのです。
2. classとidの使い分け
似たような使い方にも思えるこのclassとid。
どのように使い分ければいいのでしょうか?
その名称を考えれば、答えはおのずと見えてきます。
クラスっていうと、学校のクラスとかのイメージが強いんじゃないかなと思います。
同じ学年の中で、1組の子、というのがclassが表していることです。
pという要素の記述はたくさんあるけれど、その中のstrongという属性のものだけ、という感じですね。
学年の全員が1組ってわけではないけれど、同じクラスの人は何人もいますよね?
そういうイメージ。
idは皆さん日頃からよく使ってますよね。
サイトにログインするときなんか、だいたいIDが必要です。
じゃぁIDって何なのか?
一人一人に割り当てられた名前みたいなものですよね。
同じIDの人が居たら困っちゃうわけです。
classもidも同じ要素の中で、特定のものだけを示してくれるという点では同じ。
だけど、idはたった1つだけ(同じページの中に)を示します。
classはいくつもあってもいいのです。同じグループ、という表記なのです。
3. cssで記述するときは
<p class=“strong”>くりの</p>
<p id=“name”>りつ</p>
HTMLではこのように書きます。
cssで記述するときは、
p .strong {
color:red;
}
p #name {
color:green;
}
となります。
これで、「くりの」は赤文字、「りつ」は緑文字と別々の装飾ができることになります。
単純なのですが意外と打ち間違えたりしやすいので注意しましょう!
私も最初、この区別がしっかりしてなくて思い通りにできずに苦労しました…。
4. idの使いどころ
基本的には全部classを使う、と思っておくのが初心者はいいと思います。
idはここぞという時だけ使いましょう。
idを使うメリットとしてはページ内リンクに使える、ということがあります。
ページの中に1つしか出てこないので、リンクの場所として使用できるんですね。
それから、優先度の違いがあることも覚えておきましょう。
classよりもidが優先になります。
cssが反映されない!という時は、優先度を確認してみるといいかもしれません。
5. まとめ
classとidはどちらも、同じ要素の中から特定のものだけを指定できる属性ということでした。
classはグループというイメージ。
ページ内で何度でも使えます。
一方、idはページ内で1度きり。
1つだけを指定するためページ内リンクに使用できます。
初心者は基本的にはclassを使っておきましょう。
以上、classとidの使い分けでした!