【html/CSS】idやclassの指定が効かない原因6選
htmlにidやclassを指定すると任意のCSSが指定できます。
しかし、idやclassは間違えやすい要素の一つです。
idやclassの間違えやすいポイントを6つ紹介します。
目次
【原因1】頭文字が数字になっている
classやid名は半角英数で任意でつけることができますが、頭の文字を数字にすることはできません。
NG
<div id="1text">テキスト</div>
<style>
#1text{
margin:0;
}
</style>OK
<div id="text1">テキスト</div>
<style>
#text1{
margin:0;
}
</style>数字は2番目以降に使いましょう。
なお、「-(ハイフン)」や「_(アンダーバー)」は頭文字にできます。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【原因2】idとclassを逆に指定している
idは「#（シャープ）」、classは「.（ピリオド）」です。
idとclassで同じ名前にしてもそれぞれで機能します。
「idで指定したつもりがclassだった」ということになっていないか確認しましょう。
NG
<div id="main">テキスト</div>
<style>
.main{
margin:0;
}
</style><div class="main">テキスト</div>
<style>
#main{
margin:0;
}
</style>OK
<div id="main">テキスト</div>
<style>
#main{
margin:0;
}
</style><div class="main">テキスト</div>
<style>
.main{
margin:0;
}
</style>【原因3】「.」や「#」をつけていない
「.」や「#」の付け忘れに注意です。
<div class="main">
テキスト
</div>
<style>
.main{
margin:0;
}
</style><div id="main">
テキスト
</div>
<style>
#main{
margin:0;
}
</style><main>
テキスト
</main>
<style>
main{
margin:0;
}
</style>左はclass="main"に対する指定、
右はid="main"に対する指定、
中は<main>タグに対する指定でそれぞれ別物です。
【原因4】指定したclass名とCSSに書いたclass名が異なる
classを指定した時点でスペルミスをしていてCSSに書くときに正しくなっている場合、異なる名前となるため効きません。
NG
<div class="mein">
テキスト
</div>
<style>
.main{
margin:0;
}
</style>OK
<div class="mein">
テキスト
</div>
<style>
.mein{
margin:0;
}
</style>英語としては「main」が正しいですが、classに「mein」と指定し、CSSでも「mein」と指定した場合、効きます。
htmlのclass名をコピーしてCSSに貼り付けるのも一つの手です。
【原因5】ひとつの要素内に属性は2度指定できない
idやclassに限らず、ひとつのhtmlタグ内に同じ属性を2度指定することはできません。
NG
<div id="main" id="inner">テキスト</div><div class="main" class="inner">テキスト</div>OK
<div id="main">
<div id="inner">テキスト</div>
</div><div class="main inner">テキスト</div>idはひとつのhtmlタグにつきひとつだけ指定できます。
どうしてもidを使いたいのであれば親子関係にしてそれぞれのhtmlタグにidを指定しましょう。
classはひとつのhtmlタグに2つ以上指定できます。
classを2種類以上指定する場合はclass名の間に半角スペースをいれます。
【原因6】classを2つ指定するのにアンダーバーで空けている
classを2つ指定するとき、半角スペースの代わりに「-(ハイフン)」や「_(アンダーバー)」などを使うことはできません。
<div class="main inner">テキスト</div>
<style>
.main.inner{
margin:0;
}
</style><div class="main_inner">テキスト</div>
<style>
.main_inner{
margin:0;
}
</style>上は.mainと.inner2つのクラス指定されていますが、
下は.main_innerという1つのクラスのみ指定されています。
空白と記号は意味が異なるため注意しましょう。
【まとめ】idやclassが効かない原因
【原因1】頭文字が数字になっている
【原因2】idとclassを逆に指定している
【原因3】「.」や「#」をつけていない
【原因4】指定したclass名とCSSに書いたclass名が異なる
【原因5】ひとつの要素内に属性は2度指定できない
【原因6】classを2つ指定するのにアンダーバーで空けている
上記を確認してミスがないか探しましょう。
以上、idやclassが効かない原因6選でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
