はじめに
この実験では、学生たちはウェブ開発において使用される基本的な CSS セレクタを探求し、ウェブページ要素のスタイリングの実践的な技術に焦点を当てます。この実験は、基本的なタグセレクタから始まり、クラスや ID セレクタなどのより特定の選択方法に徐々に進む、さまざまな CSS セレクタがどのように機能するかを理解するための実践的なアプローチを提供します。
参加者は、HTML ファイルを作成し、要素を一様にスタイリングするためにタグセレクタを適用し、ターゲットのスタイリングのためにクラスセレクタを実装し、個々の要素を一意に変更するために ID セレクタを使用する方法を学びます。また、この実験では、CSS セレクタの優先順位や!important ルールの使用などの重要な概念も扱い、学生たちが CSS スタイリング技術を通じてウェブページのデザインを効果的に制御してカスタマイズする方法を包括的に理解できるようにします。
HTML ファイルを作成してタグセレクタを適用する
このステップでは、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>要素はパディング付きで淡い灰色の背景になります
ブラウザでの出力例：
- 青く中央に配置された「Welcome to CSS Selectors」の見出し
- 緑色の段落のテキスト
- パディング付きの淡い灰色の 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クラスを持つ要素のみが特別なスタイリングを受けます
ブラウザでの出力例：
- 青く中央に配置されたメインタイトル
- 黄色に強調表示された段落と div
- 通常の段落はスタイルを受けていません
一意の要素を対象とするために ID セレクタを使用する
このステップでは、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;
}
このファイルを保存してブラウザで開くと、以下のように表示されます：
- ID が
special-paragraphの段落は紫色で斜体になり、下に緑色の罫線があります - ID が
main-contentの div は淡い青色の背景と太字のテキストになります
ブラウザでの出力例：
- ID 付きの段落に対する一意のスタイリング
- ID 付きの div に対する明確なスタイリング
- その他の要素は以前のスタイリングを維持します
CSS セレクタの優先順位を理解する
このステップでは、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;
}
/* インラインスタイルは最も高い優先順位を持ちます（この例では示していません） */
セレクタの優先順位階層（最も低いものから最も高いものまで）：
- タグセレクタ
- クラスセレクタ
- ID セレクタ
- インラインスタイル（この例では示していません）
このファイルを保存してブラウザで開くと、以下のように表示されます：
- 段落のテキストは赤色になります（ID セレクタから）
- div には灰色の枠が表示されます（クラスセレクタから）
- フォントは太字になります（ID セレクタから）
ブラウザでの出力例：
- 段落の赤色で太字のテキスト
- div の周りの灰色の枠
- より特定のセレクタがより特定でないセレクタを上書きする方法を示しています
CSS スタイリングにおける!important ルールを調べる
このステップでは、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ルールに関するポイント：
- 他のすべてのセレクタの優先順位を上書きします
- 絶対に必要な場合にのみ、極力控えめに使用してください
- 過度に使用すると、CSS の保守が難しくなります
このファイルを保存してブラウザで開くと、以下のように表示されます：
- 段落のテキストは紫色で太字になります
!importantルールが他のセレクタよりも優先されます
ブラウザでの出力例：
- 段落の紫色で太字のテキスト
!importantが他のスタイリングルールをどのように上書きするかを示しています
まとめ
この実験では、参加者はウェブ開発における基本的な CSS セレクタ技術を探求しました。見出し、段落、div コンテナなどの HTML 要素にスタイルを適用するための基本的なタグセレクタから始まります。色、配置、フォントサイズ、背景プロパティを適用することで、学習者はそれらのタグ名を使用して特定の HTML 要素を対象とする実践的な経験を得ました。
この実験では段階的により高度なセレクタ方法を紹介し、クラスセレクタが複数の要素に対するターゲット指定されたスタイリングを可能にすることでより大きなスタイリングの柔軟性を提供できる方法を示しました。実践的な演習を通じて、参加者は CSS スタイルを動的に作成して適用する方法を学び、セレクタ階層の核心となる原則と、ウェブデザインにおける正確な要素ターゲット指定の重要性を理解しました。
