August 12.2020

【擬似要素の意味と使い方】擬似要素を活用して不要なソースコードを断捨離しよう!

擬似要素

こんにちは、Webデザイナー兼フロントエンドエンジニアの薮口です。

みなさん擬似要素は使われていますか?

擬似要素を上手く使用すると、HTMLなどの不要なソースコードを大幅に減らすことが出来ます。

今回は擬似要素を活用して、Webサイトでよく見るオブジェクトのソースコードを断捨離していきたいと思います。

1. そもそも擬似要素とは

擬似要素とは、HTMLの要素の一部に擬似的にスタイルを与えるためのものです。

つまり、HTMLに余計なソースコードを書かなくとも見た目の装飾が可能になるため、ソースコードが無駄に散らかってしまうことが無くなります。

以下の4つが代表的な擬似要素で、それぞれ用途が異なります。

::first-letter要素の最初の1文字にスタイルを適用します。1文字目のみ文字色を変更したり、フォントサイズを大きくしたりしたい場合などに使用されます。

::first-line … first-letterとは異なり、要素の1行目にスタイルを適用します。1行目のみ文字色を変更したり、下線を引いたりしたい場合などに使用されます。

::before 要素の直前に擬似的なコンテンツが追加されます。タイトルの前にアイコンを追加したり、画像を挿入したりと使い道は無限大です。

::after … beforeとは異なり要素の直後に擬似的なコンテンツが追加されます。こちらも使い道は無限大です。(beforeとセットで使われる場合が多いです。)

今回はこの4つの中でも特に使用頻度の高い、beforeとafterを用いたテクニックなどを説明したいと思います。

2.擬似要素の使い方

beforeとafterを使用する際には、contentというプロパティを指定する必要があります。
 

See the Pen
before01
by Yuki Yabuguchi (@ozlink-yabuguchi)
on CodePen.

こちらのpタグには「お寿司」というテキストしか存在しないのですが、contentプロパティに「エビの」というテキストを指定しているため、最終的には「エビのお寿司」というテキストが表示されています(美味しそうですね)。
 

See the Pen
before02
by Yuki Yabuguchi (@ozlink-yabuguchi)
on CodePen.

afterも指定することで要素の直後にテキストを挿入することもできます。

また、例のように擬似要素のみ文字色を変えるなど、スタイルの指定が可能です。

他にもcontent= url(‘画像ファイルへのパス’)と指定し画像を表示させたり、content= “”と空にした状態で擬似要素を作成し、任意の見た目に変更したりすることができます。

3. 矢印付きボタンのソースコードを断捨離する

ここからはWebサイトでよく見るオブジェクトのソースコードを断捨離していきたいと思います。
 

See the Pen
btn01
by Yuki Yabuguchi (@ozlink-yabuguchi)
on CodePen.

矢印を用いたスタンダードな形のボタンです。

擬似要素を使用せずにコーディングすると、空のspanタグが2つも必要となり散らかった印象を受けますね(矢印を画像で表示した場合でもimgタグが必要となります)。
 

See the Pen
btn02
by Yuki Yabuguchi (@ozlink-yabuguchi)
on CodePen.

こちらが擬似要素を用いて断捨離したコードです。

先ほどの例とは違い最小限のコードで完結しており、ミニマリストのお部屋のようです。

4. 左右に水平線を引いた見出しのソースコードを断捨離する

続いてはこちらの見出しのソースコードを断捨離していきます。
 

See the Pen
ttl01
by Yuki Yabuguchi (@ozlink-yabuguchi)
on CodePen.

左右に水平線を引いたよくある形の見出しなのですが、水平線それぞれに空のspanタグを用意しているため、とても散らかった印象を受けます。
 

See the Pen
ttl02
by Yuki Yabuguchi (@ozlink-yabuguchi)
on CodePen.

こちらも擬似要素を使用することで、こんなにもソースコードがすっきりします!

テレビで観る芸能人の生活感のない部屋のようです。

5. 擬似要素でソースコードの断捨離を!

このように擬似要素を活用すると、不要なソースコードをここまで断捨離することができます。

今回は比較的シンプルなオブジェクトを例に説明させていただきましたが、擬似要素を活用することで以下のような複雑なオブジェクトもdivタグ1つで作成出来てしまいます。
 

See the Pen
sushi01
by Yuki Yabuguchi (@ozlink-yabuguchi)
on CodePen.

皆さんも擬似要素を活用して、ご自身のソースコードを断捨離してみてはいかがでしょうか。

では、よい擬似要素ライフを!