CSSセレクターutorial：
セレクターの種類：
タグ名セレクター：
書式：
headタグ内にstyleタグを記述します。
<!--
要件：
すべてのdivタグの文字色を青に変更し、フォントサイズを30ピクセル、境界線を1ピクセルの黄色の実線に設定する。
spanタグの文字色を黄色に変更し、フォントサイズを20ピクセル、境界線を5ピクセルの青の破線に設定する。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSタグ名セレクター</title>
<style type="text/css">
div{
color: blue;
border: 1px solid yellow;
font-size: 30px;
}
span{
color: yellow;
border: 5px dashed blue;
font-size: 20px;
}
</style>
</head>
<body>
<div>div要素1</div>
<div>div要素2</div>
<span>span要素1</span>
<span>span要素2</span>
</body>
</html>
IDセレクター：
書式：
IDセレクターの書式
#id属性値{
プロパティ: 値;
}
IDセレクターは、id属性を使用して特定の要素にのみスタイルを適用できます。
<!--
要件1：2つのdiv要素を定義し、
最初のdiv要素のidを「wrapper001」に設定し、ID属性に基づいてCSSスタイルを適用して文字色を青に変更，
フォントサイズを30ピクセル、境界線を1ピクセルの黄色の実線に設定する。
2番目のdiv要素のidを「wrapper002」に設定し、ID属性に基づいてCSSスタイルを適用して文字色を赤に変更，
フォントサイズを20ピクセル、境界線を5ピクセルの青の破線に設定する。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IDセレクター</title>
<style type="text/css">
#wrapper001{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
#wrapper002{
color: red;
font-size: 20px;
border: 5px dashed blue;
}
</style>
</head>
<body>
<div id="wrapper001">div要素 1</div>
<div id="wrapper002">div要素 2</div>
</body>
</html>
クラスセレクター：
書式：
クラスセレクターの書式は：
.クラス属性値{
プロパティ: 値;
}
クラスセレクターは、class属性を使用して特定の要素にスタイルを柔軟に適用できます。
<!--
要件1：class属性値が「style01」のspanまたはdiv要素の，
文字色を青、フォントサイズを30ピクセル、境界線を1ピクセルの黄色の実線に変更する。
要件2：class属性値が「style02」のdiv要素の，
文字色をグレー、フォントサイズを26ピクセル、境界線を1ピクセルの赤の実線に変更する。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クラスセレクター</title>
<style type="text/css">
.style01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.style02{
color: gray;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="style01">div要素 style01</div>
<div class="style02">div要素 style02</div>
<span class="style01">span要素 style01</span>
<span class="style02">span要素 style02</span>
</body>
</html>
グループセレクター：
書式：
グループセレクターの書式は：
セレクター1, セレクター2, セレクターn{
プロパティ: 値;
}
グループセレクターを使用すると、複数のセレクターで同じCSSスタイルコードを共有できます。
<!--
要件1：class="style01"のdiv要素とid="label01"のすべてのspan要素の，
文字色を青、フォントサイズを20ピクセル、境界線を1ピクセルの黄色の実線に変更する。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>グループセレクター</title>
<style type="text/css">
.style01, #label01{
color: blue;
font-size: 20px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="style01">div要素 style01</div>
<br/>
<div>div要素</div>
<br/>
<span id="label01">span要素 label01</span>
<br/>
<span>span要素</span>
<br/>
</body>
</html>