やあ、コーディングしながら学ぶ: HTML と CSS へようこそ!今日は、スタイリングの世界をさらに深く掘り下げていきます。これまで、要素を直接スタイリングしてきました。しかし、2 つの

要素があり、それぞれを異なる外観にしたい場合はどうすればよいでしょうか? CSS セレクターを入力してください!

要素セレクター

これらについてはすでによく知っていますが、もう一度要約してみましょう:

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

このルールセットはすべての

要素を対象とし、フォント サイズ、ファミリー、ウェイトを設定します。要素セレクターは、ページ全体のスタイル ガイドの設定など、幅広いストロークに最適です。しかし、正直に言うと、すべての

タグが同じに見える必要はありません。より具体的なスタイルについては、さらに工夫する必要があります!

クラスセレクター

クラスが助けになります！ 2 つの

タグを異なるものにしたいですか?クラスを追加:

This text is BIG and red.
This text is small and blue.

各

タグには 2 つのクラスがあります。 CSS で、これらのクラスを .:
でターゲットにします。

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

ブーム！スタイルが適用されました。 「なぜスタイルを組み合わせてより少ないクラスにしないのですか?」と疑問に思うかもしれません。良い質問です！私はクラスを柔軟に保ちたいと思っています。青のない小さいものをいつ再利用したくなるかわかりません。

ID セレクター

一意の要素には ID を使用します。これをチェックしてください:

My Name is Nolan!

ID は控えめに使用し、ページごとに 1 回のみ使用してください。 #:
を使用して CSS でターゲットを指定します

#name {
  text-decoration: underline;
}

シンプルですね?

相反するスタイル

要素にクラスと ID の両方がある場合はどうなるでしょうか?このような：

Will I be red or blue?

赤くなるよ！なぜ？ ID はクラスよりも具体的であるためです。簡単な例を次に示します:

I’m styled by three rulesets!

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

テキストが赤くなり、下線が付き、フォント サイズは 12 ピクセルになります。 ID はクラスよりも優先され、クラスは要素セレクターをオーバーライドします。このスタイルのカスケードにより、コードを繰り返さなくてもページが洗練された外観になります。

チャレンジ

自己紹介ページをレベルアップしましょう!あなたの使命は次のとおりです:

• 要素セレクターを使用して、

  、

  、および

  のデフォルトのスタイルを設定します。

• タグを使用して名前の下にタグラインを追加し、ID を使用してスタイルを設定します。

• クラスセレクターを使用して他のテキストを飾り付けます。

矛盾するスタイルを試して、どのルールが勝つかを確認してください。理由がわかりますか?

読んでいただきありがとうございます！このシリーズで他にも取り上げてほしいトピックがあれば、コメント欄で教えてください。または、このシリーズをどのように楽しんでいるかを教えてください。