クラスセレクター
クラスセレクター
「クラスセレクター」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全1レッスンが含まれています。
クラスセレクターを使用する理由
こんにちは。
CSSで特に重要な項目の1つである、クラスセレクターまで進みました。
これまで頻繁にクラスセレクターを使用してきたため、クラスセレクターについてはご存じでしょう。
このレッスンでは、知識を定着させるとともに、ほかのセレクターと比べた利点について学びましょう。
クラスセレクターの構文
それでは始めましょう。
クラス型のセレクターを定義するには、ドット（.）セレクターを使用します。以下はmy-classという名前のクラスセレクターで、font-sizeに10pxを指定しています。
.my-class {
font-size: 10px;
}
クラスセレクターには、複数のスタイルを定義することもできます。
.my-class {
font-size: 10px;
}
複数のセレクター
同じ要素に複数のクラスを割り当てることができます。
以下の例では、el1とel2という2つのクラスセレクターを定義しています。
pタグで作成した要素のclass属性には、クラス名をスペースで区切って2つ以上追加できます。
Previewセクションでは、2つのクラスのスタイルが同時に要素へ反映されていることを確認できます。
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>タグセレクターやIDセレクターではなく、クラスセレクターを選ぶ理由
タグセレクターやIDセレクターではなく、クラスセレクターを選ぶ理由
タグセレクターを使用すると、そのタグで作成されたすべての要素に影響するため、意図しない結果になることがあります。そのため通常は、すべての要素に共通する特徴を持たせたい場合にタグセレクターを使用します。
たとえば、各要素のフォントファミリーを「Lato」にしたい場合は、次のように定義します。
a{
font-family: Lato,sans-serif
}タグセレクターやIDセレクターではなく、クラスセレクターを選ぶ理由 2
idセレクターを使って、要素固有の定義を作成することもできます。
ただし、すべてのスタイル定義が1つの要素にしか適用されないため、同じプロパティを別の要素にも適用したい場合は、コードを書き直す必要があります。
HTMLドキュメント内では、同じidを持つ要素は1つしか存在できないためです。
CSSの詳細度
ここでは、CSSの詳細度という概念について学びましょう。
理解を深めるために、もう一度問題を作成します。そして、その問題を解決しながらこの概念を学びます。
CSSの詳細度 2
以下の例では、
pタグにスタイル定義が設定されています。
.firstという名前のクラスセレクターでも、スタイルが定義されています。
どちらのセレクターも、HTMLドキュメント内の同じ要素を選択しています。
どちらのセレクターも、同じcolorプロパティを置き換えるスタイルを定義しています。この場合、競合が発生します。
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
CSSの詳細度 3
この例を見ると、これまでの知識から、色は赤になると考えるかもしれません。
カスケードの概念では、コードの順序で最後に記述されたものが優先されるためです。
しかし、ここには小さな注意点があります。詳細度が同じ場合は、後から記述されたコードが優先されます。
これは、対象の要素に対するセレクターの詳細度が重要であることを示す評価です。
コード内での順序に関係なく、詳細度が高いものがブラウザーによって評価されます。
警告
クラスセレクターは、要素セレクターよりも具体性の高い定義です。そのため、詳細度も高くなります。
セレクターの詳細度
どのセレクターの詳細度が高いかを判断するのは、実際にはとても簡単です。
要素に割り当てられるIDは1つだけで、Webページ内にも1つしか存在しないため、最優先されるセレクターだと考えられます。
一方、クラスセレクターはタグよりも具体的なグループを選択するため、タグセレクターよりも高い詳細度で評価されます。
以下の例では、3種類のセレクターで同じ要素を選択し、idセレクターが優先されることを確認します。
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>詳細度計算ツール
このリンクからオンラインの詳細度計算ツールにアクセスできます。
詳細度が重要になる場面
では、これらの計算をいつも行う必要があるのでしょうか。
もちろん、その必要はありません。標準に従ってコードを記述すれば、競合は発生しません。
つまり、常に数学的な計算をする必要はありません。ただし、問題が発生したときには、解決のためにこの知識が必要になる場合があります。
おめでとうございます
おめでとうございます。🥳🥳🥳
Class SelectorとCSS Specificityのレッスンを修了しました。
次のセクションでは、Selectorの種類について学びます。
次のセクションへ進むにはクリックしてください。
よくある質問
「クラスセレクター」レッスンは無料ですか？
はい。「クラスセレクター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全1レッスンが含まれています。
「クラスセレクター」で何を学びますか？
クラスセレクター ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「クラスセレクター」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。