セレクター：スタイルを適用する対象の選択
属性に基づいて要素を対象にし、ユニバーサルセレクターを効果的に使います。
「セレクター：スタイルを適用する対象の選択」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全3レッスンが含まれています。
対象を選びましょう
スタイルを適用する前に、何をスタイルするのかを指定します。それがセレクターの役割です。このレッスンで、きっと腑に落ちます。✨
指を差すようなものです
セレクターは、単に「ここにある、この要素」と指し示すものです。それだけの簡単なものです。暗記する必要はありません。
タグでスタイルする
最も簡単なセレクターは、タグ名を使うものです。「p」と書くと、ページ上のすべての段落を一度に選択できます。
<p>All paragraphs turn red.</p>
クラスでスタイルする
一部の要素だけをスタイルしたいですか？要素にクラスを付け、.note のようにドットを付けて選択します。とても柔軟です！
<p class="note">This note is orange.</p>
クラスは再利用できます
最も便利な点は、1 つのクラスを複数の要素で再利用できることです。一度スタイルを定義すれば、どこでも適用できます。大幅な時間短縮になります。⏱️
id でスタイルする
特別な要素が 1 つ必要ですか？その要素に id を付け、#header のようにハッシュ記号を付けて選択します。id は一意であることを前提としています。
<h1 id="header">Page Header</h1>
ドットとハッシュの違い
覚え方は簡単です。ドットは複数のもの（class）に、ハッシュは 1 つのもの（id）に使います。タグ名には記号を付けません。
名札のようなものです
クラスはグループ用の名札、id は 1 人だけが持つ VIP バッジだと考えてみてください。セレクターはその名札を読み取るものです。🏷️
組み合わせて使う
実際のページでは、タグ、クラス、id を組み合わせて、目的どおりの要素をスタイルします。これで 3 つすべてがわかりましたね！🙌
できました！
CSS とは何かを説明し、ルールを読み、セレクターで対象を選べるようになりました。これは CSS の確かな基礎です。すばらしいです！🎉
クイックチェック
最後の確認です！CSS でクラスを選択するときに使う記号はどれですか？
よくある質問
「セレクター：スタイルを適用する対象の選択」レッスンは無料ですか？
はい。「セレクター：スタイルを適用する対象の選択」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全3レッスンが含まれています。
「セレクター：スタイルを適用する対象の選択」で何を学びますか？
属性に基づいて要素を対象にし、ユニバーサルセレクターを効果的に使います。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「セレクター：スタイルを適用する対象の選択」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- CSSとは？
- CSSでページに命を吹き込む方法
- セレクター：スタイルを適用する対象の選択