📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| (同じ利用者による、間の2版が非表示) | |||
| 111行目: | 111行目: | ||
! セレクタ名 !! 選択するもの !! 例 | ! セレクタ名 !! 選択するもの !! 例 | ||
|- | |- | ||
| 要素セレクタ<br>(タグセレクタ、タイプセレクタとも呼ばれる) || 指定されたタイプの全てのHTML要素 || p<br> | | 要素セレクタ<br>(タグセレクタ、タイプセレクタとも呼ばれる) || 指定されたタイプの全てのHTML要素 || p<br><nowiki><p></nowiki> | ||
|- | |- | ||
| IDセレクタ || 指定されたIDを持つページ上の要素<br>指定されたHTMLページでは、各ID値は一意である必要がある。 || #my-id<br> | | IDセレクタ || 指定されたIDを持つページ上の要素<br>指定されたHTMLページでは、各ID値は一意である必要がある。 || #my-id<br><nowiki><p id="my-id"></nowiki><br><a id="my-id"> | ||
|- | |- | ||
| クラスセレクタ || 指定されたクラスを持つページ上の要素<br>同じクラスの複数のインスタンスをページに表示することができる。 || .my-class<br> | | クラスセレクタ || 指定されたクラスを持つページ上の要素<br>同じクラスの複数のインスタンスをページに表示することができる。 || .my-class<br><nowiki><p class="my-class"></nowiki><br><a class="my-class"> | ||
|- | |- | ||
| 属性セレクタ || 指定された属性を持つページ上の要素 || img[src]<br> | | 属性セレクタ || 指定された属性を持つページ上の要素 || img[src]<br><img src="myimage.png"><br><br><img>のみは不可 | ||
|- | |- | ||
| 擬似クラスセレクタ || 指定された要素 (複数可)<br>ただし、指定された状態にある時のみ可能。<br>(例えば、カーソルがリンクの上にある場合等) || a:hover<br><br> | | 擬似クラスセレクタ || 指定された要素 (複数可)<br>ただし、指定された状態にある時のみ可能。<br>(例えば、カーソルがリンクの上にある場合等) || a:hover<br><br><a>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。 | ||
|} | |} | ||
</center> | </center> | ||
<br> | |||
id属性とclass属性の優先度は、id属性 -> class属性である。<br> | |||
<br> | |||
* id属性は使用頻度が限られるため、サイト全体を通じて不変の固定要素に使用する。 | |||
* class属性は、1ページ内で何度も使用できるため、サイトの中に何度も使用する見出しや表等に使用する。 | |||
<br> | <br> | ||
さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br> | さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br> | ||
<br> | |||
==== 要素セレクタ ==== | |||
要素セレクタは、一般的には使用されない。<br> | |||
<br> | |||
要素セレクタを避ける理由として、以下に示すものが挙げられる。<br> | |||
* 詳細度が低すぎて上書きが必要になりやすい。 | |||
* スコープが広すぎるため、予期せぬ影響が出やすい。 | |||
* コンポーネント指向の設計と相性が悪い。 | |||
* クラスセレクタよりも処理が遅いため、パフォーマンスへの悪影響がある。 | |||
<br> | |||
==== IDセレクタ ==== | |||
IDセレクタは、より高い詳細度 (優先度) を持つ。<br> | |||
1ページ内で同じIDは1度しか使用できないため、唯一の要素にのみ適用する。<br> | |||
* メインヘッダ (#header) | |||
* メインナビゲーション (#main-nav) | |||
* フッタ (#footer) | |||
* ログインフォーム (#login-form) | |||
<br> | |||
また、JavaScriptで要素を特定する場合に使用される。<br> | |||
<br> | |||
<syntaxhighlight lang="css"> | |||
/* IDセレクタ: ページ内で唯一の要素 */ | |||
#header { | |||
position: fixed; | |||
top: 0; | |||
width: 100%; | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
==== クラスセレクタ ==== | |||
クラスセレクタは、複数の要素で共通のスタイルを適用する場合に使用する。<br> | |||
同じページ内で何度でも再利用可能であり、1つの要素に複数のクラスを適用できる。<br> | |||
<br> | |||
CSSの詳細度を管理しやすくするため、できるだけクラスを優先して使用する。<br> | |||
コンポーネントベースの設計には主にクラスが使用される。<br> | |||
<br> | |||
* ボタンのスタイル (.btn) | |||
* カードデザイン (.card) | |||
* グリッドレイアウト (.grid-item) | |||
* 警告メッセージ (.alert) | |||
<br> | |||
<syntaxhighlight lang="css"> | |||
/* クラスセレクタ: 再利用可能なコンポーネント */ | |||
div.nav { | |||
padding: 10px 20px; | |||
border-radius: 4px; | |||
} | |||
.btn-primary { | |||
background: blue; | |||
color: white; | |||
} | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||