【Part5】classとidを使ってcssを細かく制御する

CSS（Cascading Style Sheets）は、ウェブページのデザインとレイアウトを定義するために使用される言語です。この言語を使って、ウェブ開発者はページの色、フォント、間隔、配置などを指定できます。CSSを効率的に使用するためには、classとidという二つの重要なセレクタがあります。

classとidを使う理由

classとidセレクタは、特定のHTML要素にスタイルを適用するために使用されます。これらのセレクタを使用する理由は、スタイルシート内で要素を簡単に特定し、管理することができるからです。例えば、同じスタイルを複数の要素に適用したい場合や、特定の要素にユニークなスタイルを設定したい場合に役立ちます。

classとidの使い分け

classとidの主な違いは、classは複数の要素に適用できる一方で、idは一つの要素に対してのみ使用される点です。classは再利用可能なスタイルを作成するのに適しており、idはページ内で一意である必要がある要素、例えばナビゲーションバーのようなものに使用されます。

• idは一つしかない要素
• classは複数個所で使いたい要素

と覚えておきましょう！

CSSでの利用方法

CSSでclassとidを利用するには、セレクタをスタイルシートに記述し、対応するHTML要素にclassやid属性を追加します。classセレクタはピリオド（.）で始まり、idセレクタはハッシュタグ（#）で始まります。例えば、.cardはclassセレクタであり、#logoはidセレクタです。

<div class="card"> ... </div> 
<p id="logo"> ... </p>

.card {
  color: #fff;
}

#logo {
  color: #000;
}

まとめ

classとidを効果的に使用することで、ウェブページのメンテナンスが容易になり、コードの可読性が向上します。また、レスポンシブデザインやアクセシビリティの改善にも寄与します。CSSの制御にclassとidを上手に活用しましょう。