CSS

CSS|基本となる3つのセレクタ

セレクタというのは、スタイルシートの中でデザインを適用させる場所を指定する部分です。ここでは、セレクタの基礎編としてよく使用される3つのセレクタのお話をしていきます。

基本的な3つのセレクタ

基本的な3つのセレクタは次の通りです。

  1. タイプ(要素)セレクタ
  2. classセレクタ
  3. idセレクタ

例えば、こんなHTMLがあったとします。

ボタンで表示を切り替えてご覧ください。

See the Pen css-selector-basis01 by kenichi (@ken81) on CodePen.

上記のソースコードをブラウザで表示させると、「ここの色を変えていくよ」というテキストが表示されます。

See the Pen css-selector-basis01 by kenichi (@ken81) on CodePen.

HTMLの簡単な説明

HTML

<div id="blue">
  <p class="red">ここの色を変えていくよ</p>
</div>
div要素
特に意味を持たない要素です。
p要素
文章の段落を表す要素になります。
classとidについて

要素の開始タグには、「class」や「id」といった属性を付けて自分で好きな名前を付けることができます。現時点では、名前を付けただけなので、特に意味はありません。この後、3つのセレクタを使って「ここの色を変えていくよ」というテキストの色を変えていきたいと思います。

色の指定方法

テキストの色を変えたいときは、プロパティに「color」を記入。
値には具体的な色の指定(ここでは、「red」または「blue」)を記入。

例えば、ある場所のテキストをにしたい場合は次のように書きます。

セレクタ{color:red;}

今回は、この「セレクタ」の部分の書き方が3パターンありますよ、というお話でしたね。

1.タイプセレクタを使った指定方法

タイプセレクタは、HTMLの要素(開始タグから終了タグまで)を指定する方法です。

例えば、p要素のテキストを赤くしたい場合は下記のように書きます。

p{color:red;}

これでp要素の中にあるテキストの色を「赤」として指定しましたので、これが、先ほどのソースコードに適用された場合、「ここの色を変えていくよ」という文字が赤くなります。

See the Pen css-selector-basis02 by kenichi (@ken81) on CodePen.

この方法で指定した場合、ページ内にあるp要素がすべて赤くなります。

2.classセレクタを使った指定方法

<div id="blue">
  <p class="red">ここの色を変えていくよ</p>
</div>

上記のp要素に付いているclass名「red」を利用してデザインを適用させるのがclassセレクタです。
書き方は、次のとおりです。

.red{color:red;}

HTMLにclassを付けるときは、「class=”red”」でしたが、スタイルシートでclassを指定するときはclass名の前にドット「.」を記入します。

See the Pen css-selector-basis03 by kenichi (@ken81) on CodePen.

これで、「red」というclass属性が付けられた部分がすべて赤になります。同じ要素がページ内に複数あり、その中の特定の要素のみにデザインを入れたい場合はこのclassセレクタを使います。

3.idセレクタを使った指定方法

3つ目の方法がidセレクタを使ったデザイン適用方法です。これはclassセレクタとほとんど同じです。

#blue{color:blue;}

先ほど、divタグに付けた「blue」というid属性を指定して色は青を指定してみました。これで、「blue」というid名が付けられた部分がすべて青くなります。

See the Pen css-selector-basis04 by kenichi (@ken81) on CodePen.

先ほど、classのときは前にドット「.」を入れるというお話をしましたが、idのときはシャープ「#」を入れます。

以上が3つのセレクタの書き方になります。ここの内容がなんとなく理解できたら次は、下記のページも見てみて下さい。

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP