『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

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回目はスッと頭に入ってくるかもしれません^^

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!