疑似要素って必要なの?疑似要素に関する誤解と使い方を詳しく解説

CSSで凝ったデザインのボタンや、ふきだしの作り方を検索すると必ずといって良いほど登場する疑似要素。

::afterとか::beforeとか、ややこしくて嫌い!

だとか

使いかたが良くわかっていないから、いつもネットに落ちているコードをコピペしている

といった方も多いのではないかと思います

この記事はそんな、プログラミング初心者のためにぜひ読んでもらいたい記事になっています!

この記事の目次
  1. 疑似要素って何?
  2. 疑似要素を使う必要はない!疑似要素を使わずにふきだしを作ろう
  3. じゃあ何のために疑似要素を使うの?

疑似要素って何?

疑似要素とは::afterや::beforeなど、CSSに記述することのできるHTMLの要素もどきです。

HTMLの要素の代替品なので、もちろん疑似要素を使った表現はHTMLで書きかえることができます。

なので疑似要素がよくわからないという人は無理に使う必要なんて無いわけですね。

疑似要素を使う必要はない!疑似要素を使わずにふきだしを作ろう

上でも説明しましたが、疑似要素というものはHTMLの要素の出来損ないのようなものなのでHTMLの要素で書きかえることができます

たとえば、こんな疑似要素を使ったふきだしをよく見かけますよね?

See the Pen ふきだし疑似要素あり by ichi@ブログはじめました (@necorobi_ichi) on CodePen.

 

それをこんな風に書きかえることができます。

See the Pen ふきだし疑似要素無し by ichi@ブログはじめました (@necorobi_ichi) on CodePen.

 

::afterは後ろに要素を付け加えるものなので、子要素にdivを追加してあげて、CSSでスタイリングしてあげれば全く同じものが作れます。

 

じゃあ何のために疑似要素を使うの?

 

HTMLで表現できるのになんでわざわざCSSで表現するのかというといくつか理由があります。

 

理由その1-装飾のためだけにHTMLをいじらずに済む

 

もし疑似要素を使わずにボタンなどの装飾をしようとすると

空の要素を作り・・・クラスを設定して・・・。と、とんでもなく面倒です!

一箇所だけならたいした手間ではないのですが、そんなことめったに無いですよね?

 

なのでCSSに書き加えるだけで済む疑似要素はとても便利なものなのです。Sassが便利な理由とすこし似ていますよね。

 

また。HTMLを汚さずに済むので、見た目もすっきりして見やすくなるのも良いですね

 

理由その2-SEO対策

 

検索エンジンはCSSである疑似要素をコンテンツとしてみなしませんので、SEOを気にせずに自由な表現をすることができます。

このあたりの話は初心者の方には難しいかもしれませんが、作った人が見て欲しい部分と検索エンジンが大事だと思うことがずれることが無くなると思ってくれれば大丈夫です!

 

まとめ

 

今回は疑似要素の表現について解説しました。

SNSを見ていると、疑似要素でしかボタンの装飾ができないと勘違いしている人が多いみたいだったので記事にしてみました。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です