Skip to content

2. セレクタとプロパティ

CSS (Cascading Style Sheets) は HTML 要素のスタイリングを行うための言語です。この章では、CSS の基礎である「セレクタ」と「プロパティ」について詳しく学びます。セレクタを使って特定の HTML 要素を選択し、プロパティを使ってその要素のスタイルを変更する方法を理解しましょう。

2.1 セレクタの基本

セレクタは CSS の基本的な構成要素であり、どの HTML 要素にスタイルを適用するかを指定します。以下は主なセレクタの種類です。

2.1.1 タイプセレクタ

タイプセレクタは、HTML 要素名を直接指定します。例えば、p 要素に対してスタイルを適用するには以下のように書きます。

p {
  color: blue;
}

上記の例では、全ての p 要素のテキストが青色に変わります。

2.1.2 クラスセレクタ

クラスセレクタは、HTML の class 属性で指定された要素を選択します。クラスセレクタはピリオド (.) を使って指定します。

.container {
  padding: 10px;
  background-color: lightgrey;
}

上記の例では、クラス container が付与された要素にスタイルが適用されます。

2.1.3 ID セレクタ

ID セレクタは、HTML の id 属性で指定された要素を選択します。ID セレクタはハッシュ (#) を使って指定します。

#main-header {
  font-size: 24px;
  text-align: center;
}

上記の例では、ID main-header が付与された要素にスタイルが適用されます。

2.1.4 グループセレクタ

複数のセレクタをグループ化して、同じスタイルを適用することができます。セレクタをカンマで区切ります。

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

上記の例では、h1, h2, h3 要素全てに同じフォントが適用されます。

2.2 プロパティと値

プロパティは、特定のスタイルを指定するために使います。プロパティとそれに対する値をペアで指定します。

2.2.1 プロパティの基本例

以下は、いくつかの代表的なプロパティとその値の例です。

2.2.1.1 色（color と background-color）

p {
  color: red;
  background-color: yellow;
}

上記の例では、p 要素のテキストは赤色に、背景は黄色に設定されます。

2.2.1.2 フォント関連（font-size と font-family）

p {
  font-size: 16px;
  font-family: "Times New Roman", serif;
}

上記の例では、p 要素のフォントサイズが 16 ピクセルに、フォントファミリーが Times New Roman に設定されます。

2.2.2 複合プロパティ

いくつかのプロパティは、複数のスタイルをまとめて指定できます。例えば、margin や padding がそれに該当します。

div {
  margin: 10px 15px 20px 25px; /* 上、右、下、左の順 */
  padding: 5px;
}

上記の例では、div 要素に対して上下左右のマージンとパディングが設定されます。

2.3 セレクタの結合

2.3.1 子孫セレクタ

子孫セレクタは、ある要素の子孫に対してスタイルを適用します。

div p {
  color: green;
}

上記の例では、div 要素の内部にある全ての p 要素に対して、テキスト色が緑色に設定されます。

2.3.2 直接子要素セレクタ

直接子要素セレクタは、ある要素の直下の子要素に対してスタイルを適用します。

ul > li {
  list-style-type: square;
}

上記の例では、ul 要素の直接の子である li 要素に対して、リストスタイルが四角に設定されます。

2.3.3 属性セレクタ

属性セレクタは、特定の属性を持つ要素を選択します。

input[type="text"] {
  border: 1px solid #000;
}

上記の例では、type 属性が text の input 要素に対して、境界線が設定されます。

2.4 実践演習

以下の HTML と CSS を用いて、実際にスタイルを適用してみましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>CSSの練習</title>
  </head>
  <body>
    <h1 id="main-header">CSSの基礎</h1>
    <div class="container">
      <p class="highlight">これは強調されたテキストです。</p>
      <p>これは通常のテキストです。</p>
    </div>
    <ul>
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ul>
  </body>
</html>

CSS

/* タイプセレクタ */
p {
  font-size: 14px;
}

/* クラスセレクタ */
.container {
  padding: 10px;
  background-color: lightgrey;
}

.highlight {
  color: red;
}

/* IDセレクタ */
#main-header {
  font-size: 24px;
  text-align: center;
}

/* グループセレクタ */
h1,
h2,
h3 {
  font-family: "Arial", sans-serif;
}

/* 子孫セレクタ */
.container p {
  margin-bottom: 10px;
}

CSS を使って、HTML 要素にスタイルを適用する基本的な方法を学びました。実際にコードを書くことで、セレクタとプロパティの使い方を身につけてください。