本講座ではCSSセレクタの種類について学んでいきます。
代表的なCSSセレクタ
代表的なCSSセレクタ（※）を以下に挙げてみます。
- クラスセレクタ
- 要素型セレクタ
- 全称セレクタ
- その他のセレクタ
順に見ていきましょう。
※ CSSのセレクタであることを明確にするために"CSSセレクタ"と表記しましたが、以降は単に"セレクタ"と表記します
クラスセレクタ
CSSで最も多く使われるのがクラスセレクタです。
HTMLタグにclass属性を追加して指定した値が、セレクタとして使用できます。class属性はCSS用の属性と言っても良いでしょう。
例えば、以下のようなHTMLがあった場合
<h1 class="haeding">見出し</h1>CSSでは
.heading {
font-size: 16px;
}のように使うことができます。
クラスセレクタと認識させるためには、上記のように「. + class属性の値」という形で記述します。
要素型セレクタ
HTML要素をセレクタに使用するものが要素型セレクタです。
指定したHTML要素全てに共通のCSSを適応させることができます。
例えば、以下のようにCSSを書いた場合
p {
color: red;
}全てのp要素に赤文字が適応されます。
全称セレクタ
*（ワイルドカード）をセレクタに使用するものが全称セレクタです。
全てのHTML要素に共通のCSSを適応させることができます。
その他のセレクタ
id属性・その他の属性もセレクタに使用することができます。
id属性をセレクタに使用する例
<h1 id="mainTitle">メインタイトル</h1>#mainTitle {
font-size: 16px;
}「# + id属性の値」とすることでidセレクタとして認識させることができます。
- その他の属性をセレクタに使用する例
<input type="text">[type="text"] {
color: red;
}HTML属性の設定をそのまま[]で囲むことで属性セレクタとして認識させることができます。
selectorの選び方
基本的にはクラスセレクタを選んで使用することをおすすめします。
クラスセレクタは、限定的にも汎用的にも使うことができる、CSSに最適なセレクタです。
class属性に指定した値を１度しか使わなければ限定的に、複数回使用すれば汎用的になります。
.special {
color: red;
}
.general {
color: black;
}<!-- 一度だけ使用 -->
<p class="special">限定的な使い方</p>
<!-- 複数回使用 -->
<p class="general">汎用的な</p>
<p class="general">使い方</p>全ページ共通のCSSを設定する場合に限っては、要素型セレクタまたは全称セレクタを使うのが良いでしょう。
まとめ
本講座では
- CSSセレクタの種類
- おすすめのCSSセレクタ
について学びました。
学んだセレクタの種類は少ないですが、これで非常に多くの装飾が可能になります。
では、これから装飾の方法についても詳細に学んでいきましょう！
最終コード
index.html
<!doctype html>
<html lang="ja">
<head>
<title>はじめてのHTML</title>
<link rel="icon" href="./favicon.ico">
<style>
h1 {
color: red;
font-size: 20px;
}
.outsideLink {
color: orange;
}
form {
background-color: #f3f3f3;
}
</style>
</head>
<body>
<!--
これはGieerの講座で作成したHTMLです。
実サービスには使えません。
-->
<h1>はじめてのHTML</h1>
<a href="./link.html">はじめてのリンク</a>
<a href="./task.html">HTML入門課題</a>
<a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
<h2>ご意見フォーム</h2>
<!-- ダミーフォーム -->
<form action="./index.html" method="post" class="opinionForm">
<div>
お名前：<input type="text" name="name" required>
</div>
<div>
ご意見：
<textarea name="opinion" required></textarea>
</div>
<div>
回答：
<input type="radio" name="lottery" value="need">希望する
<input type="radio" name="lottery" value="notNeed" checked>希望しない
</div>
<div>
メールアドレス（回答を希望する方のみ）：<input type="text" name="email">
</div>
<div>
<button type="submit">送信する</button>
</div>
</form>
</body>
</html>link.html
<!doctype html>
<html lang="ja">
<head>
<title>はじめてのリンク</title>
<link rel="icon" href="./favicon.ico">
</head>
<body>
<h1>はじめてのリンク</h1>
<a href="./index.html">はじめてのHTML</a>
<a href="./task.html">HTML入門課題</a>
</body>
</html>task.html
<!doctype html>
<html lang="ja">
<head>
<title>HTML入門課題</title>
<link rel="icon" href="./favicon.ico">
</head>
<body>
<h1>HTML入門課題</h1>
<div>このファイルはHTML入門課題で作成したものです。</div>
<h2>ファイルリスト</h2>
<ul>
<li>
<a href="./index.html">はじめてのHTML</a>
</li>
<li>
<a href="./link.html">はじめてのリンク</a>
</li>
</ul>
</body>
</html>
