プログラミングや動画編集の勉強ならCANIT (キャニット)

入門4:【CSSのセレクタ基礎】をマスターしたい方へ【チートシート付】

入門4:【CSSのセレクタ基礎】をマスターしたい方へ【チートシート付】 CSS入門
CANIT先生
CANIT先生

お二人は、CSSのセレクタをマスターしていますか?

猫田さん
猫田さん

CSSセレクタって、なんだったっけ……

牛山くん
牛山くん

セレクタは要素を指定するときに使うんですよね。タグの名前をそのまま書けばいいと思っています

CSSのセレクタを使えば、装飾の対象になる要素を自由に指定することができます。タグを直接指定するだけでなく、要素の並び方によって適用するスタイルを変えることもできるんです。

このページではCSSのセレクタの使い方を解説していきます。すぐにわかるチートシートを用意したので活用してみてください。セレクタを使いこなせるようになればスタイル指定の幅が広がります。

CSSセレクタって何?

CSSセレクタって何?
CANIT先生
CANIT先生

CSSセレクタについては前回「入門3:【CSSを初めて触る人へ】基本的な書き方やHTMLの基礎を学ぼう」でも簡単に触れているので、記憶が怪しかったら復習してみてください

猫田さん
猫田さん

復習してきました! セレクタとプロパティと値があった!

CANIT先生
CANIT先生

そうですね。あらためて、詳しくみていきましょう

CSSのセレクタは、HTML要素のどこにスタイルを適用するか選択するコマンドです。

CSSセレクタを使うことでHTMLの一部にだけスタイルを適用できます。

CSSセレクタを組み合わせれば、複雑な条件に一致した要素のみを対象にすることもできます。

CSSセレクタの種類と使い方

CSSセレクタの種類と使い方
CANIT先生
CANIT先生

CSSのセレクタは、最初は少しわかりづらいかもしれません

牛山くん
牛山くん

装飾を指定するときの指定の仕方が、何種類かあるんでしたよね

CSSセレクタにはいくつかの種類があります。ここでは各セレクタの概要と使用例を紹介します。

要素名セレクタ

スタイル適用対象をHTMLタグの名前で指定します。対象となるHTMLタグすべてに同じスタイルが適用されます。

例1 p { font-size : 15px; }
例2 div { line-height : 120%; }
CANIT先生
CANIT先生

この場合、指定したHTMLタグ全てに対してスタイルが適用されます

牛山くん
牛山くん

Pタグとかを一括で指定したいときはこれですね

猫田さん
猫田さん

おおー 牛山くんが頼もしく見える

クラス名セレクタ

スタイル適用対象をクラスの名前で指定します。HTMLタグに設定した任意のクラス名が使えます。

クラス名セレクタを使うときはクラス名の前に半角ドットをつけます。例を見てみましょう。

HTMLタグ

<p>これは<span class="hutoi">サンプル</span>です。</p>
<p class="hutoi">これはサンプルです。</p>

CSS例1

.hutoi { font-weight:bold; }

CSS例2

span.hutoi { font-weight:bold; }

HTMLタグに対してCSS例1を適用するとクラス名「hutoi」の要素が太字で表示されます。1行目は部分的に太字なり、2行目はまるごと太字になります。

CSS例2では、クラス名と要素名を同時に指定しています。2つを同時に指定するときは、要素名、クラス名の順番で記述し、半角のドットで繋いでください。spanタグであり、hutoiのクラス名を持つ要素にスタイルが適用されます。

CANIT先生
CANIT先生

この場合は、そのクラス名を持つ一部のHTMLのみにスタイルが適用されますよ

牛山くん
牛山くん

さっきとは逆に「ここだけ!」ってときに指定したい時に使うやつですね

ID名セレクタ

スタイル適用対象をIDの名前で指定します。クラス名セレクタのクラス名がID名に変わっただけです。

HTMLタグ

<p>これは<span id="sample">サンプル</span>です。</p>

CSS

#sample { font-weight:bold; }

ID名だけで指定するほか、要素名とID名の組み合わせでも指定できます。

CANIT先生
CANIT先生

クラスと基本的には考え方は同じですが、IDの場合は使い回しはできません

猫田さん
猫田さん

なんとっ!

牛山くん
牛山くん

IDは1つだけで、クラスは使い回しができるんですね

子孫セレクタ

子孫セレクタは、親子関係になっているHTMLタグの子要素に対してスタイルを適用します。具体例を紹介しましょう。

HTMLタグ

<div class="oya">
    <p>クラス名「oya」の子供タグ</p>
</div>

<p>子供タグではない</p>

CSS

.oya p { font-weight:bold; }

上記サンプルの場合、クラス名「oya」を親に持つpタグだけにスタイルが適用されます

子孫セレクタは親子関係が多層になっていても有効です。以下のように多層の構造を考えてみましょう。

HTMLタグ

<div class="dai">
    <div class="chu">
        <div class="sho">
            <p>子供タグ</p>
        </div>
    </div>
</div>

CSS例1

.dai .chu .sho p { font-weight:bold;  }

CSS例2

.dai .sho p { font-weight:bold;  }

CSS例3

.dai p { font-weight:bold;  }

CSS例1では、daichushoを親に持つpタグのみが対象となります。

CSS例2では、daishoを親に持つpタグが対象です。CSSセレクタ側は必ずしも構造と同じ順番で記述する必要はなく、CSS例2のようにchuを省くこともできます。

CSS例3では、daiを親に持つpタグが対象です。

CANIT先生
CANIT先生

このように子孫セレクタを使うと、複雑な構造のHTMLにも対応できます

牛山くん
牛山くん

最初に頃はあまり使わなさそうだけど、いざっていうときは便利かもしれませんね

子セレクタ

子セレクタは、直属の子供要素にだけスタイルを適用します。記述するときは、親要素と子要素を半角の大なり記号で繋ぎます。親子関係を持つHTMLに子セレクタを使う具体例を紹介しましょう。

HTMLタグ

<div class="seibutu">
    <div class="kaeru">
        <p class="otama">おたまじゃくし</p>
    </div>
    <div class="niwatori">
        <p class="hiyoko">ひよこ</p>
    </div>
</div>

CSS例1

seibutu > kaeru { color : red; }

CSS例2

seibutu > otama { color : green; }

CSS例3

niwatori > p { color : blue; }

CSS例1ではseibutu直属の子供であるkaeruにスタイルが適用されます。

CSS例2ではスタイルが適用されませんotamaseibutuの中に含まれますが、直属の子供ではないためです。上記のHTMLではotamaは孫になります。

CSS例3ではniwatoriの直属の子供であるpタグにだけスタイルが適用されます。

CANIT先生
CANIT先生

このように、子セレクタは直属の子供であるかがポイントになります。いっぽう、子孫セレクタは直属であるかを問いません。HTML構造によって子セレクタと子孫セレクタを使い分けます

牛山くん
牛山くん

なるほど。 ある一部分の範囲だけに適用できるんですね

隣接セレクタ

隣接セレクタは、隣接している直後の要素に対してスタイルを適用します。半角の+記号により要素名を繋いで記述する形です。隣接セレクタの使用タイミングを具体例で示しめすので、参考にしてください。

HTMLタグ

<img src="#" alt="">
<p>こんにちは、はじめまして。</p>

CSS

img p { margin-top : 15px; }

上記のように画像タグの直後に文章が続く場合は、通常よりも多くの余白を取りたかったり、逆に通常よりも余白を少なくしたいときがあります。そんな時に活躍するのが隣接セレクタです。

CANIT先生
CANIT先生

このように、画像直後のpタグにだけスタイルを適用できるので余白などを細かく調整できます。

牛山くん
牛山くん

ある特定の組み合わせの隣り合わせ同士で適用する場合はこちらですね

属性セレクタ

属性セレクタは、特定の属性を持つ要素に対してスタイルを適用します。属性セレクタの記述例を紹介しましょう。

HTMLタグ

<a href="#" title="link" class="zokusei" target="_blank">リンクボタン</a>

CSS例1

a[title] { font-size : 12px; }

CSS例2

a[class="zokusei"] { font-size : 14px; }

CSS例3

a { color : blue; }
a[target="_blank"] { color : red; }

属性セレクタは大括弧の間に条件を記載します。CSS例1はtitle属性を持つaタグを対象とします。

CSS例2は、classの値が”zokusei“と一致する要素にスタイルを適用します。また、HTML要素によってはクラス名を半角スペースで区切って複数指定することもあるので覚えておいてください。そのようなときは、属性セレクタ条件式の=の前に半角チルダをつけて~=と記述します。~=なら複数クラスの中のどれか1つに一致すればスタイルが適用されます。

CSS例3は実用的な例です。targetblankであるaタグ、すなわち外部リンクのみにスタイルを適用します。上記例では通常リンクを青色で、外部リンクを赤色で表示しています。

CANIT先生
CANIT先生

属性セレクタは、HTMLのある属性に対してのみ適用したいときに使うと便利ですよ

牛山くん
牛山くん

外部ウィンドウが開くリンク(target=”_blank”)だけに適用したいスタイルがあるときとか、ですね

猫田さん
猫田さん

(牛山くんが明らかに成長している…… これはやばい)

疑似クラス・疑似要素

最後に擬似クラスを解説します。擬似クラスは要素の状態を判断したり、HTMLとしては存在しない要素を生成するときに使います。

ここではわかりやすくするために、すべてaタグに対しての記述例を紹介します。

疑似クラスはaタグ以外に使うこともできます。

a:link{color:red;}

未訪問のリンクに対してスタイルを適用します。

a:visited{color:red;}

既に訪問済みのリンクに対してスタイルを適用します。

a:hover{color:red;}

マウスカーソルを乗せている間だけスタイルが適用されます。

a:active{color:red;}

クリックしている最中だけスタイルが適用されます。

a:focus{color:red;}

フォーカスしている間だけスタイルが適用されます。テキスト入力ボックスの入力中だけ色を変えたいときなどに使います。

a:lang(en){color:red}

HTMLタグにlangによる言語指定があるときに使用します。特定言語に対してスタイルを適用します。

.test a:first-child{color:red;}

クラス名「test」の要素内に登場する最初の子要素がaタグだった場合にスタイルを適用します。

.test a:first-of-type{color:red;}

クラス名「test」の要素内に登場する最初のaタグにスタイルを適用します。

a:last-child{color:red;}

クラス名「test」の要素内に登場する最後の子要素がaタグだった場合にスタイルを適用します。

.test a:last-of-type{color:red;}

クラス名「test」の要素内に登場する最後のaタグにスタイルを適用します。

.test a:nth-child(n){color:red;}

クラス名「test」の要素内に登場するn番目の子要素がaタグだった場合にスタイルを適用します。nには半角数字を入力します。数字の代わりにoddを記述すると奇数の要素、evenを記述すると偶数の要素が対象になります。

.test a:nth-of-type(n){color:red;}

クラス名「test」の要素内に登場するn番目のaタグにスタイルを適用します。nには半角数字を入力します。数字の代わりにoddを記述すると奇数の要素、evenを記述すると偶数の要素が対象になります。

p:first-line{color:red;}

指定要素の最初の1行目だけにスタイルを適用します。このセレクタはブロック要素にしか使えないためpタグを例にしています。pタグ内の文章をbrタグで改行している場合、1行目だけが赤い文字で表示されます。

p:first-letter{font-size:32px;}

指定要素の最初の1文字目にスタイルを適用します。このセレクタはブロック要素にしか使えないためpタグを例にしています。最初の文字だけを大きく表示するデザインに使えます。

a:before{content:”★”;}

指定要素の直前に新しい要素を追加します。この例であればaタグの先頭に★マークが表示されます。

a:after{content:”(リンク)”;}

指定要素の直後に新しい要素を追加します。この例であればaタグの末尾に(リンク)という文字が表示されます。

CANIT先生
CANIT先生

疑似クラスや疑似要素に関してはそこまで頻繁に出てくるわけではないのですが、リンク色やリスト(箇条書き)などをコントロールしたい場合などにそこそこ使うので覚えておいてくださいね

猫田さん
猫田さん

厳しいよー

牛山くん
牛山くん

でも、いずれはこのセレクタを使うときが来そうなので、僕は覚えますよー

猫田さん
猫田さん

仕方ない。 では、わたしも覚えるとしよう

CSSセレクタのチートシート

CSSセレクタのチートシート
CANIT先生
CANIT先生

では次にCSSセレクタのチートシートを解説していきます。

猫田さん
猫田さん

チートシート! よっ、待ってました!

牛山くん
牛山くん

よく使うセレクタのカンペみたいなものですよね

CANIT先生
CANIT先生

そうですね。よく使われるCSSセレクタとデザインの組み合わせを目的別にまとめているので実際にホームページを作るときに役立つはずです

リンクにデザインを適用する

HTMLタグ

<div><a href="#">もっと詳しく見る</a></div>
<div><a href="#" target="_blank">公式サイトをチェックする</a></div>

CSS

a { text-decoration:none; }//リンク文字の下線を消す
a:link { color: blue; }//未訪問のリンク色を青色
a:visited { color: gray; }//訪問済みのリンク色を灰色
a[target="_blank"]:after { content:"(別サイト)"; }//外部リンクの末尾に(別サイト)と表示
a:hover { text-decoration:underline; }//カーソルを乗せたときのみリンク下線を表示
a:active { color : orange; }//リンクのクリック時のみ色をオレンジ

テーブルにデザインを適用する

HTMLタグ

<table>
    <tr><th>商品1</th><th>商品2</th></tr>
    <tr><td>300円</td><td>400円</td></tr>
    <tr><td>5個</td><td>8個</td></tr>
</table>

CSS

table tr:nth-child(1){ background-color:gray; }//見出し行を灰色
table tr:nth-child(2){ color:red; }//価格の行を赤文字

入力フォームのセレクタ一覧

・テキストボックス→input[type="text"] {  }
・テキストエリア→textarea {  }
・チェックボックス→input[type="checkbox"] {  }
・チェックボックス選択時→input[type="checkbox"]:checked {  }
・ラジオボタン→input[type="radio"] {  }
・ラジオボタン選択時→input[type="radio"]:checked {  }
・セレクトボックス→select {  }
・送信ボタン→input[type="submit"] {  }
CANIT先生
CANIT先生

はい。ここまでがチートシートです

猫田さん
猫田さん

よっしゃー! これをチラチラ見れば、覚えなくても大丈夫だぞ

CANIT先生
CANIT先生

そうですね。最初はその方法でも大丈夫ですよ

猫田さん
猫田さん

一気に気持ちが楽になりました

CSSセレクタの基礎まとめ

CANIT先生
CANIT先生

はい。というわけで、今回はCSSのセレクタの種類とそれぞれの使い方を学びましたね。どうでしたか?

猫田さん
猫田さん

どうもこうも、牛山くんの成長ぶりに驚いています。 抜け駆けしようとしていて、ひどいなと思いました

CANIT先生
CANIT先生

そうですね。牛山くんは頑張っているのが、私にも伝わりましたよ

猫田さん
猫田さん

むぅ……

牛山くん
牛山くん

実はちょっと復習したんですよ

CSSセレクタをマスターすると、複雑なHTMLにもデザインを適用できるようになります

また、効率よくセレクタを指定することでコーディング時間の短縮にも繋がります。ここで紹介したセレクタはよく使うものばかりなので、ぜひ覚えてみてください。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました