CSSでIDセレクターを使用する方法

四月 30, 2024

最後のいくつかのチュートリアルでは、3種類のCSSルールのうち2つについて説明しました。最初のタイプは、一致するHTMLタグのスタイルに基づいて制御するHTMLセレクターです。 2番目のタイプは、Webページ上の任意の要素に適用できる一般的なスタイルのように機能するクラスセレクターです。

次に、IDセレクターと呼ばれる3番目のタイプのCSSルールについて説明します。クラスセレクターと同様に、IDセレクターはWebページ上の任意の要素に適用できます。ただし、ページで1回だけ使用することを意図しています。これにより、ダイナミックHTMLおよびJavaScriptでIDセレクターが非常に役立ちます。理論的には、ページでIDセレクターを複数回使用する場合、Webブラウザーは後続のセレクターを無視する必要があります。ただし、これは常にそうではありません。 Webブラウザーの予測可能性に依存することは非常に困難です。したがって、IDセレクターを使用することを選択する場合は、一度だけ使用するように注意してください。例を見てみましょう。

基本コード

. . .

例

. . .

IDセレクター

タグ内では、IDセレクターがハッシュ記号（＃）で始まり、その後にIDセレクターに割り当てる名前が続くことがわかります。クラスセレクターと同様に、任意の名前を使用できますが、名前がIDセレクターの使用目的を示す場合が最適です。例では、テキストの特別なセクションを識別するためにそれを使用しています。

{プロパティ：値;}

また、タグ内では、IDセレクターの後に、中括弧で囲まれた1つ以上のプロパティと値のペアが続きます。これらのプロパティと値のペアは、スタイルの特性を設定します。この例では、special_text IDセレクターを持つ段落のテキストは赤色になります。

. . .

Webページの本文でIDセレクターを使用する場合、開始HTMLタグ内でid属性を使用します。 id属性の値は、IDセレクターに与えられた一意の名前です。この場合は「special_text」です。（id = "value"）これは、スタイルを適用する1つのHTMLタグにセレクターがスタイルを「接続」する方法です。上記の例では、IDセレクターは1つだけの中に配置されます

ウェブページ上のタグ。 Webページ上の他のHTMLタグには、開始タグ内にIDセレクターを含めないでください。

動画の説明: 2 はじめてのHTML/CSSでレイアウト（IDとClass設計編） (四月 2024).

CSS、HTML、CSSルールのタイプでIDセレクターを使用する方法、IDセレクター、CSS IDセレクターを使用する方法

ブラックフライデーセールスChrismasショッピング

四月 2024

死に物狂いの買い物客は皆、感謝祭の翌日がブラックフライデーとして知られていることを知っています。すべての大手小売業者が壮大な販売と並外れた早売りスペシャルを提供しようとし、熱心な買い物客の群衆が完璧なホリデープレゼントで最高の取引を得るために急いでいる日。 ...

コンピューター

ブログ投稿を公開するのに最適な時期は何ですか？

四月 2024

クリックしてこの記事をツイートするブログ投稿を公開するのに最適な時期にこれらの2つの広範な研究が役立つのはなぜなのか... KISSMetrics、HubSpot、Dan Zarella、およびSearch Engine Landが行った最初の研究により、これらの統計が明らかになりました。お望みならば：より多くのトラフィックがベストタイムです：月曜日午前11時EST...