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

こんにちは、@codeship_techです。

本日の質問がこちら。

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

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

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


HTMLの記述をスッキリさせSEOに影響を与えにくいからです

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

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

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

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

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

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

  • HTMLの記述をコンパクトにできる
  • SEOに影響を与えにくい

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

HTMLの記述をコンパクトにできる

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

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

①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をより簡潔に書くことが重要です。

SEOに影響を与えにくい

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

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

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

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

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

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

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

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

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

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

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


授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。