今回のポイント
前回までは実際にCSSを記述して、装飾について解説してきました。
今回からはもう少し深掘りして、CSSの基本文法について解説していきたいと思います。
以前の記事については以下を参照して、おさらいして下さいね。
CSSの基本文法
CSSは『セレクタ』、『プロパティ』、『値』の３つで構成されます。
これは以前に実際、CSSを記述した際に使ったコードですね。
この文法（コード）を解説すると
「pタグの中（＝セレクタ）の文字色（＝プロパティ）をyellow（＝値）にする」
となります。
そしてこのセレクタ部分を、今回は解説していこうと思っています。
基本的なセレクタの種類
基本的なセレクタの種類は９つあります。
- 要素の指定
- 「＊（アスタリスク）」すべての要素を指定
- 「.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を使うには３つの方法があります。</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を使うには３つの方法があります。</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を使うには３つの方法があります。</p>
と記述してみました。
これで『CSSを使うには３つの方法があります。』の段落は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を使うには３つの方法があります。</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を使うには３つの方法があります。</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を学ぶ。シリーズはこちら
