css - DivのクラスとID

Question

vsを使用divsするのが最適なのはいつですか?classid

HTML内のフォントバリアントや要素などで、を使用するのが最善classですか? 次にid、構造/コンテナに使用しますか？

これは私がいつも少し不確かだったものです。どんな助けも素晴らしいでしょう。

score 85 · Accepted Answer

idページ上にインスタンスが 1 つだけ存在する要素を識別するために使用します。たとえば、特定の場所に配置する単一のナビゲーションバーがある場合は、を使用しますid="navigation"。

classすべてが特定の方法で動作する要素をグループ化するために使用します。たとえば、会社名を本文に太字で表示したい場合は、<span class='company'>.

score 51 · Accepted Answer

理解すべき最も重要なことは、ID は一意でなければならないということです。特定の ID を持つ要素はページ内に 1 つだけ存在する必要があります。したがって、特定のページ要素を参照したい場合は、多くの場合、これを使用するのが最善です。

何らかの形で類似している要素が複数ある場合は、要素クラスを使用してそれらを識別する必要があります。

非常に便利で、驚くほどあまり知られていない事実の 1 つは、クラス名の間にスペースを入れることで、1 つの要素に複数のクラスを実際に適用できるということです。したがって、現在ログインしているユーザーによって書かれた質問を投稿した場合、それを<div class="question currentAuthor">で識別できます。

score 33 · Accepted Answer

大学を考えてみてください。

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

学生証は別物です。キャンパス内で同じ学生証を持つことはありません。ただし、多くの生徒は、少なくとも 1 つのクラスを互いに共有できます。

生物学 101 という1 つのクラスタイトルに複数の学生を入れることは問題ありません。しかし、1 つの学生IDに複数の学生を入れることは絶対に許されません。

学校のインターホンシステムを介してRulesを与える場合、ClassにRulesを与えることができます。

「明日、生物のクラスは赤シャツを着てくれませんか？」

.BiologyClass {
  shirt-color:red;
}

または、固有のIDを呼び出して、特定の生徒にルールを与えることができます。

「ジョナサン・サンプソンは明日、緑のシャツを着てくれませんか?」

#JonathanSampson {
  shirt-color:green;
}

score 24 · Accepted Answer

ID は一意である必要がありますが、CSS では、競合する 2 つの指示のうちどちらに従うべきかを判断する際にも ID が優先されます。

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

テキストは白になります。

score 7 · Accepted Answer

IDを使用することの追加の利点は、アンカータグでIDをターゲットにできることです。

<h2 id="CurrentSale">Product I'm selling</h2>

他の場所でページ上のその場所に直接リンクできるようになります。

<a href="#CurrentSale">the Current Sale</a>

これの一般的な使用法は、ブログの各見出しに日付スタンプ付きID（たとえば、id = "date20080408"）を付けて、ブログページのそのセクションを具体的にターゲットにできるようにすることです。

IDには、より制限された命名規則があることを覚えておくことも重要です。主に、IDを数字で始めることはできません。同様のSOの質問を参照してください：htmlのid属性の有効な値は何ですか

score 6 · Accepted Answer

クラスは、多くの異なる div または要素に同様のスタイルを適用する場合に最適です。id は、書式設定または JavaScript での更新のために特定の要素に対処する場合に適しています。

score 4 · Accepted Answer

HTML 標準自体があなたの質問に答えます。

2 つのオブジェクトが同じ ID を持つことはありませんが、任意の数のオブジェクトが同じクラスを持つことはできます。

したがって、特定の CSS スタイル属性を単一の DIV のみに適用する場合、それは ID になります。特定のスタイル属性を複数の DIV に適用する場合、それはクラスでなければなりません。

両方を混在させることができることに注意してください。2 つの DIV を同じクラスに所属させて、異なる ID を与えることができます。次に、両方に共通のスタイルをクラスに適用し、どちらかに固有のものを ID に適用できます。ブラウザーは最初にクラススタイルを適用し、次に ID スタイルを適用するため、ID スタイルはクラスが以前に設定したものを上書きできます。

score 3 · Accepted Answer

その他の注意事項:

ASP.Net を使用する場合、要素の ID を完全に制御することはできないため、ほとんどの場合クラスを使用する必要があります (これは以前よりも真実ではないことに注意してください)。
できる限り、どちらも使用しないことをお勧めします。代わりに、要素の型とその親の型を指定します。たとえば、navarea クラスを持つ div 内に含まれる順序付けられていないリストは、次のように選択できます。
```
div.NavArea ul { /* styles go here */ }
```

これで、1 つのクラスアプリケーションでナヴァエリア全体の論理分割のスタイルを設定できるようになりました。

score 2 · Accepted Answer

ID は一意である必要があります。クラスは共有する必要があります。したがって、複数の DIV に適用される CSS フォーマットがある場合は、クラスを使用します。1 つだけの場合 (偶然ではなく要件として)、ID を使用します。

score 1 · Accepted Answer

クラスが何であるかは誰もが知っていると思いますが、IDをスタイリングツールではなく識別子と考えると、間違いはありません。何かをターゲットにしようとするときに識別子が必要であり、同じIDを持つアイテムが複数ある場合、それを識別できなくなります...

IDとクラスのcssを作成する場合は、可能な限り最小限のcssクラスを使用し、必要になるまでIDを使いすぎないようにすることが有益です。そうしないと、より強力な宣言を作成することを常に目指します。すぐに！importantでいっぱいのcssファイルがあります。

score 1 · Accepted Answer

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

この 2 つの単純な違いは、クラスはページで繰り返し使用できますが、ID はページごとに 1 回だけ使用する必要があることです。したがって、メインコンテンツセクションは 1 つしかないため、ページのメインコンテンツをマークアップする div 要素で ID を使用するのが適切です。対照的に、クラスを使用してテーブルの交互の行の色を設定する必要があります。これは定義上、複数回使用されるためです。

ID は非常に強力なツールです。ID を持つ要素は、何らかの方法で要素またはその内容を操作する JavaScript の対象となる可能性があります。ID 属性は、アンカータグを名前属性に置き換えて、内部リンクのターゲットとして使用できます。最後に、ID を明確かつ論理的にすると、ID はドキュメント内の一種の「セルフドキュメント」として機能します。たとえば、ブロックの開始タグの ID が「main」、「header」、「footer」の場合、コードブロックにメインコンテンツが含まれることを示すコメントをブロックの前に追加する必要は必ずしもありません。」など。

score 0 · Accepted Answer

クラスは、ページで複数回使用できるスタイル用です。IDは、要素の特殊なケースを定義する一意の識別子です。規格では、IDはページ内で1回だけ使用する必要があるとされています。したがって、ページ内の複数の要素でスタイルを使用する場合はクラスを使用し、1回だけ使用する場合はIDを使用する必要があります。

もう1つのことは、クラスの場合、IDを持つ複数の値（各クラスの間にスペースを入れることで、la "class ='blagh blah22 blah'）を使用できることです。これは、要素ごとのIDでのみ使用できます。

IDに定義されたスタイルは、クラスに定義されたスタイルをオーバーライドするため、では、＃uniquethingのスタイル設定は、2つが競合する場合でも、.whateverのスタイルをオーバーライドします。

したがって、おそらく、ヘッダーや「サイドバー」など、ページごとに1回だけ表示されるものなどにIDを使用する必要があります。

score 0 · Accepted Answer

私が選んだのは、cssスタイルが同じ方法で複数のdivに適用されるときにクラスIDを使用することです。構造またはコンテナが実際に一度だけ適用される場合、またはデフォルトからそのスタイルを継承できる場合、クラスIDを使用する理由はわかりません。

したがって、divがいくつかのいずれかであるかどうかによって異なります。たとえば、stackoverflowWebサイトの回答に対する質問を表すdiv。ここでは、「Answer」クラスのスタイルを定義し、これを各「Answer」divに適用します。

score 0 · Accepted Answer

.Net Webコントロールを使用している場合、.Netは実行時に（runat = "server"を使用している場合）Webコントロールのdiv idを変更するため、クラスを使用する方がはるかに簡単な場合があります。

クラスを使用すると、フォント、間隔、境界線などの個別のクラスでスタイルを簡単に構築できます。私は通常、複数のファイルを使用して個別のタイプのフォーマット情報を格納します。たとえば、単純なサイト全体のフォーマットの場合はbasic_styles.css、ブラウザ固有のスタイルの場合はie6_styles.cssです。（この場合はIE6）etcおよびレイアウト情報のtemplate_1.css。

どちらの方法を選択しても、メンテナンスを支援するために一貫性を保つようにしてください。

score 0 · Accepted Answer

また、特定のIDを指定した要素は、JavaScriptおよびDOMコマンド（たとえば、GetElementById）を介して操作できます。

一般に、すべての主要な構造divにIDを指定すると便利です。最初は、適用する特定のCSSルールがなくても、将来的にはその機能があります。一方、複数回使用できる要素のクラスを使用します（たとえば、画像とキャプションを含むdiv）。いくつかのクラスがあり、それぞれがわずかに異なるスタイル値を持っている場合があります。

ただし、すべてが同じである場合、id仕様のスタイルルールはクラス仕様のスタイルルールよりも優先されることに注意してください。

score 0 · Accepted Answer

ページの複数の場所で使用したいスタイルの場合は、クラスを使用します。ページの横にあるナビゲーションバーなど、1 つのオブジェクトに対して多くのカスタマイズが必要な場合は、id が最適です。これは、スタイルの組み合わせが他の場所で必要になる可能性が低いためです。

score 0 · Accepted Answer

id は、ページ上の要素の一意の識別子であると想定されており、操作に役立ちます。複数の要素で使用されることになっている、外部で定義された CSS 定義のスタイルは、class 属性で指定する必要があります。

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

score 0 · Accepted Answer

非常に具体的なことをしたいページ上の一意の要素には id を使用し、ページの他の部分で再利用できるものにはクラスを使用します。

score 0 · Accepted Answer

id属性は、ドキュメント内で要素を一意に識別するために使用されますが、class属性は、同じドキュメント内の多くの要素で共有される同じ値を持つことができます。

したがって、実際には、スタイル (#title など) を使用するドキュメントごとに 1 つの要素しかない場合は、idを使用します。複数の要素がスタイルを使用できる場合は、classを使用します。

score 0 · Accepted Answer

スタイル要素がページで繰り返されると思われるときはいつでも、クラスを使用するのが最善だと思います。HeaderImage、FooterBar などのアイテムは ID として適しています。使用するのは 1 回だけであり、ID が重複している場合に一部のエディターが警告するため、誤って重複するのを防ぐのに役立ちます。

また、div 要素を動的に生成し、特定の項目を書式設定の対象にしたい場合にも役立ちます。要素を検索してからそのクラスを更新するのではなく、生成時に適切な ID を与えることができます。

score 0 · Accepted Answer

ID とクラスは、個々のアイテムと同様のアイテムのセットにスタイルを設定するのに優れていることに加えて、覚えておくべき別の警告もあります。また、言語にもある程度依存します。ASP.Net では、Div を投入して ID を持つことができます。ただし、Div の代わりに Panel を使用すると、ID が失われます。

score 0 · Accepted Answer

私にとって： CSSで何かをしたり、要素に名前を追加したりするときにクラスを使用し、ページ内のすべての要素で使用できる場合。

したがって、一意の要素に使用する ID

元：

<div id="post-289" class="box clear black bold radius">

CSS :

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}

css - DivのクラスとID

22 に答える 22

大学を考えてみてください。

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

Related

Reference