【Q&A】擬似要素ってなんで使うの？？

こんにちは、@codeship_techです。

本日の質問がこちら。

擬似要素ってなんで使うの？？

ということで、擬似要素を使う理由についての質問ですね。
いろんな教材で擬似要素を使っているのは見たことあるけど、詳しく理由を知らない人が多いですよね。

それではこちらの質問に答えていきます。

みなさんは擬似要素を使ったことがあるでしょうか。
よく目にするのは::before、::afterかと思います。

そもそも、なぜ擬似要素を使用するか知っていますか？？

例えば文字に下線を引きたい場合、擬似要素を使って<div>のような箱を作ることで”線に見える箱”を作り出すことができます。

しかし、HTMLにて<div>を作ってしまえば色やサイズはCSSで変更できるため、同じことができてしまいます。

ポイント①

実は擬似要素を使わなくても、同じことは他の記述できる

ではなぜわざわざ擬似要素を使用するのか、それはこの２点です。

それぞれ解説をしていきましょう。

例えとして、文字に下線を引く場合を考えましょう。
ただし、下線は”線に見える箱”で作るとします。

HTMLに<div>を使うパターンと擬似要素を使うパターンで比べてみましょう。

HTML

<h2 class="sample">タイトル</h2>
<div class="line"></div>

CSS

.line{
    width: 30px;
    height: 2px;
    background-color:blue;
}

HTML

<h2 class="sample">タイトル</h2>

CSS

h2::after{
    content:'';
    display: block;
    width: 30px;
    height: 2px;
    background-color:blue;
}

①、②を比べてみると擬似要素を使った②の方がHTMLはすっきりしていますよね。
その代わり多少CSSは長くなりますが、HTMLは構造を表しているためシンプルで分かりやすく作るべきなので、HTMLをより簡潔に書くことが重要です。

webサイトを作るには、ただプログラミングを覚えるだけでは足りません。
他にもいろいろ付随した周辺知識を理解しなければ、良いものを作ることはできないでしょう。

その代表例がSEO(検索エンジン最適化)です。

簡単に言えば、検索した時に表示される順番のことです。
SEOが低いと、せっかく作成したwebサイトは2ページ目、3ページ目、、、と後ろに表示されてしまいます。一般的に２ページ目以降は見られないと思った方がいいです。

頑張って作ったのに調べても出てこないなんて嫌ですよね、、

そこで次のポイントを意識することが大事なんです。

ポイント②

HTMLの記述は無駄なものは省き、より簡潔に、より構造をわかりやすく書く

今回の例でみる場合、①でも説明したように、擬似要素を使うことでHTMLの記述は少なくなるため、影響を与えなくなり、より簡潔な記述で済ませることができます。

つまり、構造を複雑化するのを防ぐことができますよね。

注意

あくまで今回の話はSEO対策における、ほんの１部でしかないです！

なのである程度勉強した方はSEOに関する知識も深めことをおススメします。

本日は、擬似要素を使う理由について解説しました。