CSSはセレクターで要素を指定すると、その要素に対してスタイルを付けることができます。
【CSSの基本的なセレクター】
- 要素型セレクター
- クラスセレクター
- IDセレクター
- 属性セレクター
- 全称セレクター
上記５つの基本的なセレクターの他に、セレクターに付加をしてスタイリングする疑似要素と疑似クラスがあります。
この記事について
・疑似要素と疑似クラスの書き方がわかる
・カスタムデータ属性の書き方がわかる
・どんな時に使えばいいのかがわかる
CSS疑似要素の使い方
CSSの擬似要素は、ある要素の特定部分をスタイリングするときに使います。
使い方は、疑似要素の先頭にコロンを2つ(::)付けます。
疑似要素を説明するために、::before疑似要素 と ::after疑似要素を使った例を挙げます。
::before疑似要素と::after疑似要素
疑似要素の中でよくに使われるのが、要素の前後に情報を追加することができる::before疑似要素と::after疑似要素です。
・「::before」：要素の先頭にコンテンツを追加する。
・「::after」 ：要素の後ろにコンテンツを追加する。
どちらも contentプロパティとセットで使い、追加したい内容を値に書きます。
contentプロパティの値一覧はこちらから確認できます。
h1とh2の見出しの前後に内容を追加させる。
【HTML】
<body>
<h1>見出し1</h1>
<p>疑似要素を使う。</p>
<h2>見出し2</h2>
<p>見出しに内容が追加される。</p>
</body>
【CSS】
h1::before,
h2::before {
content: "≪"; /* ここの値に追加させたい内容を書く */
color: red;
}
h1::after,
h2::after {
content: "≫"; /* ここの値に追加させたい内容を書く */
color: red;
}
【表示のされ方】
≪見出し1≫
疑似要素を使う。
≪見出し2≫
見出しに内容が追加される。
その他の疑似要素一覧はこちらから確認できます。
疑似要素とカスタムデータ属性を使いスタイリングする
疑似要素を使っていると、content属性の値を要素によって変えたいときがあります。
その場合は、HTML要素にデータを持たせるカスタムデータ属性を使うことで解決します。
たとえばh1要素が複数あったとき、それぞれ異なるスタイリングがしたかった場合などでカスタムデータ属性が役立ちます。
spanを使ってスタイリングをする
疑似要素を使わずにHTMLで装飾したい場合、spanやstyleを使うとスタイル付することができます。
spanタグを使い、見出しの後ろにそれぞれ装飾を付ける。
【HTML】
<section>
<h1>アート<span>- art -</span></h1>
<p>芸術</p>
</section>
<section>
<h1>イラスト<span>- illustration -</span></h1>
<p>絵</p>
</section>
<section>
<h1>デザイン<span>- design -</span></h1>
<p>設計</p>
</section>
【CSS】
h1 > span {
color: #ccc;
}
【表示のされ方】
アート– art –
芸術
イラスト– illustration –
絵
デザイン– design –
設計
疑似要素を使ってスタイリングをする
CSSで要素に内容を追加したい場合は疑似要素を使います。
たとえばクラス属性をそれぞれの要素に付けて装飾すると、先程spanを使ったやり方と同じ表示結果になります。
疑似要素を使い、見出しの後ろにそれぞれ装飾を付ける。
【HTML】
・それぞれのh1要素にclass属性を付ける。
<section>
<h1 class="art">アート</h1>
<p>芸術</p>
</section>
<section>
<h1 class="illustration">イラスト</h1>
<p>絵</p>
</section>
<section>
<h1 class="design">デザイン</h1>
<p>設計</p>
</section>
【CSS】
・class属性で付けた値と疑似要素を使い、contentプロパティの値に挿入して表示させる。
h1::after { /* ここに全体のスタイルを変える情報を書く。*/
color: #ccc;
}
.art::after {
content: '- art -';
}
.illustration::after {
content: '- illustration -';
}
.design::after {
content: '- design -';
}
【表示のされ方】
アート– art –
芸術
イラスト– illustration –
絵
デザイン– design –
設計
カスタムデータ属性を使ってスタイリングをする
先程の書き方だと、見出しが増えるたびにcontentプロパティを追加していくことになるため、HTMLが見ずらくなって書くのが大変です。
解決策としては、スタイル付けしたい要素に情報を持たせ装飾することで、contentプロパティを書く量も減ってHTMLの見た目が良くなります。
要素に情報を持たせるにはカスタムデータ属性を使います。
【カスタムデータ属性の書き方】
１．スタイル付けしたい要素の後ろに「data- (独自の属性)」を付ける。
(※独自の属性は好きな名前が付けられる)
２．CSSでcontentプロパティの値にattr()関数を使って、()内に自分で付けた独自属性名を書く。
【HTML】
<section>
<h1 data-subtitle="- art -">アート</h1>
<p>芸術</p>
</section>
<section>
<h1 data-subtitle="- illustration -">イラスト</h1>
<p>絵</p>
</section>
<section>
<h1 data-subtitle="- design -">デザイン</h1>
<p>設計</p>
</section>
【CSS】
h1::after {
color: #ccc;
content: attr(data-subtitle);
}
【表示のされ方】
アート– art –
芸術
イラスト– illustration –
絵
デザイン– design –
設計
CSSの疑似クラス
CSSの疑似クラスは、ある要素に対して特定の状態を指定することができます。
使い方は、疑似クラスの先頭にコロン(:)を付けます。
・マウスカーソルを合わせた時の状態を変える 「:hover」
・同じ階層にある同じ要素の順番を選択する「:nth-child()」
・同じ階層にある違う種類の要素を選択する「:nth-of-type()」
・空の要素を選択する「:empty」
・空の要素ではない項目を選択する「:not() 」
:hover擬似クラス
:hover疑似クラスは、リンクやボタンにマウスカーソルを合わせた時のスタイルを変えることができます。
ダウンロードボタンにカーソルを合わせると、ボタンが少し透明になるようにする。
【HTML】
<div class="btn">ダウンロードボタン</div>
【CSS】
.btn { /* ボタンの見た目設定*/
width: 200px; /* 幅*/
background: orange; /* 背景色*/
text-align: center; /* 文字を中央*/
padding: 4px; /* 余白*/
color: white; /* 文字色*/
cursor: pointer; /* カーソルプロパティで指の形にする*/
}
.btn:hover{ /* 疑似クラス*/
opacity: 0.7; /* 不透明度*/
}
【表示のされ方】
corsorプロパティの値一覧は「こちら」から確認できます。
:nth-child() 擬似クラス
:nth-child()擬似クラスは、同じ階層にある要素の順番を選択することができます。
()内の値を変えることで、スタイルを付けるパターンを変えます。
| (数字) | (2)とすると、2番目にスタイルを付けることができる。 |
| (数字 + n) | (3+n)とすると、3の倍数ごとにスタイルを付けることができる。 |
| (odd) | 奇数番目の要素に、スタイルを付けることができる。 |
| (even) | 偶数番目の要素に、スタイルを付けることができる。 |
mainタグの中にあるp要素へ交互に背景色を付ける。
【HTML】
<body>
<main>
<p>テスト1</p>
<p>テスト2</p>
<p>テスト3</p>
<p>テスト4</p>
<p>テスト5</p>
<p>テスト6</p>
</main>
</body>
【CSS】
main > :nth-child(odd) { /* 奇数に色を付ける*/
background: skyblue;
}
main > :nth-child(even) { /* 偶数に色を付ける*/
background: pink;
}
【表示のされ方】
テスト1
テスト2
テスト3
テスト4
テスト5
テスト6
:nth-of-type() 擬似クラス
:nth-of-type()擬似クラスは、同じ階層にある指定した要素のみから順番を選択することができます。
()内の値を変えることで、スタイルを付けるパターンを変えます。
| (数字) | (2)とすると、2番目にスタイルを付けることができる。 |
| (数字 + n) | (3+n)とすると、3の倍数ごとにスタイルを付けることができる。 |
| (odd) | 奇数番目の要素に、スタイルを付けることができる。 |
| (even) | 偶数番目の要素に、スタイルを付けることができる。 |
mainタグの中にあるh2の2番目にスタイルを付ける。
【HTML】
<body>
<main>
<h1>見出し1</h1>
<p>テスト1</p>
<h2>見出し2</h2>
<p>テスト2</p>
<h2>見出し2</h2> <!--このh2にスタイルを付ける-->
<p>テスト2</p>
<h2>見出し2</h2>
<p>テスト2</p>
</main>
</body>
【CSS】
main > h2:nth-of-type(2) { /* 2番目のh2を指定*/
background:pink;
}
【表示のされ方】
見出し1
テスト1
見出し2
テスト2
見出し2
テスト2
見出し2
テスト2
:empty 擬似クラス
:empty 擬似クラスを使うと、空の要素を選択することができます。
リスト項目の中にある空要素のスタイルを変える。
【HTML】
<body>
<ul>
<li>項目</li>
<li></li> <!-- ここの空要素にスタイルを適用させる -->
<li>項目</li>
<li>項目</li>
</ul>
</body>
【CSS】
li:empty { /* リストの中にある空要素の指定*/
background: pink;
}
【表示のされ方】
・項目
・
・項目
・項目
・コメントは空の要素とみなされて、半角空白や改行があると空の要素にならない。
:not() 擬似クラス
:not() 擬似クラスは、空要素ではない特定の項目を選択することができます。
空要素以外の項目のスタイルを変える。
【HTML】
<body>
<ul>
<li>項目</li>
<li></li> <!-- ここ以外の項目のスタイルを変える -->
<li>項目</li>
<li>項目</li>
</ul>
</body>
【CSS】
li:not(:empty) { /* 空の要素以外を指定*/
background: pink;
}
【表示のされ方】
・項目
・項目
・
・項目
疑似要素&疑似クラス【まとめ】
・疑似要素は先頭に２つコロンを付けることで、ある要素の特定部分をスタイリングできる。
・疑似クラスは先頭に１つコロンを付けることで、ある要素に対し特定状態を指定してスタイリングできる。
状況に応じて使っていきましょう！
