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