📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 124行目: | 124行目: | ||
<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> | |||
==== 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> | ||