m's blog

備忘録とかメモとか

【ブログ向け】CSSセレクタ入門【基本編】

【ブログ向け】CSSセレクタ入門【基本編】

今回は、「CSSセレクタ」 について解説していきたい思います。

主に、ブログでCSSデザインを導入する場合を想定 して、基本編・応用編の2回に分けて解説を進めて行きます。

今回は、基本編として、CSSセレクタについて簡単に解説した後、よく使う「基本のセレクタ」を紹介していきます。

※ ブログでCSSを使用する場合は、お使いのブログがCSSの使用に対応している必要があります。

目次

CSSセレクタとは?

「CSS」を使うと、HTMLの特定の要素を指定して、その要素のデザインをカスタムすることができます。

そのとき、どのHTML要素をカスタムするかを指定するために使用するのが「CSSセレクタ」 です。

今回は、このCSSセレクタの中でも、使用頻度の高いものや、ブログで使えそうなものを紹介 していきたいと思います。

カスタム対象のクラスやIDの確認方法

以下のページで、ブラウザを使って、HTML要素のクラス名やID名を確認する方法を紹介しています。

ブログ構成要素のクラス名などを確認したい場合は、上記のページを参考にしてください。

記事中で紹介するコードの表示確認方法【ブログ向け】

今回の記事の内容は、HTMLやCSSが使用可能なブログであれば、紹介するコードを投稿にコピペするだけで表示できるようになっています。

はてなブログの場合

例えば、はてなブログの場合であれば、「記事を書く」のプレビュー機能から記事中で紹介するコードの表示を確認できます。

見たまま(HTML編集)モード、HTMLモード、はてな記法の場合は、プレビュー(もしくはリアルタイムプレビュー)で確認することができます。

Markdownモードについては、他のモードよりも少し設定が面倒なので、「記事を書く」ページで一時的にMarkdown以外のモードを選択して表示の確認を行ってください。

CSSファイルから試す場合

CSSファイルを使用する場合、記事中で紹介するコードCSS部分は<style>タグの中身だけをコピーして試してください。

よく使う「基本のセレクタ」

要素の指定

HTML要素を指定することでカスタム対象としたいHTML要素を指定することができます。

実際の指定方法は以下のような感じです。

<div>要素の指定</div>

<style>
div {
    color: green;
}
</style>

div要素内の文字が緑色になるように指定しています。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【基本編】

ID名の指定

IDは#記号を使って指定します。

実際の指定方法は以下のような感じです。

<div id='any-id'>ID名の指定</div>

<style>
#any-id {
    color: green;
}
</style>

IDがany-idである要素の文字が緑色になるように指定しています。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【基本編】

クラス名の指定

クラス名は.記号を使って指定します。

実際の指定方法は以下のような感じです。

<div class='any-class'>クラス名の指定</div>

<style>
.any-class {
    color: green;
}
</style>

クラス名がany-classである要素の文字が緑色になるように指定しています。

表示は以下のような感じです。

【ブログ向け】CSSセレクタ入門【基本編】

要素名+クラス名で指定

要素とクラス名の両方を指定することもできます。

要素に続けてクラス名を指定する ことで、そのクラス名が含む要素にCSSが適用されます。

実際の指定方法は以下のような感じです。

<p class='any-class'>要素名+クラス名で指定</p>
<div class='any-class'>クラス名のみ一致</div>
<p>要素のみ一致</div>

<style>
p.any-class {
    color: green;
}
</style>

クラスany-classを含むp要素の文字色が緑色になるように指定しています。

表示は以下のような感じです。

【ブログ向け】CSSセレクタ入門【基本編】

要素名とクラス名の両方が一致する「要素名+クラス名で指定」の部分の文字だけが、緑色となります。

「クラス名のみ一致」と「要素のみ一致」の部分には、CSSは適用されません。

特定の複数クラスを持つ要素を指定

クラス名を続けて指定することで、複数クラスを持つ要素を指定することもできます。

実際の指定方法は以下のような感じです。

<div class='any-class-1 any-class-2'>特定の複数クラスを持つ要素を指定</div>
<div class='any-class-1'>一部のクラスのみ一致</div>

<style>
.any-class-1.any-class-2 {
    color: green;
}
</style>

クラスany-class-1とクラスany-class-2の両方を含む要素の文字色が、緑色となります。

表示は以下のような感じです。

【ブログ向け】CSSセレクタ入門【基本編】

両方のクラスを持つ「特定の複数クラスを持つ要素を指定」の部分の文字が緑色となります。

「一部のクラスのみ一致」の部分には、CSSは適用されません。

複数セレクタの指定

,記号を使って複数のセレクタを指定することができます。

実際の指定方法は以下のような感じです。

<div id="any-id">複数セレクタの指定 その1</div>
<div class="any-class">複数セレクタの指定 その2</div>
<div class="other-class">指定外の要素</div>

<style>
#any-id,.any-class {
    color: green;
}
</style>

ID名がany-idか、クラスにany-classを含む要素の文字が緑色になります。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【基本編】

IDがany-idである「複数セレクタの指定 その1」と、クラス名がany-classである「複数セレクタの指定 その2」の部分の文字が緑色となります。

どちらの指定にも当てはまらない「指定外の要素」の部分には、CSSは適用されません。

子孫セレクタの指定

半角スペースを使って、指定の親要素内の全ての子孫要素を指定することができます。

実際の指定方法は以下のような感じです。

<div class='parent'>
    <p>これは<span>子孫セレクタの指定</span>です</p>
</div>

<style>
.parent span {
    color: green;
}
</style>

parentクラスを持つ要素以下にある、すべてのspan要素の文字色が緑色となります。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【基本編】

上記の画像のように、対象となる「子孫セレクタの指定」の部分だけが緑色になります。

子セレクタの指定

先ほど紹介した、子孫セレクタでは、親セレクタ以下の要素がすべて対象となりますが、親セレクタの子要素だけを指定することも可能です。

>記号を使う事で子要素だけを指定することができます。

<ul>
    <li>こちらは<span>対象</span>です</li>
    <li><div>こちらは<span>非対象</span>です</div></li>
</ul>

<style>
li > span {
    color: green;
}
</style>

li要素の子要素の中で、span要素の文字色が緑となるように指定しています。

表示は以下のような感じになります。

【ブログ向け】CSSセレクタ入門【基本編】

上記画像のように、指定の対象となる「対象」の部分が緑色となります。

「非対象」の部分のspan要素は、li要素の"子孫要素"ではありますが、ここで指定した"子要素"ではないため、CSSは適用されていません。

まとめ

今回は、CSSセレクタの中でも、よく使う「基本のセレクタ」について解説してみました。

本ブログでも、CSSに関する記事を複数投稿しています。

大部分の記事は、今回の「基本編」の範囲で試せる内容となっているので、ぜひ一度見てみてください。

次回は、より詳細なカスタマイズのための「応用セレクタ」を紹介したいと思います。