プログラミング

疑似要素・疑似クラスを使って特定部分や状態変化のスタイリングをしよう!

疑似要素・疑似クラスを使って特定部分や状態変化のスタイリングをしよう!

 

CSSはセレクターで要素を指定すると、その要素に対してスタイルを付けることができます。

【CSSの基本的なセレクター】

  • 要素型セレクター
  • クラスセレクター
  • IDセレクター
  • 属性セレクター
  • 全称セレクター
【CSS】セレクタの書き方や応用的な使い方まとめ
【CSS】セレクターの書き方や詳細度をまとめます!Web制作はHTMLで画面に表示される部分、CSSで表示部分のデザインを作っていきます。 CSSのセレクターはHTMLで書かれた要...

 

上記5つの基本的なセレクターの他に、セレクターに付加をしてスタイリングする疑似要素と疑似クラスがあります。

 

この記事について

・疑似要素と疑似クラスの書き方がわかる

・カスタムデータ属性の書き方がわかる

・どんな時に使えばいいのかがわかる

よると
よると
CSSの特殊なスタイリングができる「疑似要素と疑似クラス」についてまとめます。

CSS疑似要素の使い方

 

CSSの擬似要素は、ある要素の特定部分をスタイリングするときに使います。

使い方は、疑似要素の先頭にコロンを2つ(::)付けます。

疑似要素を説明するために、::before疑似要素 と ::after疑似要素を使った例を挙げます。

::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で装飾)

疑似要素を使わずに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 –

設計

よると
よると
spanは装飾用のタグですが、スタイル付けはCSSに書く方が良いとされています。

 

疑似要素を使ってスタイリングをする

疑似要素を使った場合の書き方(CSSで装飾)

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プロパティを増やさなければいけないので、編集が大変です。

 

カスタムデータ属性を使ってスタイリングをする

カスタムデータ属性を使った場合の書き方

先程の書き方だと、見出しが増えるたびにcontentプロパティを追加していくことになるため、HTMLが見ずらくなって書くのが大変です。

解決策としては、スタイル付けしたい要素に情報を持たせ装飾することで、contentプロパティを書く量も減ってHTMLの見た目が良くなります。

要素に情報を持たせるにはカスタムデータ属性を使います。

 

【カスタムデータ属性の書き方】

1.スタイル付けしたい要素の後ろに「data- (独自の属性)」を付ける。

(※独自の属性は好きな名前が付けられる)

2.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擬似クラス

: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;          /* 不透明度*/
}

 

【表示のされ方】

CSSのhover疑似クラスを使う

corsorプロパティの値一覧は「こちら」から確認できます。

 

:nth-child() 擬似クラス

: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() 擬似クラスについて

: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 擬似クラスについて

:empty 擬似クラスを使うと、空の要素を選択することができます。

 

例題

リスト項目の中にある空要素のスタイルを変える。

【HTML】

<body>
 <ul>
  <li>項目</li>
  <li></li>          <!-- ここの空要素にスタイルを適用させる -->
  <li>項目</li>
  <li>項目</li>
 </ul>
</body>

 

【CSS】

li:empty {               /* リストの中にある空要素の指定*/
 background: pink;
}

 

【表示のされ方】

・項目
  
・項目
・項目

コメント空の要素とみなされて、半角空白改行があると空の要素にならない

 

:not() 擬似クラス

:not() 擬似クラスについて

:not() 擬似クラスは、空要素ではない特定の項目を選択することができます。

 

例題

空要素以外の項目のスタイルを変える。

【HTML】

<body>
 <ul>
  <li>項目</li>
  <li></li>          <!-- ここ以外の項目のスタイルを変える -->
  <li>項目</li>
  <li>項目</li>
 </ul>
</body>

 

【CSS】

li:not(:empty) {               /* 空の要素以外を指定*/
 background: pink;
}

 

【表示のされ方】

項目
項目

項目

 

疑似要素&疑似クラス【まとめ】

疑似要素&疑似クラス【まとめ】
– 疑似要素&疑似クラスまとめ –

・疑似要素は先頭に2つコロンを付けることで、ある要素の特定部分をスタイリングできる。

・疑似クラスは先頭に1つコロンを付けることで、ある要素に対し特定状態を指定してスタイリングできる。

 

よると
よると
疑似要素・疑似クラスどちらも要素セレクターに付加をしてスタイリングすることができます。

状況に応じて使っていきましょう!