CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS ID とクラス:主な違いの説明

CSS クラスと ID を比較すると、CSS クラスが複数の要素にスタイルを適用するという違いがあります。一方、ID は 1 つの一意の要素にスタイルを適用します。 ID は、特別な URL を使用して要素に直接リンクでき、JavaScript によって使用されるという点でも特別です。

CSS では、セレクターは、Web ページ上の特定の要素または要素の範囲をターゲットにするために使用されます。要素をターゲットにすると、1 つまたは複数のスタイルのセットを要素に適用できます。

幅広いセレクターが用意されています。最もよく使用される 2 つは class です。 と ID 。どちらも、スタイルを適用する必要がある要素をターゲットにするために使用されます。

CSS クラスと ID セレクター

class の違いは何ですか? および ID セレクター？これは CSS を初めて使用する多くの開発者から寄せられる質問であり、このガイドではそれに答えていきます。 

このガイドを読み終える頃には、これら 2 つのセレクターの違いがわかるでしょう。コードでどのセレクターを使用するかを十分な情報に基づいて決定するために必要な情報が得られます。始めましょう。

CSS セレクター

Web ページをデザインするときは、ページ上の特定の要素に特定のスタイルを適用する必要があります。たとえば、すべての

タグのテキストの色を緑色に設定したり、ヘッダーのフォント サイズを変更したりすることができます。

セレクターを使用すると、スタイルを適用できる Web ページ上の特定の要素をターゲットにすることができます。 CSS では、ユニバーサル セレクター、子孫セレクター、子セレクター、グループ化セレクターなど、使用できるセレクターが多数あります。 CSS セレクターについてさらに詳しく知りたい場合は、CSS セレクターの初心者向けガイドをお読みください。

2 つのセレクター、class と id 、それぞれ HTML 要素に割り当てられたクラスと ID に基づいて要素にスタイルを適用するために使用されます。ただし、これらのセレクターは混同されることが多いため、それぞれがどのように機能するかを見てみましょう。

ID セレクターは一意です

ID セレクターを使用すると、単一に適用するスタイル ルールを定義できます。 Web ページ上の要素。各 Web ページには、単一の ID 属性を持つ要素を 1 つだけ含めることができます。これは、ID セレクターを複数の要素のスタイルに使用することはできないことを意味します。

ID セレクターはハッシュ記号を使用して定義されます。これらの直後に、一連のスタイル ルールを適用する ID 値が続きます。以下は、動作中の ID セレクターの例です。

<html>
<p id="betaBanner">This is a banner.</p>
<style>
#betaBanner {
 color: white;
 background-color: orange;
}

このスタイルは、ID betaBanner を持つ HTML ドキュメントの

要素に適用されます。 。このスタイルは、要素の背景色をオレンジに設定し、要素内のテキストの色を白に設定します。

クラス セレクターが一意ではありません

クラス セレクターを使用すると、任意の要素に適用するスタイル ルールを定義できます。 特定の値に等しいクラス属性を持つ。

前に説明したように、ID セレクターは 1 つの要素のスタイルを設定するためにのみ使用できます。これは、ID は Web ページ上で 1 回しか使用できないためです。一方、クラスは複数の要素にわたって使用できます。したがって、クラス セレクターを使用してスタイルを適用すると、そのクラスを共有する要素はすべて、定義したスタイルの影響を受けることになります。

クラス セレクターは、ピリオドの後にスタイル セットを適用するクラスの値を使用して定義します。以下は、実際のクラス セレクターの例です。

<html>
<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>
<style>
.orangeBackground {
 background-color: orange;
}

このスタイルは、

タグの背景色をオレンジに設定します。さらに、このスタイルは

タグの背景色をオレンジに設定します。これは、両方のタグが同じクラス名 orangeBackground を共有しているためです。

さらに、Web 要素は複数の異なるクラスを共有できます。したがって、large というクラスを適用したいとします。 上記の

タグに追加するには、次のコードを使用します。

<html>
<div class="orangeBackground large">This is a banner.</div>

このコードでは、orangeBackground に対して定義されたスタイル ルールはすべて と large クラスが Web 要素に適用されます。一方、ID を使用すると、各要素が 1 つの ID しか持てないため、この動作を再現できませんでした。

ID には独自のブラウザ機能があります

これまで、ID は 1 つの要素にのみスタイルを適用できるという事実について説明しました。複数の要素にスタイルを適用できるクラスとは異なります。クラスセレクターと ID セレクターの違いはこれだけではありません。

ブラウザでは、クラスには特別な機能はありません。その主な目的は、Web ページ上のさまざまな要素にスタイルを適用できるようにすることです。一方、ID は、ブラウザーが Web ページの特定の部分に移動するために使用できます。

要素に ID を割り当てると、特別な URL を使用してその要素に直接リンクできます。 ID は Web ページ上で一意であるため、この動作は機能します。

ユーザーをヘッダーまで自動的にスクロールさせる Web サイトへのリンクを送信したいとします。次のコードを使用してこれを行うことができます:

<h3 id="section3">Section Three</h3>

このコードでは、テキスト Section Three を含む

タグに ID を割り当てています。 。これで、Web ページ上のその要素までスクロールする直接リンクをユーザーに送信できるようになりました。これは、次の URL を使用して実行します。

https://domain.com/index.html#section3

ユーザーがこの URL に移動すると、(domain.com は はウェブサイトの URL です）、section3 という ID の見出しまでスクロールします。 。この動作はクラスには適用されません。

ID は JavaScript によって使用されます

JavaScript を使用した経験がある場合は、そのプログラミング言語で ID が一般的に使用されることをご存知でしょう。 getElementById 関数を使用すると、Web ページ上の要素を選択できます。これは、同じ ID を共有できる要素は 1 つだけであるという事実に基づいています。

一方、クラスは Web ページ上の複数の要素を反映できます。 JavaScript で特定の要素を操作する場合には、これらは役に立ちません。

ID と CSS クラス セレクターの両方を使用できます

HTML には、要素に ID とクラスの両方を割り当てることを妨げるルールはありません。

CSS ID とクラス:主な違いの説明

「キャリア カルマは、私が最も必要としたときに私の人生に入り込み、すぐにブートキャンプに参加するのに役立ちました。卒業から 2 か月後、私は自分の価値観と人生の目標に合致する夢の仕事を見つけました。」

Rockbot のソフトウェア エンジニア、Venus 氏

ブートキャンプにマッチするものを見つけてください

backgroundOrange というクラスに関連付けられたスタイルを適用するとします。

タグに追加します。ただし、いくつかの独自のスタイルを
に適用することもできます。次のコードを使用してこれを行うことができます:

<div class="backgroundOrange" id="customDiv"></div>

この

タグは、クラス backgroundOrange のスタイルの影響を受けます。 。さらに、customDiv に適用されるスタイルも使用されます。 ID セレクターを使用した ID。

結論

CSS を使用する場合、クラスではなく ID の使用を強制する特別な理由はありません。ただし、Web ページ上の 1 つの要素にスタイルを適用する場合は ID のみを使用し、複数の要素にスタイルを適用する場合はクラスを使用することをお勧めします。

このチュートリアルでは、例を参照しながら CSS ID とクラス セレクターの基本を説明し、この 2 つを比較対照しました。これで、専門の開発者のように CSS ID とクラス セレクターを使用する準備が整いました。


  1. CSSのoutline-widthプロパティ

    overlay-widthプロパティは、要素の境界の周りに特定の太さの線を描画するように定義できますが、borderプロパティとは異なり、アウトラインは要素の寸法の一部ではありません。 構文 CSSのoutline-widthプロパティの構文は次のとおりです- Selector {    outline-width: /*value*/ } 注- アウトラインスタイルプロパティは、アウトライン幅を宣言する前に定義する必要があります。 アウトライン幅プロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <hea

  2. CSS3トランジション短縮プロパティ

    遷移の省略形プロパティを使用すると、遷移プロパティ、遷移期間、遷移タイミング関数、および遷移遅延を、遷移プロパティの値として1行で指定できます。 以下は、CSSの遷移短縮プロパティのコードです- 例 <!DOCTYPE html> <html> <head> <style> .container div {    width: 300px;    height: 100px;    border-radius: 1px;    background-color: r