擬似要素のメリットとは何か？

Question

擬似要素について確認させてください。CSSで使う、:beforeや:afterの擬似要素ですが、いまいち、そのメリットを感じられれずにいます。決定的に使える場面とはどのような場面なのでしょうか？

• 要素の前後に文字が入れられる =>　初めからhmtlに含めればいいのでは、と感じてしまいます。
• 要素の前後にアイコンが入れられる =>　初めからhmtlに含めればいいのでは、と感じてしまいます。

私の理解では、例えば、吹き出しを作ったりといったデザイン上での操作くらいしか、メリットが思い当たりません。h1タグをそのままに、それ以上にアイキャッチな文字を擬似要素で作れる、といったアイデアもありましたが、これもhtml上で、実現できるのではないかと感じています。

擬似要素のメリットを感じれるような、使用用途を教えていただければ幸いです。

Answer 1

初めからhmtlに含めればいいのでは、

HTMLに新たに要素を追加しても問題がないのであれば、それでも構わないと思います。

質問者さんは「要素を新たに書き加えるよりも面倒だ」という理由で、擬似要素での装飾が必要か疑問に感じているようですが、擬似要素の強みはHTMLの文書構造を一切編集せずに、見かけ上の要素を挿入したり、特定の要素のある部分だけを装飾できることにあります。例えば、「HTMLを編集して、新たに要素を追加しても意味的には変わらないが、HTMLを編集しないほうが文書構造をより明確に表現できる」というような場合に、擬似要素を使い文書構造を変化させずにデザインだけを変えることができます。

Comments

[s8_chu]

終わっていた。

[YousukeTanaka]

ご回答ありがとうございます。この説明は、非常にスッキリしました。文書構造を大幅に変えたくない場合は確かにあり、その場合には確かに便利だと感じました。本当に感謝しています。

Answer 2

よく使われるものとして、clearFixがあります。CSS上の理由だけでHTMLに要素を出現させなくても、疑似要素でclear: bothを行うことができます。

ほかには、<q>要素の前後に入る引用符も、ブラウザスタイルシートで:after、:beforeに当ててあります（参考）。

Comments

[YousukeTanaka]

ご回答ありがとうございます。確かに、clearfixは、私もhtml内で多用したいとは思えず、納得しました。ありがとうございました。

Answer 3

①HTMLが煩雑にならない
②擬似要素で挿入した文字は検索エンジンにインデックスされないので、SEOを気にせず自由な表現ができる

Comments

[YousukeTanaka]

ご回答ありがとうございます。①②は、調べるとよく言われていることなのですが、特に②について具体的なイメージがわきません。SEOを気にしない表現であっても、html内での記述とそれほど変わらないのではと感じているのですが、具体的などのような表現がそれに当たるのでしょうか？お手数をおかけしますが、教えていただけると幸いです。

[Atsukyyy]

例えば、「擬似要素」という検索結果で上位表示させたいページがあったとして、html内に「擬似要素」に関係のないキーワードを入れすぎるとSEO的にまずくなります。
少し極端な例ですが、以下の例だと②の方が「擬似要素」というキーワードが強調されます。
①ページ全体のキーワードが500個で、「擬似要素」というキーワードが10個含まれている
②ページ全体のキーワードが100個で、「擬似要素」というキーワードが10個含まれている

私もSEOに関してはそれほど詳しくないため、少しわかりづらい回答になってしまいましたがいかがでしょうか。

[YousukeTanaka]

これは、腑に落ちました。つまり、余計な用語、キーワードの強調を妨げたりするような用語などは避け、できるだけ、内容(主張)に忠実なサイト構成を目指した方が良く、そこから逸脱する用語などをどう表示させるかについて、擬似要素が選択としてある、ということだと理解しました。ありがとうございました。