CSS08 スタイルシートのセレクタの種類について（7分9秒）

今回はスタイルシートのセレクタの種類について解説しています。

スタイルシートで効率よくスタイル指定をしていけるようにオリジナルのセレクタを作成することができます。

これには、idセレクタとclassセレクタがあります。

概要

idセレクタ
classセレクタ
子孫セレクタ

補足・ポイント

idセレクタについて

idセレクタは、HTMLの要素1つだけに特別なスタイルを設定するときに使います。

ページレイアウトの骨組みとなるヘッダー、フッター、コンテンツ、ナビゲーションなどに多く使用されます。

htmlファイルのスタイルを適用させたい要素にid属性を記述します。

<div id="header">～</div>

cssファイルに使用するセレクタ名（この例ではheader）に「#」をつけたものを記述します。

#header {
　スタイルの指定
}

要素を特定して割り当てる書き方として以下のような記述もできます。

div#header {
　スタイルの指定
}

idセレクタの名前の付け方

idセレクタの名前の付け方については、特にルールはありません。

以下の名前が一般的に多く使われています。

container: コンテンツ全体をまとめたりする時に使用されます。
header: ロゴなどを配置しているページ最上部の要素をまとめたりする時に使用されます。
nav: ナビゲーションの部分によく使われます。
content: コンテンツ部分の要素をまとめたりする時に使用されます。
sidebar: 左右のサイドバーの部分によく使われます。
footer: コピーライト表記などを配置しているページ最上部の要素をまとめたりする時に使用されます。

classセレクタについて

classセレクタは、HTMLの特定の複数の要素にスタイルを設定するときに使います。

id要素は1つだけの要素に指定するものに対し、classセレクタは、複数の要素のスタイルを指定できるので、HTMLに複数出てくるdivや見出し、リスト、などをデザインするときによく使用されます。

htmlファイルのスタイルを適用させたい要素にclass属性を記述します。

<h2 class="title">～</h2>

cssファイルに使用するセレクタ名（この例ではtitle）に「.」をつけたものを記述します。

.title {
　スタイルの指定
}

要素を特定して割り当てる書き方として以下のような記述もできます。

h2.title {
　スタイルの指定
}

classセレクタの名前の付け方

idセレクタと同様にclassセレクタの名前の付け方については、特にルールはありません。

そのHTML要素の意味と組みあわせるようにすると管理がしやすいと思います。

classセレクタの名前の一例として以下のようなものがあります。

section: 見出しとその内容をまとめたりする時に使用されます。
article: 1つのブログ記事などをまとめたりする時に使用されます。
block: コンテンツの内容をまとめたりする時に使用されます。
date: 日付の部分によく使われます。
title: 見出し関連によく使われます。

使用可能な文字（id・class共通）

英字（大文字・小文字）
数字
ハイフン（ – ）
アンダーバー（ _ ）

のみです。

一部の古いブラウザは

ハイフン（ – ）
アンダーバー（ _ ）

は非対応なので注意が必要です。

html5で加わった新しい要素

html5で加わった新しい要素の一部に以下があります。

<header>～</header>
<footer>～</footer>
<nav>～</nav>
<section>～</section>
<article>～</article>

例えば、これまで

<div id="header">～</div>

のようにdiv要素にheaderというidセレクタを付けてマークアップしてきたものが

html5では

<header>～</header>

というようにhtmlタグのみでcssのスタイルと関連付けることができるようになりました。

この場合、cssでは以下のように記述します。

header {
　スタイルの指定
}

もちろん、これらの要素にもidセレクタ、classセレクタをつけて管理することもできます。

子孫セレクタについて

あるセレクタ内の特定セレクタだけにスタイルを適用することができるのが子孫セレクタです。

この子孫セレクタを上手く使うことで、無駄なセレクタが増えることもありませんし、HTML、CSSそれぞれのファイル管理がしやすくなります。

例えば、

<div id="header">
<p>サンプルテキスト</p>
</div>

このheaderというidを持つdivの中のp要素だけにスタイルを適用する場合のcssは以下のようになります。

#header p{
　font-size:12px;
}

CSSの地味ぃ～なテキスト周りの指定や継承の考え方などを乗り越え、idやclassセレクタ指定ができるようになる辺りから、グッと受講生さんの学習の速度が速くなるような気がします。

一方、idやclassを使うとHTMLやCSSの記述もだんだん複雑になってきて、ムツカシイ！！と感じる方受講生さんいらっしゃいます。

もっと高度な書き方や優先順位などもありますが、とりあえず、動画で解説している基本部分をおさえて、一つ一つ進んで行けば大丈夫^^

Webデザインの表現の幅が広がりますので、ぜひ、マスターしちゃいましょう！

一度、このidやclassセレクタで挫折しちゃったアナタも2回目はスッと頭に入ってくるかもしれません^^