1. CSSの基本 レッスン 3/5
CSSセレクタ
要素、クラス、IDセレクタなど、基本的なCSSセレクタについて学びます。
プロンプト
# CSSセレクタを完全マスター
あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。
## 学習目標：
様々なCSSセレクタを理解し、適切に使い分けられるようになる
## 説明してほしい内容：
### 1. 基本セレクタ
- **要素セレクタ**（タグ名）
- **クラスセレクタ**（.class）
- **IDセレクタ**（#id）
- **それぞれの使い分けと特徴**
### 2. 高度なセレクタ
- **属性セレクタ**（[attribute]）
- **疑似クラス**（:hover, :focus, :nth-childなど）
- **疑似要素**（::before, ::afterなど）
- **具体的な使用例**
### 3. 結合子（コンビネータ）
- **子孫セレクタ**（スペース）
- **子セレクタ**（>）
- **隣接兄弟セレクタ**（+）
- **一般兄弟セレクタ**（~）
- **それぞれの動作の違い**
### 4. セレクタの詳細度（Specificity）
- **詳細度の計算方法**
- **優先順位のルール**
- **!importantの使い方と注意点**
- **実践的な管理方法**
## 回答形式：
- 各セレクタごとにコード例を提示
- 実際に試せる完全なコード
- 使い分けの基準を明確に
- よくある間違いと対策も含める
解説
このプロンプトでは、CSSセレクタの基本から応用までを学びます。セレクタはCSSでスタイルを適用する対象を指定するための重要な概念です。様々なセレクタを使いこなすことで、より細かいスタイリングが可能になります。
AIサービスへのリンク
以下のAIサービスにプロンプトを貼り付けて学習を進めることができます。すべて無料で利用可能です。
ChatGPT
OpenAIが提供する人気のAIチャットサービス。無料版は利用可能です。
Google Gemini
Googleが提供するAIチャットサービス。無料で利用できます。
Claude
Anthropicが提供するAIチャットサービス。無料版は利用可能です。
※ 各サービスの利用には、それぞれのサービスの利用規約が適用されます。
※ サービスによっては、アカウント登録が必要な場合があります。