簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

【初心者向け】CSSのidとclassの違いとは?

2021/4/5

【初心者向け】CSSのidとclassの違いとは?

CSSに出てくるidとclassの違いとはなんでしょうか。そしてどう使い分ければいいのでしょうか。

そもそもidとclassは両方とも、事前に定義してある外壁や装飾のようなものです。

HTMLという骨組みにclassやidを適用することで立派な家や部屋になるイメージです。

同じような役割を持つ両者ですが、使い方に若干の違いがあります。

classとidの違いをまとめてみると

  • idのほうがclassより優先される
  • idはHTML内で1回しか使えない
  • classはHTML内で複数回使える
といったところです。idを必ず使わなければいけないわけでもなく、すべてclassで記述しても問題ありません。

反対にすべてidで記述しても問題はありませんが、HTMLで1回しか使えないため、例えば二つ同じ装飾があっても別idにする必要があり、実用的ではないかもしれません。

idを使うメリットとは

HTMLに1回しか使えないことを応用して、idをアンカータグとして使うことができます。

アンカータグとはHTMLの途中に遷移するタグですね。

例えばこのページにもidを使ってみました。
https://amsstudio.jp/news/2021/04/css-class-id.html#id

にアクセスすると、idを使うメリットとは、に飛びますよね。こういった使い方も可能です。

また、技術的な話になりますが、idはHTMLに一つしかないのでJavaScriptを使ってHTMLを動的に変更する際にも利用したりもします。

classやidの使い方は人それぞれですが、基本classを使い、目印としてidを使うケースが多いようですね。

まとめ

個人的にはidをよくアンカーとして使っています。

余談ですが、idを複数回HTML内に登場させると当然のことながら、アンカータグがうまく動作しなかったり、JavaScriptの挙動がおかしくなるケースがありますのでご注意ください。

最後までお読みいただきありがとうございました。

この記事を書いたのは

株式会社AMS 取締役副社長 古倉 功一

2005年からSEOに本格的に取り組み、SEO歴は15年以上。現在はリスティング広告、SEOをメインにしたWebコンサルを提供中。好きな番組:ポケットモンスター。

  • 石川県産業創出支援機構(ISICO)「お店ばたけ」ホームページドクター
  • セミナー講師(Webマーケティング、SEO、PPC広告等)
  • ミラサポ専門家登録(派遣先からの総合評価平均 5点中4.9)
常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】月~金曜9:00~18:00

月~金曜9:00~18:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ