クラスセレクター
Coddyの「CSSセレクター」コースのレッスン 4/15。
クラスセレクターは、特定のclass属性を持つ要素を選択するCSSセレクターの一種です。class属性は、HTML要素をグループ化するために追加できるカスタム属性です。
特定のクラスを持つ要素を選択するには、ピリオド（.）の後にクラス名を記述します。例えば、セレクター .my-class は、my-class というクラスを持つすべての要素を選択します。
以下は、クラスセレクターを使用してウェブページをスタイリングする方法の例です：
.my-class {
color: red;
font-size: 2em;
}要素にクラスを追加するには、次のように記述します：
<div class="my-class"></div>このCSSルールは、my-class というクラスを持つすべての要素のスタイルを、文字色を赤に、フォントサイズを2emに設定します。
チャレンジ
簡単- 3つの
h1要素を持つウェブページを作成してください。 - 最初の
h1要素にクラスを追加してください。 - 2番目の
h1要素に別のクラスを追加してください。 - CSSクラスセレクターを使用して、最初の
h1要素のスタイルを red に設定し、フォントサイズを 64px に設定してください。 - 別のCSSクラスセレクターを使用して、もう一つの
h1要素のスタイルを blue に設定し、フォントサイズを 32px に設定してください。
自分で試してみよう
<html>
<head>
<title>Class Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>