改めて、CSS疑似要素というテクニック

2024/09/18

エンジニアインターン

本日はCSSで使う"疑似要素"について、よく使う方法をいくつかまとめておきたいと思います。

そもそもCSSはHTMLの要素に対して装飾を行います。例えば、

<div class="hello">こんにちは</div>

という要素があったら、CSSではhelloというクラスの装飾を行います。

つまり「こんにちは」という文字のフォントや大きさ、色、背景色、位置などを調整するわけです。

さて、本題ですが、疑似要素とは、「HTMLの実態はないけれども装飾だけする」ときの仮想的な要素のことです。

HTMLはタグ付きの文章なので、簡単に言うと「文字はないけど、装飾したい！」というときに使います。

これはあるパーツの一部ですが、「企画・設計」（これのクラスをarrowとしましょう）の背景が矢印のようになるように、文字の背景の矩形の右に三角形をくっつけています。

でもこの三角形にHTMLの実体はないですよね（空のdivタグなどをつけてもいいですが）。

ここで登場するのがCSSの疑似要素です。arrowクラスの後につけるのでarrouw-afterいうクラスの疑似的な要素としてスタイルを設定できます。

ほかにも吹き出しの口の部分や、項目を表すちょっとした図形など、文字が入っていない様々な図形を疑似要素で表すことができます。

吹き出しは、セリフの要素に輪郭をつけて、輪郭と同じ形の三角形と、背景と同じ色の三角形を配置することにより実現できます。

これがCSSで一番めんどくさいんじゃないかな、と思っているので、もっとスラスラ書けるようにしていきたいな、と思います。

それでは！

参考サイト：