CSS実践(5) 「3つのセレクターを使えるようになる」 #初心者

1. はじめに

本記事では、CSSの
「3つのセレクター」
について記載する。

2. エレメントセレクター

エレメントセレクターとは？

・ここは、どの要素（アイコンだったり文字だったり画像だったり）をクリックされたときに、タグが反応するか、設定する場所のこと。
・書き方として、大まかに説明すると2つの書き方がある。

①id属性・class属性での設定 ②リンク先での設定

3. idセレクター

idの役割

要素に固有の名前を付けるために使用する。

固有の名前なので、id属性の値は同じHTML文書内では重複して他の要素に記述することは出来ない。

id属性はCSSでセレクタで使用される他に、a要素のリンク先を指定する場合などにも使われる。

id属性に指定できる値は、先頭が アルファベットで始まり、2文字目以降にはアルファベット、数字、ハイフン(-)、アンダースコア(_)、ピリオン(.)、コロン(:) が使用可能。大文字と小文字は区別される。

【サンプル】

index.html

<body>
  <h1>セレクター</h1>
  <p id="hello">セレクターのカリキュラムです。</p>
</body>

styles.css

body {
  background-color: #ccc;
}
#hello {
  color: blue;
}

【表示例】

4. classセレクター

classの役割

要素に対して分類を指定

分類なので、class属性の値はHTML文書内で複数の要素に同じ値を付けることができる。

一つの要素に複数の分類を付けることも可能。 (その場合は空白文字で区切って続けて記述すること。)

記述に関しての注意点

・セレクタに付けることができる文字は アルファベット、数字、ハイフン(-)、アンダースコア(_)が使用可能で 1文字目にはハイフンと数字は使用できない。

空白は値の区切りとして使用しているため使用できない。

以下、「タスクを管理するToDoアプリ」を例に記載する。
【サンプル】

index.html

<body>
  <ul>
    <li><input type="checkbox">読書</li>
    <li class="completed"><input type="checkbox" checked>HTMLの学習</li>
    <li class="completed red"><input type="checkbox" checked>JavaScriptの学習</li>
  </ul>
</body>

styles.css

.completed{
  text-decoration: line-through;
}

・text-decoration: line-through
→チェックボックスにチェックが入った際に打消し線を表示するというもの。
・completed
→タスクが完了したという、任意のクラス名。
【表示例】

5. おわりに

次項:CSS実践(6) 「結合子を使ったセレクターの指定」に続く。

CSS実践(5) 「3つのセレクターを使えるようになる 」