Menu
Coddy logo textTech

IDセレクター

Coddyの「CSSセレクター」コースのレッスン 5/15。

IDセレクターは、特定のID属性を持つ要素を選択するCSSセレクターの一種です。ID属性は、HTML要素を一意に識別するために追加できるカスタム属性です。

特定のIDを持つ要素を選択するには、ハッシュ(#)記号の後にID値を続けて使用します。例えば、セレクター #my-id は、IDが my-id である要素を選択します。

以下は、IDセレクターを使用してウェブページをスタイリングする方法の例です:

#my-id {
  color: red;
  font-size: 2em;
}

要素にIDを追加するには、次のように記述します:

<div id="my-id"></div>

クラスセレクターと同様に、このCSSルールはIDが my-id である要素のスタイルを赤色にし、フォントサイズを2emに設定します。

challenge icon

チャレンジ

簡単

IDセレクターの理解度を確認するための演習です:

  • 2つの div 要素を持つウェブページを作成してください。
  • 最初の div 要素にID my-id を指定してください。
  • IDセレクターを使用して、IDが my-iddiv 要素のスタイルを、黒以外の好きな色に設定し、フォントサイズを 30px にしてください。

自分で試してみよう

<html>
<head>
  <title>ID Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
    
</body>
</html>

CSSセレクターのすべてのレッスン