今回のポイント
前回までは実際にCSSを記述して、装飾について解説してきました。
今回からはもう少し深掘りして、CSSの基本文法について解説していきたいと思います。
以前の記事については以下を参照して、おさらいして下さいね。
CSSの基本文法
CSSは『セレクタ』、『プロパティ』、『値』の3つで構成されます。

これは以前に実際、CSSを記述した際に使ったコードですね。
この文法(コード)を解説すると
「pタグの中(=セレクタ)の文字色(=プロパティ)をyellow(=値)にする」
となります。
そしてこのセレクタ部分を、今回は解説していこうと思っています。
基本的なセレクタの種類
基本的なセレクタの種類は9つあります。
- 要素の指定
- 「*(アスタリスク)」すべての要素を指定
- 「.class」クラス名の指定
- 「#id」ID名の指定
- A B 子孫セレクタの指定
- A > B 子セレクタの指定
- A + B 隣接セレクタの指定
- A ~ B 要素の後ろにある同じ階層のセレクタの指定
- A , B 複数のセレクタの指定
今回はそのうちの3.「.class」クラス名の指定と4.「#id」ID名の指定について解説していきたいと思います。
他のセレクタの指定方法については、さほど複雑ではないので後日、記事で実際にCSSを記述する中で解説します。
ちなみに。。。1.要素の指定については前回の記事で解説した方法です。
p {
background-color: yellow;
}
p要素に対して直接指定していますね。
以前の記事を参考にしてみて下さい。
それでは今回の本題に入っていきましょう。
「.class」クラス名の指定
これはHTMLとCSSそれぞれに「.(ドット)クラス名」と記述することで、指定のクラスに装飾が適用されます。
では実際にCSSを記述しながら見てみましょう。
いつものように、HTMLで記述した記事を準備します。
今回もCSSを使用するので、リンクも忘れず記述したものを準備しましょう。
不安な方は過去の記事を参考にして下さいね。
準備した記事は以下のものです。
使い回しですみませんm(_ _)m
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには3つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
それでは装飾を指定したい要素の中に「.class」を入れてみましょう。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p class=”test”>CSSを使うには3つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
<p class=”test”>CSSを使うには3つの方法があります。</p>
と記述してみました。
これで『CSSを使うには3つの方法があります。』の段落はclass名が『test』となりました。
それでは続けてCSSを記述していきます。
.test {
background-color: yellow;
}
.test(class名『test』)のbackground-color(背景)をyellowに指定
このようにclass名をCSSで指定する場合は『ドット+HTML内の指定したclass名』となります。
それではブラウザで確認してみましょう。

いかがですか?うまくいったでしょうか。
そしてこのclass名はHTML内で複数指定ができます。
試してみましょう。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p class=”test”>CSSを使うには3つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p class=”test”>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p class=”test”>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
そしてブラウザで確認してみましょう。

いかがだったでしょうか。
一斉にCSSで装飾を加えたい場合に、このセレクタ指定は有効です。
「#id」ID名の指定
それでは次に、「#id」ID名の指定について解説していきます。
これは「#(シャープ)ID名」と記述することで、指定のIDに装飾が適用されます。
そして覚えておかないといけないことがあります。
1つの文書内では同じid名を重複して指定することはできません。
それを念頭に置いて、次の説明に移りますね。
先程の記事に、ID名の指定をしてみましょう。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1 id=”header”>CSSを学ぶ。シリーズ</h1>
<p class=”test”>CSSを使うには3つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p class=”test”>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p class=”test”>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
<h1 id=”header”>CSSを学ぶ。シリーズ</h1>
とh1タグに記述しました。
これで『CSSを学ぶ。シリーズ』の見出しはID名が『header』となりました。
そして今度は、CSSで文字の大きさの指定をしてみましょう。
先程のCSSファイルに以下の内容を追記します。
.test {
background-color: yellow;
}
#header {
font-size: 80px;
}
#header(ID名『header』)のfont-size(フォントサイズ)を80pxに指定
このようにID名をCSSで指定する場合は『#+HTML内の指定したID名』となります。
それではブラウザで確認してみましょう。

いかがですか?
h1部分の文字は大きくなったでしょうか。
このようにセレクタをうまく利用することで、今後CSSの活用幅が広がっていきます。
どんどん活用して慣れていきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら