【CSS】疑似要素::beforeや::afterを使って吹き出しを作ろう

【CSS】疑似要素について知ろうの記事で、疑似要素::beforeや::afterは、要素の直前・直後に疑似的に要素を追加することができるとご紹介しました。
この::beforeや::afterをうまく使えば、ワンランク上のデザインを作成することができます。
今回は、吹き出しを作成してみましょう。

吹き出しの作り方

吹き出しは、疑似要素を使えばHTMLはpタグだけで作成することができます。

pタグのスタイルのポイント

1. 疑似要素のpositionはabsoluteで配置するので、pタグをrelativeにしておく。
2. 吹き出しのしっぽ（三角形）を配置するための余白を空けておく。
3. display:inline-blockだと吹き出しの横幅は可変になります。
   display:block;にしてwidthプロパティで幅を指定すると、幅固定の吹き出しを作成することができます。

疑似要素のスタイルのポイント

1. 疑似要素はdisplay:block;でブロック要素にしておく。
   content: ”;で空文字を指定しておかなければ表示されないので注意
2. position:absolute;で場所を指定する。
   topとbottomを0にし、margin: auto 0;にすることで上下中央位置に表示されます。
   rightの値はpタグで開けた分の余白をマイナスで設定しておきましょう。

三角形を作るためのCSSは、自動生成できるツールを公開しているサイトなどを参考にすると、時短で作成することができます。

まとめ

今回、しっぽの部分は::beforeで作成しましたが、疑似要素はabsoluteで自由に配置できるため、::afterでも同様に作成可能です。
疑似要素を使えば、シンプルなHTMLのまま幅広いデザインを適用することができます。
ぜひ試してみてください。