HTMLとCSSでのスタイルクラスとIDの使用

今日のウェブサイトでは、クラス属性は、IDが持つ特異性の観点から簡単に操作できるため、ほとんどの要素でよく使用されます。現在のHTMLページの中には、文書内で複数回繰り返されるものや、一度しか表示されないものなど、クラス属性でいっぱいになるものがあります。

IDセレクタ

IDセレクタを使用すると、タグや他のHTML要素に関連付けることなく、特定のスタイルに名前を付けることができます。 HTMLマークアップにイベントに関する情報が含まれている部門があるとします。この区分にID属性に「event」を付けることができます。次に、1ピクセル幅の黒い境界線でその区分を概説する場合は、次のようなIDコードを記述します。

#event {border：1px solid＃000; }

IDセレクタの課題は、HTMLドキュメント内で繰り返すことができないことです。それらは一意でなければなりません（サイトの複数のページで同じIDを使用できますが、HTMLドキュメントごとに1回のみ使用できます）。したがって、この境界線を必要とする3つのイベントがある場合は、それらにそれぞれ「event1」、「event2」および「event3」というID属性を与え、それぞれにスタイルを設定する必要があります。したがって、前述の「イベント」のクラス属性を使用して、それらをすべて一度にスタイルする方がはるかに簡単です。

ID属性の複雑さ

ID属性のもう一つの課題は、クラス属性よりも特異性が高いことです。これは、以前に確立されたスタイルを上書きするCSSが必要な場合、IDにあまりにも頼りすぎている場合は、そうするのが難しいことを意味します。この理由から、多くのWeb開発者は、その値を一度しか使用しない場合でも、マークアップ内のIDを使用しなくなり、ほぼすべてのスタイルで特異性の低いクラス属性に変わってしまいました。

ID属性が作用する領域の1つは、インページアンカーリンクを持つページを作成する場合です。たとえば、視差スタイルのWebサイトで、1ページのすべてのコンテンツが含まれ、そのページのさまざまな部分にリンクするリンクがあるとします。これは、これらのアンカーリンクを使用するID属性とテキストリンクを使用して行われます。リンクの「href」属性に「＃」記号が付いた属性の値を追加するだけです。

これがリンクです

クリックまたはタッチすると、このリンクはこのID属性を持つページの部分にジャンプします。ページ上のどの要素もこのID値を使用していない場合、リンクは何も行いません。

サイト内でページ内リンクを作成する場合は、ID属性の使用が必須ですが、一般的なCSSスタイル設定のためにクラスに切り替えることはできます。これは今日のページをマークアップする方法です。クラスセレクタは可能な限り使用し、CSSのフックとしてだけでなくページはめ込みリンクとしても機能するように属性を必要とする場合にのみIDに変換します。