擬似要素とは?重要な役割と使い方・使いどころを画像付きで解説

::beforeや::afterを筆頭に、HTML&CSS初心者の躓きポイントである「擬似要素」。擬似要素を使えばコンテンツを挿入できるのは分かっていても、必然性が理解できないという人もいるのではないでしょうか。

そこで本記事では擬似要素の基本から、なぜ必要なのかまで深掘りして解説していきます。また主要な擬似要素の使い方も解説しているので、擬似要素についてなんとなく知っている人や、ほとんど知らない人にも役に立つ内容となっています。

擬似要素とは

擬似要素とは、要素の特定の部分に対してスタイルを適用するセレクタです。指定した要素内容の直前(または直後)にコンテンツを追加したり、コンテンツの一部(先頭の一文字など)だけにスタイルを適用させたりすることができます。使い方は、セレクタ直後に「::擬似要素名」を追加するだけです。

擬似要素で行えることの多くは、HTML側に記述することでも再現が可能なのではないかと思われるかもしれません。実際、それは事実です。しかし、装飾目的でHTMLに要素の追加をしすぎると、文書構造が複雑になってしまいますが、擬似要素を用いることで文書構造を変えることなく装飾が行えるようになるのです。

ただし、CSS側で擬似要素によってコンテンツの追加などを行っても、HTMLの一部とは認識されません。したがって、検索エンジンに認識してもらいたい重要なキーワードなどを擬似要素で追加するのは避けるべきです。擬似要素はあくまで装飾目的で使うようにしましょう。

よく使われる擬似要素

では、よく使われる擬似要素を確認していきましょう。なお、::first-letterと::first-lineの使いどころは限られますが、::beforeと::afterは幅広い使い方ができます。そのため、::beforeと::afterについては、どんな場面で使うと良いのかも解説します。

::firest-letter

::first-letterはその名の通り、要素内容の最初の1文字目にスタイルを適用するための擬似要素です。実際の使い方と、どのように表示されるのかを見てみましょう。

【HTML】

【CSS】

<p> に記述した最初の文字「擬」にスタイルを適用するため、CSSではセレクタっをp::first-leterと記述します。その中で文字色を変えたり、フォントサイズを変更したりしています。ではブラウザ上の表示を確認しましょう。

::first-line

::first-lineは要素内部の最初の行にスタイルを適用するための擬似要素です。::first-letterで作成したHTMLを用いて、CSSだけを::first-letterから::first-lineに変更しましょう。

【CSS】

これで先ほど「擬」に対してだけ適用したスタイルが、1行に適用されるようになります。ちなみに、画面サイズによって1行目の長さは変わり、スタイルが適用される文字も自動的に変わります。

::beforeと::after

::beforeと::afterはそれぞれ、指定した要素内容の前後にコンテンツを差し込むための擬似要素です。この2つは::first-letterや::first-lineとは少し違い、基本的にcontentプロパティと合わせて用いられます。

したがって、基本形は次の通りです。

通常はcontentプロパティには具体的な内容を書く必要がありますが、画像などを挿入する際は、contentプロパティの中身を空にして、別で新たなプロパティを用意します。

では、::beforeと::afterを使うとブラウザ上ではどのように表示されるのかを確認していきます。今回は、これまでHTMLで用いてきた文章の前後に、ダッシュを追加してみます。

【CSS】

contentプロパティに「——」を入れると、次のように表示されます。

また、コンテンツの直前(直後)に英文を入れるのに用いられることも多いです。なお、以下の例にある「Puseudo-elements」とは、擬似要素のことです。

【CSS】

記述内容を確認する前に、まずはブラウザ上の表示を見てみましょう。

ダッシュを挿入した前の例とは異なり、要素内容の上に乗っかっています。これは::beforeで追加する擬似要素を、displayプロパティでブロックレベル要素に変更したためです。

特にボックスタイプの変更が無い場合、ダッシュの例のように要素内容の前後にくっつくように表示されます。つまり::afterと::beforeを用いると、デフォルトでは次のようにコンテンツが追加されるのです。

<h1>[::beforeで追加したコンテンツ]コンテンツ[::afterで追加したコンテンツ]<h1>

さて、以上は比較的シンプルな::before/::afterの使い方ですが、これらはもっと複雑な使い方もできます。具体的には以下のようなことも実現可能です。

  • 文章を記号で囲む
  • 吹き出しを作る
  • アイコンを挿入する

アイデア次第で様々なデザインが実現できます。

まとめ

擬似要素を用いることで、シンプルな文書構造を保ったままでも幅広いデザインを実現することができます。::beforeや::afterを使いこなすのは経験が必要ですが、::first-letterや::first-lineはすぐにでも活用できるので、積極的に試してみましょう。

また::before/::afterも、HTML&CSSを極めようとすれば必須の知識です。他サイトなどで、これらを上手く活用したデザインを見つけたら、真似ながら徐々に使いこなせるようになりましょう。