HTMLでクラスまたはIDを使用する場合

classこのブログ投稿では、HTMLとid属性の違いを探ります。これがブラウザの動作にどのように影響するかから、CSSを使用したスタイリングのヒントまで。

最初に、id属性とその使用方法、およびいつ使用するかについて説明します。これは、「HTMLでクラスまたはIDを使用する必要がありますか?」などの多くの質問に答えます。および「CSSでクラスまたはIDのスタイルを設定する必要がありますか?」確認してみましょう!

IDを使用する場合

HTMLを初めて使用する場合、anidはHTML要素に付与できる一意のIDです。好きなだけ属性を使用できますidが、いくつかの賢明なルールがあります。

  • id要素ごとに1つ
  • 複数idの属性を同じ値にすることはできません(重複するIDを持つのは無効なHTMLです)

IDのアンカーとハイパーリンク

は特別なid振る舞いを作成します、あなたはこのまさにブログでそれらを見つけるでしょう!各見出し(たとえば、URLの一部として値h3を含めることができるように使用idします。これにより、読み込み時にユーザーがWebページのその部分に自動的にスクロールします。

「AllAboutJavaScriptClosures」というタイトルを含むブログ投稿を想像してみてください。生成されたブログの見出しは、次のようになります。

<h2 id="all-about-javascript-closures">
  All About JavaScript Closures
</h2>

その後、URLは、次のURLを介してドキュメントのその部分に自動的にリンクできます。

someblog.com/javascript-closures#all-about-javascript-closures

スタイリングID

CSSセレクターを介してスタイルを設定できますid。興味深いことに、URLと同じ構文を使用しています#

#all-about-javascript-closures {
  background: red;
}

できるからといって、そうすべきだという意味ではありません。idユニークと見なされるため、スタイリングは避けることをお勧めします。作成する予定の特定のハックがない限り、CSSの再利用を制限し、その後スタイルシートを肥大化させるだけなので、IDのスタイル設定は避けます。

JavaScriptでIDを選択する

興味深いことに、すべてのプロパティはグローバルオブジェクトidのJavaScriptプロパティになります。window

したがって、これを行うと、実際には同じ名前のグローバル変数が作成されます。

<aside id="author">...</aside>

<script>
window.author; // <aside id="author"></aside>
</script>

ただし、グローバル変数は優れていたり信頼性が高いわけではないため、HTMLを設計するときは、グローバル変数を避ける必要があります。

JavaScriptを使用する場合は、-を選択して変更する方がよい可能性がclassありますが、必要な場合は、idそこにあることがわかります。

現在、属性classListを操作するために直接作成されたAPIもあるため、実際classに使用する必要はありません。id

クラスを使用する場合

Aclassは、要素を識別するための推奨される方法です。

を要素にバインドするclassと、CSSとJavaScriptを介してターゲットにできるようになります。

クラスのスタイリング

スタイリングの目的でクラスを使用し、オプションで状態をDOMツリーに反映する必要があります(つまり、動作または単に静的スタイルを追加するため)。

DOMツリーはHTMLページのライブ表現であり、JavaScriptで使用するものです。たとえば、document.querySelectorはDOM APIであり、「JavaScript」ではありません。

クラスを使用すると、要素の背後にある意味を提供しながら、共有スタイルの説明を指定できます。

<button class="btn">Small button</button>
<button class="btn">Medium button</button>
<button class="btn">Large button</button>

次に、スタイルシートで使用.btn { background: blue }して、これらすべての要素に単一のスタイルルールを提供できます。とは異なり、可能な限り効率的で再利用可能になるように、何度でもid宣言できます。class

クラスも構成可能であり、要素ごとに複数のクラスを指定できるため、単一の共有スタイルを継承するだけでなく、以下のように小、中、大などの適応を提供することもできます。

<button class="btn btn--small">Small button</button>
<button class="btn btn--medium">Medium button</button>
<button class="btn btn--large">Large button</button>

BEM方法論--suffixを使用し、 :で示される修飾子クラスを提供することを期待している可能性があります。

.btn--small { font-size: 12px }
.btn--medium { font-size: 14px }
.btn--large { font-size: 16px }

この場合、はのベースから変更されたバージョン--smallを記述します。それは長年私の好みのCSS方法論でした。.btn

🕵️‍♀️Webアプリケーションを使用したコンポーネントベースのアーキテクチャへの切り替えにより、私はできるだけ少ないスタイルを好み、style.cssコンポーネントごとにスタイルを提供することを検討します。これは、完全なカプセル化も提供するため、より優れたコンポーネントアーキテクチャパターンです。

これを念頭に置いて、スタイリングに関連する値classを動的に変更するためにもを使用する必要があります。たとえば'active'、特定の条件に基づいて追加または削除する必要があるクラスを作成できます。どうすればいいですか?

classListAPIの使用

たまたま組み込みの新しいAPIがあり、古いブラウザ用のポリフィルが必要になります。これは、classListすべてのElementDOMノードで使用できます。

.classList要素にログオンするとDOMTokenList、作業用のaが返されます。

<button class="btn btn--small">Small button</button>

<script>
const button = document.querySelector('.btn .btn--small');

// ▶ DOMTokenList(2) ["btn", "btn--small", value: "btn btn--small"]
console.log(button.classList);
</script>

現在の文字列値を反映classListするプロパティが含まれていることがわかります。valueclass

また、  ["btn", "btn--small"]配列要素のように見えるので、配列のようにも見えます。これはほとんど配列ですが、value他のclassList動作を提供しているため、余分な動作を伴う配列のようprototypeなものです。値を配列として使用する必要がある場合は、を使用できます。Array.from(button.classList)

この機能には、追加/削除/切り替えなどclassListの優れたメソッドがいくつか付属しています。prototypeclass

<button class="btn btn--small">Small button</button>

<script>
const button = document.querySelector('.btn .btn--small');

// add + remove a class
button.classList.add('btn--large');
button.classList.remove('btn--small');

// toggle class on a click event
button.addEventListener('click', () => button.classList.toggle('btn--clicked'));
</script>

classListのドキュメントには、さらに多くの情報がありますので、ぜひチェックしてみてください。

概要

この記事では、多くのことを取り上げました。単純なHTML要素から、 JavaScriptのグローバル変数にどのように影響するidclass、そして最後に-などのAPIを調査しclassList、それらがエコシステムにどのように適合するかを調べます。

要約すると、これが私たちが学んだことの要約です:

  • idページごとに1回だけ一意を使用する
  • id要素ごとに1つ使用
  • スタイリングid要素を避け、class
  • id属性は、グローバルJavaScriptプロパティも作成しますwindow
  • classスタイリングの目的でを使用し、構成可能なクラスを最大化します
  • 要素ごとに好きなだけクラスを使用しますが、やりすぎないでください
  • 組み込みのclassListAPIを使用してクラスを操作する
  • 古いブラウザをサポートする必要がある場合は、現在のサポートとポリフィルが必要かどうかを強調する「ClassListを使用できますか」ページを確認してください。
  • コンポーネントアーキテクチャと最新のWebプラクティスではid、その機能の一部を使用したい場合を除いて、これは過去のものと見なすことができます。

読んでくれてありがとう!

ソース:https ://ultimatecourses.com/blog/html-class-id

#html #css 

What is GEEK

Buddha Community

HTMLでクラスまたはIDを使用する場合

HTMLでクラスまたはIDを使用する場合

classこのブログ投稿では、HTMLとid属性の違いを探ります。これがブラウザの動作にどのように影響するかから、CSSを使用したスタイリングのヒントまで。

最初に、id属性とその使用方法、およびいつ使用するかについて説明します。これは、「HTMLでクラスまたはIDを使用する必要がありますか?」などの多くの質問に答えます。および「CSSでクラスまたはIDのスタイルを設定する必要がありますか?」確認してみましょう!

IDを使用する場合

HTMLを初めて使用する場合、anidはHTML要素に付与できる一意のIDです。好きなだけ属性を使用できますidが、いくつかの賢明なルールがあります。

  • id要素ごとに1つ
  • 複数idの属性を同じ値にすることはできません(重複するIDを持つのは無効なHTMLです)

IDのアンカーとハイパーリンク

は特別なid振る舞いを作成します、あなたはこのまさにブログでそれらを見つけるでしょう!各見出し(たとえば、URLの一部として値h3を含めることができるように使用idします。これにより、読み込み時にユーザーがWebページのその部分に自動的にスクロールします。

「AllAboutJavaScriptClosures」というタイトルを含むブログ投稿を想像してみてください。生成されたブログの見出しは、次のようになります。

<h2 id="all-about-javascript-closures">
  All About JavaScript Closures
</h2>

その後、URLは、次のURLを介してドキュメントのその部分に自動的にリンクできます。

someblog.com/javascript-closures#all-about-javascript-closures

スタイリングID

CSSセレクターを介してスタイルを設定できますid。興味深いことに、URLと同じ構文を使用しています#

#all-about-javascript-closures {
  background: red;
}

できるからといって、そうすべきだという意味ではありません。idユニークと見なされるため、スタイリングは避けることをお勧めします。作成する予定の特定のハックがない限り、CSSの再利用を制限し、その後スタイルシートを肥大化させるだけなので、IDのスタイル設定は避けます。

JavaScriptでIDを選択する

興味深いことに、すべてのプロパティはグローバルオブジェクトidのJavaScriptプロパティになります。window

したがって、これを行うと、実際には同じ名前のグローバル変数が作成されます。

<aside id="author">...</aside>

<script>
window.author; // <aside id="author"></aside>
</script>

ただし、グローバル変数は優れていたり信頼性が高いわけではないため、HTMLを設計するときは、グローバル変数を避ける必要があります。

JavaScriptを使用する場合は、-を選択して変更する方がよい可能性がclassありますが、必要な場合は、idそこにあることがわかります。

現在、属性classListを操作するために直接作成されたAPIもあるため、実際classに使用する必要はありません。id

クラスを使用する場合

Aclassは、要素を識別するための推奨される方法です。

を要素にバインドするclassと、CSSとJavaScriptを介してターゲットにできるようになります。

クラスのスタイリング

スタイリングの目的でクラスを使用し、オプションで状態をDOMツリーに反映する必要があります(つまり、動作または単に静的スタイルを追加するため)。

DOMツリーはHTMLページのライブ表現であり、JavaScriptで使用するものです。たとえば、document.querySelectorはDOM APIであり、「JavaScript」ではありません。

クラスを使用すると、要素の背後にある意味を提供しながら、共有スタイルの説明を指定できます。

<button class="btn">Small button</button>
<button class="btn">Medium button</button>
<button class="btn">Large button</button>

次に、スタイルシートで使用.btn { background: blue }して、これらすべての要素に単一のスタイルルールを提供できます。とは異なり、可能な限り効率的で再利用可能になるように、何度でもid宣言できます。class

クラスも構成可能であり、要素ごとに複数のクラスを指定できるため、単一の共有スタイルを継承するだけでなく、以下のように小、中、大などの適応を提供することもできます。

<button class="btn btn--small">Small button</button>
<button class="btn btn--medium">Medium button</button>
<button class="btn btn--large">Large button</button>

BEM方法論--suffixを使用し、 :で示される修飾子クラスを提供することを期待している可能性があります。

.btn--small { font-size: 12px }
.btn--medium { font-size: 14px }
.btn--large { font-size: 16px }

この場合、はのベースから変更されたバージョン--smallを記述します。それは長年私の好みのCSS方法論でした。.btn

🕵️‍♀️Webアプリケーションを使用したコンポーネントベースのアーキテクチャへの切り替えにより、私はできるだけ少ないスタイルを好み、style.cssコンポーネントごとにスタイルを提供することを検討します。これは、完全なカプセル化も提供するため、より優れたコンポーネントアーキテクチャパターンです。

これを念頭に置いて、スタイリングに関連する値classを動的に変更するためにもを使用する必要があります。たとえば'active'、特定の条件に基づいて追加または削除する必要があるクラスを作成できます。どうすればいいですか?

classListAPIの使用

たまたま組み込みの新しいAPIがあり、古いブラウザ用のポリフィルが必要になります。これは、classListすべてのElementDOMノードで使用できます。

.classList要素にログオンするとDOMTokenList、作業用のaが返されます。

<button class="btn btn--small">Small button</button>

<script>
const button = document.querySelector('.btn .btn--small');

// ▶ DOMTokenList(2) ["btn", "btn--small", value: "btn btn--small"]
console.log(button.classList);
</script>

現在の文字列値を反映classListするプロパティが含まれていることがわかります。valueclass

また、  ["btn", "btn--small"]配列要素のように見えるので、配列のようにも見えます。これはほとんど配列ですが、value他のclassList動作を提供しているため、余分な動作を伴う配列のようprototypeなものです。値を配列として使用する必要がある場合は、を使用できます。Array.from(button.classList)

この機能には、追加/削除/切り替えなどclassListの優れたメソッドがいくつか付属しています。prototypeclass

<button class="btn btn--small">Small button</button>

<script>
const button = document.querySelector('.btn .btn--small');

// add + remove a class
button.classList.add('btn--large');
button.classList.remove('btn--small');

// toggle class on a click event
button.addEventListener('click', () => button.classList.toggle('btn--clicked'));
</script>

classListのドキュメントには、さらに多くの情報がありますので、ぜひチェックしてみてください。

概要

この記事では、多くのことを取り上げました。単純なHTML要素から、 JavaScriptのグローバル変数にどのように影響するidclass、そして最後に-などのAPIを調査しclassList、それらがエコシステムにどのように適合するかを調べます。

要約すると、これが私たちが学んだことの要約です:

  • idページごとに1回だけ一意を使用する
  • id要素ごとに1つ使用
  • スタイリングid要素を避け、class
  • id属性は、グローバルJavaScriptプロパティも作成しますwindow
  • classスタイリングの目的でを使用し、構成可能なクラスを最大化します
  • 要素ごとに好きなだけクラスを使用しますが、やりすぎないでください
  • 組み込みのclassListAPIを使用してクラスを操作する
  • 古いブラウザをサポートする必要がある場合は、現在のサポートとポリフィルが必要かどうかを強調する「ClassListを使用できますか」ページを確認してください。
  • コンポーネントアーキテクチャと最新のWebプラクティスではid、その機能の一部を使用したい場合を除いて、これは過去のものと見なすことができます。

読んでくれてありがとう!

ソース:https ://ultimatecourses.com/blog/html-class-id

#html #css