CSSを学ぶ。classセレクタとidセレクタを学ぶ。

CSSを学ぶ。classセレクタとidセレクタを学ぶ。

今回のポイント

前回までは実際にCSSを記述して、装飾について解説してきました。
今回からはもう少し深掘りして、CSSの基本文法について解説していきたいと思います。
以前の記事については以下を参照して、おさらいして下さいね。

CSSの基本文法

CSSは『セレクタ』、『プロパティ』、『値』の3つで構成されます。

これは以前に実際、CSSを記述した際に使ったコードですね。
この文法(コード)を解説すると

「pタグの中(=セレクタ)の文字色(=プロパティ)をyellow(=値)にする」

となります。
そしてこのセレクタ部分を、今回は解説していこうと思っています。

基本的なセレクタの種類

基本的なセレクタの種類は9つあります。

  1. 要素の指定
  2. 「*(アスタリスク)」すべての要素を指定
  3. 「.class」クラス名の指定
  4. 「#id」ID名の指定
  5. A B 子孫セレクタの指定
  6. A > B 子セレクタの指定
  7. A + B 隣接セレクタの指定
  8. A ~ B 要素の後ろにある同じ階層のセレクタの指定
  9. 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を学ぶ。シリーズはこちら

CSSカテゴリの最新記事