この実験では、学生たちはウェブ開発において使用される基本的な CSS セレクタを探求し、ウェブページ要素のスタイリングの実践的な技術に焦点を当てます。この実験は、基本的なタグセレクタから始まり、クラスや ID セレクタなどのより特定の選択方法に徐々に進む、さまざまな CSS セレクタがどのように機能するかを理解するための実践的なアプローチを提供します。
参加者は、HTML ファイルを作成し、要素を一様にスタイリングするためにタグセレクタを適用し、ターゲットのスタイリングのためにクラスセレクタを実装し、個々の要素を一意に変更するために ID セレクタを使用する方法を学びます。また、この実験では、CSS セレクタの優先順位や!important ルールの使用などの重要な概念も扱い、学生たちが CSS スタイリング技術を通じてウェブページのデザインを効果的に制御してカスタマイズする方法を包括的に理解できるようにします。
このステップでは、HTML ファイルを作成し、CSS で基本的なタグセレクタを適用する方法を学びます。タグセレクタは、タグ名を対象とすることで HTML 要素をスタイリングする基本的な方法です。
まず、プロジェクトディレクトリに HTML ファイルを作成しましょう。WebIDE を開き、~/projectディレクトリに移動します。index.htmlという新しいファイルを作成します：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Tag Selector Example</title>
<style>
/* ここに CSS を追加します */
</style>
</head>
<body>
<h1>Welcome to CSS Selectors</h1>
<p>This is a paragraph about CSS tag selectors.</p>
<div>This is a div element.</div>
</body>
</html>次に、HTML 要素をスタイリングするためにタグセレクタを適用しましょう。<style>タグの中に以下の CSS を追加します：
/* h1 のタグセレクタ */
h1 {
color: blue;
text-align: center;
}
/* p のタグセレクタ */
p {
font-size: 16px;
color: green;
}
/* div のタグセレクタ */
div {
background-color: lightgray;
padding: 10px;
}このファイルを保存してブラウザで開くと、以下のように表示されます：
<h1>要素は青く中央に配置されます<p>要素は文字サイズ 16px で緑色になります<div>要素はパディング付きで淡い灰色の背景になりますブラウザでの出力例：
このステップでは、CSS でクラスセレクタを使用して、共有クラス属性を持つ複数の要素にスタイルを適用する方法を学びます。クラスセレクタは、特定の要素グループにスタイルを適用することができるため、タグセレクタと比較してより柔軟性が高くなります。
前のステップで作成したindex.htmlファイルを WebIDE で開きます。HTML を修正してクラス属性を追加します：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Class Selector Example</title>
<style>
/* ここにクラスセレクタを追加します */
</style>
</head>
<body>
<h1 class="main-title">Welcome to CSS Class Selectors</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is a normal paragraph.</p>
<div class="highlight">This is a highlighted div.</div>
</body>
</html>次に、CSS にクラスセレクタを追加して、特定のクラスを持つ要素にスタイルを適用します：
/*.highlight のクラスセレクタ */
.highlight {
background-color: yellow;
color: black;
font-weight: bold;
padding: 5px;
}
/*.main-title のクラスセレクタ */
.main-title {
color: blue;
text-align: center;
font-size: 24px;
}このファイルを保存してブラウザで開くと、以下のように表示されます：
highlightクラスを持つ要素は黄色の背景になりますhighlightクラスを持つ要素のみが特別なスタイリングを受けますブラウザでの出力例：
このステップでは、ID セレクタについて学びます。ID セレクタは、ウェブページ上の一意の単一要素にスタイルを適用するために使用されます。複数の要素に適用できるクラスセレクタとは異なり、ID セレクタは特定の個々の要素を対象とします。
前のステップで作成したindex.htmlファイルを WebIDE で開きます。HTML を修正して ID 属性を追加します：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS ID Selector Example</title>
<style>
/* ここに ID セレクタを追加します */
</style>
</head>
<body>
<h1 class="main-title">Welcome to CSS ID Selectors</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p id="special-paragraph">This is a unique paragraph with an ID.</p>
<div class="highlight" id="main-content">
This is a highlighted div with an ID.
</div>
</body>
</html>次に、CSS に ID セレクタを追加して特定の要素にスタイルを適用します：
/* #special-paragraph の ID セレクタ */
#special-paragraph {
color: purple;
font-style: italic;
border-bottom: 2px solid green;
}
/* #main-content の ID セレクタ */
#main-content {
background-color: lightblue;
padding: 10px;
font-weight: bold;
}このファイルを保存してブラウザで開くと、以下のように表示されます：
special-paragraphの段落は紫色で斜体になり、下に緑色の罫線がありますmain-contentの div は淡い青色の背景と太字のテキストになりますブラウザでの出力例：
このステップでは、CSS セレクタの特異性と、要素にスタイルを適用する際に異なる種類のセレクタがどのように優先順位付けされるかについて学びます。セレクタの優先順位を理解することで、複数のセレクタが同じ要素を対象とする場合にどのスタイルが適用されるかを制御することができます。
前のステップで作成したindex.htmlファイルを WebIDE で開きます。HTML と CSS を更新してセレクタの優先順位を示します：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selector Priorities</title>
<style>
/* ここでセレクタの優先順位を示します */
</style>
</head>
<body>
<div id="priority-demo" class="highlight">
<p>Understanding CSS Selector Priorities</p>
</div>
</body>
</html>次に、異なるセレクタがどのように優先順位付けされるかを示す CSS を追加します：
/* タグセレクタ（最も低い優先順位） */
p {
color: green;
font-size: 16px;
}
/* クラスセレクタ（中間の優先順位） */
.highlight {
color: blue;
border: 2px solid gray;
}
/* ID セレクタ（最も高い優先順位） */
#priority-demo {
color: red;
font-weight: bold;
}
/* インラインスタイルは最も高い優先順位を持ちます（この例では示していません） */セレクタの優先順位階層（最も低いものから最も高いものまで）：
このファイルを保存してブラウザで開くと、以下のように表示されます：
ブラウザでの出力例：
このステップでは、CSS の!importantルールについて学びます。これは、他のすべてのスタイリングルールを上書きする強力な方法です。控えめに使用する必要がありますが、特定の状況では役立つことがあります。
前のステップで作成したindex.htmlファイルを WebIDE で開きます。HTML を更新して!importantルールを示します：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS!important Rule</title>
<style>
/* ここで!important ルールを示します */
</style>
</head>
<body>
<div id="important-demo" class="highlight">
<p>Understanding the!important CSS Rule</p>
</div>
</body>
</html>次に、!importantルールが他のセレクタをどのように上書きするかを示す CSS を追加します：
/* 通常のタグセレクタ */
p {
color: green;
font-size: 16px;
}
/* クラスセレクタ */
.highlight {
color: blue;
border: 2px solid gray;
}
/* ID セレクタ */
#important-demo {
color: red;
}
/*!important ルール（最も高い優先順位） */
p {
color: purple !important;
font-weight: bold !important;
}!importantルールに関するポイント：
このファイルを保存してブラウザで開くと、以下のように表示されます：
!importantルールが他のセレクタよりも優先されますブラウザでの出力例：
!importantが他のスタイリングルールをどのように上書きするかを示していますこの実験では、参加者はウェブ開発における基本的な CSS セレクタ技術を探求しました。見出し、段落、div コンテナなどの HTML 要素にスタイルを適用するための基本的なタグセレクタから始まります。色、配置、フォントサイズ、背景プロパティを適用することで、学習者はそれらのタグ名を使用して特定の HTML 要素を対象とする実践的な経験を得ました。
この実験では段階的により高度なセレクタ方法を紹介し、クラスセレクタが複数の要素に対するターゲット指定されたスタイリングを可能にすることでより大きなスタイリングの柔軟性を提供できる方法を示しました。実践的な演習を通じて、参加者は CSS スタイルを動的に作成して適用する方法を学び、セレクタ階層の核心となる原則と、ウェブデザインにおける正確な要素ターゲット指定の重要性を理解しました。
