スタイル クラスと ID の使用

クラスと ID は CSS を拡張します

E + /ゲッティイメージズ

今日の Web で適切なスタイルの Web サイトを構築するには、次のことを深く理解する必要があります。 カスケード スタイル シート .一連の CSS スタイルを HTML ドキュメントに適用して、Web ページのルック アンド フィールを伝えます。

クラスおよび ID 属性

デザイナーは、スタイルを適用する必要がある場合があります。 いくつか ドキュメント内の要素のすべてのインスタンスではありませんが、その要素のすべてのインスタンスではありません。これらの目的のスタイルを実現するには、 クラス と ID HTML 属性。これらの属性は、ほぼすべてに適用可能なグローバル属性です。 HTML タグ —したがって、ドキュメント内の分割、段落、リンク、リスト、またはその他の HTML のいずれかのスタイルを設定する場合でも、クラスおよび ID 属性を使用して、このタスクを達成することができます!

クラスセレクター

クラス セレクターは、複数のスタイルをドキュメント内の同じ要素またはタグに設定します。たとえば、アラートとしてテキストの特定のセクションを別の色で呼び出すには、段落に次のようなクラスを割り当てます。

|_+_|

これらのスタイルは、 全て 段落を青色 (#0000ff) にしますが、class 属性が アラート 代わりに赤 (#ff0000) でスタイルされます。これは、class 属性が、タグ セレクターのみを使用する最初の CSS ルールよりも特異性が高いためです。で作業するとき CSS 、より具体的なルールは、より具体的でないルールをオーバーライドします。したがって、この例では、より一般的なルールがすべての段落の色を設定しますが、2 番目のより具体的なルールは、一部の段落でのみその設定をオーバーライドします。

HTML マークアップでこれを使用する方法を次に示します。

|_+_|

この段落は、ページのデフォルトである青色で表示されます。

この段落も青色になります。

class 属性が要素セレクタ スタイルの標準の青色を上書きするため、この段落は赤色で表示されます。

その例では、スタイル アラート それを使用する段落要素にのみ適用されます アラート クラス。そのクラスを複数の HTML 要素で使用するには、次のように、スタイル呼び出しの先頭から HTML 要素を削除します。

|_+_|

このクラスは、それを必要とするすべての要素で使用できるようになりました。のクラス属性値を持つ HTML の任意の部分 アラート このスタイルを取得します。以下の HTML には、段落とレベル 2 の見出しの両方があり、 アラート クラス。両方とも赤の背景色を表示します。

|_+_|

この段落は赤で書かれます。

今日の Web サイトでは、ID よりも具体性の観点から扱いやすいため、ほとんどの要素でクラス属性が使用されることがよくあります。現在のほとんどの HTML ページには、ドキュメント内で頻繁に繰り返されるクラス属性や、1 回しか表示されないクラス属性が含まれています。

ID セレクター

ID セレクタ タグなどに関連付けずに特定のスタイルに名前を付ける HTML要素 .

イベントに関する情報を含む HTML マークアップの区分を想定します。あなたはこの部門を与えることができます ID 属性 の イベント 、次にその区画を 1 ピクセル幅の黒い枠線で囲みます。

|_+_|

との挑戦 ID セレクター HTML ドキュメントで繰り返すことができないということです。 ID は一意である必要があります (サイトの複数のページで同じ ID を使用できますが、個々の HTML ドキュメントごとに 1 回だけ使用できます)。したがって、すべてこの境界線が必要な 3 つのイベントについては、ID 属性を特定する必要があります。 イベント1 、 イベント2 、 と イベント3 そしてそれぞれスタイリング。したがって、前述のクラス属性を使用する方がはるかに簡単です。 イベント それらを一度にスタイリングします。

ID 属性の複雑さ

ID 属性のもう 1 つの課題は、クラス属性よりも特異性が高いことです。 ID に過度に依存している場合、以前に確立されたスタイルをオーバーライドするのは難しい場合があります。多くの Web 開発者は、値を 1 回だけ使用するつもりであっても、マークアップで ID を使用することをやめ、代わりに、ほぼすべてのスタイルであまり具体的でないクラス属性に目を向けています。

ID 属性が効果を発揮する領域の 1 つは、ページ内アンカー リンクを含むページを作成する場合です。たとえば、1 つのページにすべてのコンテンツが含まれ、そのページのさまざまな部分に「ジャンプ」するリンクを含むパララックス スタイルの Web サイトを考えてみましょう。 ID 属性とテキスト リンクは、これらのアンカー リンクを使用します。その属性の値を追加します。 # 記号、 href 次のようなリンクの属性:

|_+_|

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

サイトでページ内リンクを作成するには、ID 属性を使用する必要がありますが、一般的な CSS スタイリングの目的でクラスを使用することもできます。これが今日、デザイナーがページをマークアップする方法です。クラス セレクターを可能な限り使用し、属性が CSS のフックとしてだけでなくページ内リンクとしても機能する必要がある場合にのみ ID を使用します。