ホームへ

【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番目以降に使いましょう。

なお、「-(ハイフン)」や「_(アンダーバー)」は頭文字にできます。

【原因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選でした。

マンガで読める関連記事