CSS セレクターの基本

はじめに

CSS セレクターの基本実験へようこそ！Cascading Style Sheets (CSS) は、HTML のようなマークアップ言語で記述されたドキュメントのプレゼンテーションを記述するために使用される、World Wide Web の基盤となるテクノロジーです。

CSS セレクターは、スタイルを適用したい HTML 要素を選択するためのパターンです。セレクターを習得することは、あらゆるウェブ開発者にとって基本的なスキルです。この実験では、最も一般的な種類の CSS セレクターを使用して、シンプルなウェブページをスタイルする方法を学びます。

以下の項目を練習します：

• 要素セレクター: タグ名で要素をターゲットにします。
• クラスセレクター: 特定のclass属性を持つ要素をターゲットにします。
• ID セレクター: 特定のid属性を持つ単一の要素をターゲットにします。
• グループ化セレクター: 複数のセレクターに同じスタイルを適用します。
• 子孫セレクター: 他の要素の子孫である要素をターゲットにします。

実験環境は、index.htmlファイルで事前に設定されています。あなたのタスクは、ページをスタイルするためにstyles.cssファイルに CSS コードを記述することです。インターフェースの左上にあるWeb 8080タブに切り替えることで、変更をリアルタイムでプレビューできます。

p タグに要素セレクターを使用する

このステップでは、要素セレクターを使用して、ページ上のすべての<p>（段落）要素にスタイルを適用します。要素セレクターは最も基本的なセレクタータイプであり、タグ名に基づいて HTML 要素を選択します。

まず、WebIDE の左側にあるファイルエクスプローラーでstyles.cssファイルを見つけます。それをクリックしてエディターで開きます。

次に、styles.cssファイルに以下の CSS コードを追加します。このルールは、すべての<p>要素を選択し、テキストの色を青に変更します。

p {
  color: blue;
}

コードを追加した後、ファイルを保存します（Ctrl+SまたはCmd+Sを使用できます）。効果を確認するには、Web 8080タブをクリックしてください。ページ上の 3 つの段落すべてのテキストが青色に変わっているはずです。

.classname でクラスセレクターを適用する

このステップでは、クラスセレクターの使用方法を学びます。クラスセレクターは、要素セレクターよりも具体的です。class属性の値に基づいて要素を選択します。クラスセレクターは、ピリオド（.）の後にクラス名を記述します。

index.htmlファイルでは、段落の 1 つにclass="highlight"属性が付いています。この特定の段落をターゲットにします。

以下の CSS ルールをstyles.cssファイルに追加します。これにより、highlightクラスを持つ任意の要素が選択され、背景色が黄色になります。

.highlight {
  background-color: yellow;
}

styles.cssファイルを保存し、Web 8080タブに切り替えて変更を表示します。「This is a special paragraph with a class」というテキストを持つ段落のみが黄色い背景になり、他の段落は影響を受けないことに気づくでしょう。

#idname で ID セレクターを実装する

このステップでは、ID セレクターを使用します。ID セレクターは、クラスセレクターよりもさらに具体的です。特定のid属性を持つ一意の要素を選択するために使用されます。ID セレクターは、ハッシュ文字（#）の後に要素の ID を記述します。ID は単一の HTML ページ内で一意でなければならないことを覚えておいてください。

index.htmlの<h1>要素にはid="main-title"が付いています。これをスタイル設定しましょう。

以下の CSS ルールをstyles.cssファイルに追加します。このルールは、メインタイトルのフォントサイズを大きくし、その下に実線の黒い線を追加します。

#main-title {
  font-size: 32px;
  border-bottom: 2px solid black;
}

ファイルを保存し、Web 8080タブを確認してください。「Welcome to Our Page」というメインタイトルが大きくなり、その下に線が表示されているはずです。このスタイルは、ID main-title を持つ要素にのみ適用されます。

カンマでセレクターを結合してグループ化する

このステップでは、コードを繰り返すことなく、複数のセレクターに同じスタイルを適用する方法を学びます。グループ化セレクターを使用すると、各セレクターをカンマで区切ることでこれを実現できます。

例えば、ページ上の<h1>要素と<h2>要素の両方に同じフォントを適用したいとします。2 つの別々のルールを記述する代わりに、それらをグループ化できます。

以下の CSS ルールをstyles.cssファイルに追加します。

h1,
h2 {
  font-family: Arial, sans-serif;
}

このルールは、ブラウザに対して、指定されたfont-familyをすべての<h1>要素とすべての<h2>要素に適用するように指示します。

ファイルを保存し、Web 8080タブを更新してください。「Welcome to Our Page」と「About CSS」の両方のフォントが変更されたことを確認してください。

div p のような子孫セレクターを追加する

このステップでは、子孫セレクターを使用します。このセレクターは、指定された要素の子孫であるすべての要素に一致します。子孫セレクターは、スペースで区切られた 2 つ以上のセレクターをリストすることによって作成されます。

私たちのindex.htmlには、<div>の中に<p>要素があります。ページ上の他の段落ではなく、この特定の段落のみをスタイル設定したいと考えています。

以下の CSS ルールをstyles.cssファイルに追加します。セレクターdiv pは、<div>要素のどこかに配置されている任意の<p>要素を選択します。

div p {
  font-style: italic;
}

ファイルを保存した後、Web 8080タブに移動してください。「This paragraph is inside a div...」という段落のみがイタリック体になっているのがわかるはずです。他の 2 つの段落は、<div>の子孫ではないため、変更されていません。

まとめ

実験の完了おめでとうございます！ウェブページをスタイル設定するための基本的な CSS セレクターを、成功裏に学び、適用することができました。

この実験では、以下の項目を練習しました。

• 要素セレクター (p): 特定のタイプのすべての要素をスタイル設定するために使用します。
• クラスセレクター (.highlight): クラスを共有する特定の要素をスタイル設定するために使用します。
• ID セレクター (#main-title): 単一のユニークな要素をスタイル設定するために使用します。
• グループ化セレクター (h1, h2): 複数の要素に効率的に同じスタイルを適用するために使用します。
• 子孫セレクター (div p): 他の要素内での位置に基づいて要素をスタイル設定するために使用します。

これらのセレクターは、複雑で美しいウェブページレイアウトを作成するための構成要素です。これらを使用して、HTML ドキュメントの外観を正確に制御できるようになりました。