この記事では、HTMLでIDとクラスを使用する方法を紹介します。これらは2つの非常に重要な属性であり、CSSと簡単に組み合わせるのに役立ちます。

各HTMLタグには、独自の異なる属性があります。ただし、ID属性とClass属性を使用すると、タグを100％使用できます。 IDはあなたの識別番号のようなものであり、クラスはあなたの性別のようなものです。一緒に詳細を調べてみましょう。

HTMLのIDとは何ですか？

HTMLのIDは、特定のHTMLタグに添付するために使用される一意の識別文字列です。 HTMLファイルでは、IDは一意です。つまり、2つのHTMLタグに1つのIDを設定することはできません。

IDの命名は、次のルールに従う必要があります。

• 英語で、アクセントなし、スペースなし、特殊文字なしで付けられた名前。
• 命名は理にかなっており、IDを調べてカードの目的を知るのに役立ちます。

例：割引コードを表示するダイアログボックスを作成し、divタグを使用してダイアログボックス全体を囲みます。次に、そのIDを「 discount_wrapper 」として設定することを忘れませんでした。

 <div id="discount_wrapper"> </div>

ここで、CSSを使用してこのタグを編集する場合は、次の構文を使用します。

 #discount_wrapper{ background:red; height: 300px }

つまり、CSSを使用してIDを照会する場合は、 #ten_id構文を使用します。

HTMLのクラスとは何ですか？

IDがHTMLドキュメントファイル内で一意である場合、クラスは異なり、共通の特性を共有するオブジェクトのクラスを確立するために使用されます。したがって、クラスをさまざまなHTMLタグに添付できます。

クラスの命名も、パート1で指示した規則に従う必要があります。

例：投稿のリストを表示したいので、各投稿をブロックと呼びます。したがって、投稿が100個ある場合、100個のブロックが必要になります。 IDを使用してこれらの100ブロックを設定すると、非常に困難になります。したがって、100ブロックのクラスを配置し、そのクラスのCSSを記述するだけで、他の100ブロックはすぐにCSSに適用されます。

 <div class="post"> Post 1 </div> <div class="post"> Post 2 </div> <div class="post"> Post 3 </div> <div class="post"> Post 4 </div> <div class="post"> Post 5 </div> <div class="post"> Post 6 </div>

CSSでは、次のように記述します。

 .post{ background:red; height: 100px; margin: 20px; }

したがって、を使用し.クラスの場合は# 、IDの場合は＃。

IDを使用する場合とクラスを使用する場合

これは多くの人が私に尋ねた質問です。答えるには、上で示した2つの概念を確認する必要があります。

• IDは、HTMLドキュメントセット内で一意です。したがって、サイト構造が1つの位置にのみ存在する場合、つまりCSSに継承がない場合は、これを設定する必要があります。
• クラスは異なり、多くの異なるHTMLタグにクラスを添付できます。したがって、異なるHTMLタグが互いのCSSを継承できるようにする場合に使用する必要があります。

このチュートリアルを通じて、HTMLでIDとクラスを使用する方法を説明しました。これは重要な問題であり、次のレッスンを学ぶことが前提です。よく見てください。ご不明な点がございましたら、コメントさせていただきますので、お答えいたします。