コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームCSSCSS|classとidの違いって何?CSS2017.08.16CSS|classとidの違いって何?HTMLの要素によく付いている属性としてclass属性とid属性の2つがあります。コーディングを学んで間もないうちはこれら2つの属性はどちらもスタイルシートで場所を指定するセレクタとして使用しているので、両者をどう使い分けるものなのかがよく分からないかもしれません。ここでは、この2つの属性の違いについてお話させていただきます。まとめ|基本的にclass属性を使いましょうclass属性とid属性の違いclassとidの大きな違いは次の2つです。同じ名前のidはページ内に1回だけしか指定できないがclass名は複数指定できる。id属性の方がスタイルシートの優先順位が高い。idで指定したデザインとclassで指定したデザインが同じ要素に適用されていて、idとclassがそれぞれ別の値だった場合、idセレクタで指定されたデザインの方が優先されるというルールがあります。※スタイルシートの優先順位についてはこちらも参照してみてください。2017.09.10CSSの優先順位ここでは、スタイルシートでプロパティと値をちゃんと指定しているのに効いてくれないという問題を解消するための方法として、プロパティが効く優先順位がどうなっているのかについてお話します。1つのテキストに複数の色の指定があった場合、最終的に適用される...この2つがidとclassの違いになります。どんなときにid属性は使うのか?1つのページに同じ名前が1つだけという制限のあるid属性ですが、どんなときに使うことになるのでしょうか。ページ内リンクで使用するときリンク先が他のページではなくて、ページ内のどこか他の場所に指定したいときはid属性を入れます。href="https://example.com/sample#link">リンクテキスト</a>上記はhttps://example.com/というサイトのsampleというページ内にあるlinkというid名がある場所へのリンクです。idではなくてclassで指定したとして、同じlinkという名前がページ内に複数あったとしら、どこにジャンプするのか分からなくて困りますよね。ページ内ジャンプで利用するときはid名で指定します。スタイルシートではなくJavaScriptなどで使われているclassやidといった属性を利用しているのはスタイルシートだけではありません。JavaScriptなどはあまり詳しくありませんが、これら他のプログラムで使用する目的でid属性を入れることもあります。まとめ|基本的にclass属性を使いましょうスタイルシートでclassだけを使っていて困ることというのは基本的にありません。同じid属性はページ内に1回しか登場させられないという制限がありますので、基本的にclass属性を使っていけば大丈夫です。