HTML・CSS

【初心者OK】CSS基本セレククターの種類と書き方を基礎から解説

画像：CSS基本セレクターの種類と書き方解説

これからCSSを勉強してみたいと考えている方向けに、噛み砕いて基礎から解説しています。どんな感じなのかなぁ～、くらいの興味でオッケーです。

今回はCSSの基本的なセレクターについて書いています。セレクターを上手く使えると、効率的にCSSを書けるようになります。

小難しい事はあえて書いてません。

「もう知ってるよー」って所は読み飛ばしても大丈夫です。

CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の事。webサイトのレイアウト文字の色など、見た目を調整する役割として使います。
一方、HTMLは文章構造を構築する役割を担っています。例えるなら「本」と同じです。

CSSセレククターとは（CSSの基礎・HTMLの予備知識）

CSSは、HTMLで作られた構造に対して文字の色やレイアウトの指定など、見た目の調整を行うもの。その調整をどこにするのかを指定する時に使うのが「CSSセレクター」です。

HTMLとCSSはそれぞれ役割が違うんだね。

予備知識：HTMLの構造

「もう知ってるよー」って方は、「基本的なセレクターの種類」の項目へどうぞ。

CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。

HTMLはタグと呼ばれる記号で構成されています。
開始タグと終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。そして、この開始タグから終了タグで囲われた所を「要素」といいます。

図解：要素の仕組み解説

タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。
後で紹介する「id」や「class」も、「属性」と「属性値」になります。

さらに、要素をタグで囲むことも出来ます。「入れ子」と言ったりもします。
下の図だと、三つの要素は階層構造になっています。
外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。

図解：HTMLの要素入れ子構造
サンプルでは<div>が親要素。更に上にさかのぼって行けば<html>が親要素になります。

CSSの基本文法

CSSは、「セレクター」「プロパティ」「値」の3つで構成されています。
セレクターで指定する事により、デザインの適用先を選択しています。
図解：cssの文法書き方
フエル

CSSを適用する事を、「CSSを掛ける」とか言ったりするよ。

基本的なセレクターの種類

どのセレクターを使うかによって、様々な指定方法があります。選び方や書き方で簡潔にも冗長にもなります。

フエル

表示結果は、分かり易いようにタグを付けて表示しているよ。

上手くCSSが掛からないときは、「詳細度」も確認してみてくださいね。

画像：CSSのが効かない？詳細度の適用ルールを解説
関連記事CSSの優先順位？詳細度が原因かも 適用ルール解説

1．*（全称セレクター：すべての要素を指定）

「*（アスタリスク）」と記述することで、すべての要素に装飾が適用されます。影響範囲が広いので不要な所にも影響しない様に注意。

■ HTML
<p>ブログ始めました</p>
<span>fueru.infoです</span>
■ CSS
* {
  color: #ff3c07;
}
図解：全称セレクターの表示結果

2．タグ（要素型セレクター：タグ名で指定）

タグ名そのものをセレクターとして使う事が出来ます。

■ HTML
<p>ブログ始めました</p>
<span>ここは変わりません</span>
■ CSS
p {
  color: #ff3c07;
}
図解：タグセレクターの表示結果

3．.class（クラスセレクター：クラス名で指定）

「.（ドット）クラス名」と記述することで、同じクラス名が指定されている要素すべてに装飾が適用されます。半角スペースで区切ると複数指定出来ます。

クラス名は同じページ内で何回でも使う事が出来ます。 
■ HTML
<p>ブログ始めました</p>
<p class="sample">ここが変わります</p>
<h1 class="sample">同じくここも変わります</h1>
■ CSS
.sample {
  color: #ff3c07;
}
図解：クラスセレクターの表示結果

4．#id（idセレクター：id名で指定）

「#（ハッシュ）id名」と記述することで、指定のidに装飾が適用されます。SNSでも見かけますね。

同じ名前のidはそのページ内で複数の要素に指定は出来ません。idの場合は1つの要素だけです。 
■ HTML
<p>ブログ始めました</p>
<p class="sample">ここは変わります</p>
<h1 id="sample">同じく変わります</h1>
■ CSS
#sample {
  color: #ff3c07;
}
図解：idセレクターの表示結果

5．A B（子孫セレクター：親子関係で指定）

セレクターとセレクターの間に半角スペースを入れて指定することで、親要素から子要素へという様に階層をたどって適用されます。

■ HTML
<span>ブログ始めました</span>
<p>これが親で<span>これは子</span>です</p>
<span>ブログ始めました</span>
■ CSS
p span {
  color: #ff3c07;
}
図解：子孫セレクターの表示結果

6．A > B（子セレクター：階層直下を指定）

セレクターの次に「>」を入れセレクターを指定することで、指定の親要素内の1階層下（直下）の子要素に装飾が適用されます。それ以下の階層はたどりません。

■ HTML
<div>
  <span>div直下のspanなので変わります</span>
  <p><span>div直下ではないので変わりません</span></p>
</div>
<span>ここは変わりません</span>
■ CSS
div > span {
  color: #ff3c07;
}
図解：子セレクターの表示結果

7．A + B（隣接兄弟セレクター：隣接直後を指定）

セレクターの次に「+」を入れセレクターを指定することで、指定の要素に隣接した直後の要素に装飾が適用されます。

6.の子セレクターと似ていますが、違いは親子関係の階層内なのか、同じ階層の直後かです。 
■ HTML
<div>divの内容</div>
<p>divに隣接しているので変更されます</p>
<div>
  <p>div階層内なので変更されません</p>
</div>
■ CSS
div + p {
  color: #ff3c07;
}
図解：隣接兄弟セレクターの表示結果

8．A ~ B（一般兄弟セレクター：要素の後ろにある同じ階層を指定）

セレクターとセレクターの間に「~」を入れて指定することで、右側のセレクターが、左側のセレクターより後にある同じ階層の要素に装飾が適用されます。

7.の隣接兄弟セレクターとの違いは直後である必要がない所です。 
■ HTML
<div>divの内容</div>
<p>divと同じ階層なので変わります</p>
<div>
  <p>divと階層が違うので変わりません</p>
</div>
<p>divと同じ階層なので変わります</p>
■ CSS
div ~ p {
  color: #ff3c07;
}
図解：一般兄弟セレクターの表示結果

9．A , B（複数のセレクターの指定）

セレクターとセレクターの間に「,（カンマ）」を入れて指定することで、複数のタグやクラスに対して同じ装飾がまとめて適用がされます。

■ HTML
<div>ブログ始めました</div>
<p>ここは変わりません</p>
<span>spanも変わります</span>
<p id="sample">もちろんidも変わります</p>
■ CSS
div, span, #sample {
  color: #ff3c07;
}
図解：複数指定の表示結果

まとめ：基本セレクター編

今回はCSSに関して基本的なセレクターをまとめました。CSSセレクターの指定方法を複数知っていると、効率的にCSSを書ける様になります。

基本セレクター以外にも、属性を指定することで装飾を適用する「属性セレクター」や「疑似要素」、「疑似クラス」などの指定方法もあります。
沢山あるので記事を分けましたが、用途に合わせて使い分けられる様になると表現の幅も広がりますよ。

フエル

HTMLの書き方によってもCSSの書き方が変わってきますのでHTMLとセットで考えてくださいね。

画像：CSS疑似クラスの種類と書き方解説
関連記事【初心者OK】CSS疑似クラスの種類と書き方 超簡単に解説
画像：CSS疑似要素の種類と書き方解説
関連記事【初心者OK】CSS疑似要素の種類と書き方 超簡単に解説