クリエイターブログ

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

2020.09.03 Posted by

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

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

吹き出しの作り方

 

SAMPLE

吹き出しをつくりました。

 

吹き出しは、疑似要素を使えば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のまま幅広いデザインを適用することができます。
ぜひ試してみてください。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

CONTACT

お電話でのお問い合わせ

03-5366-3277

受付時間:平日9:30〜18:30

メールフォームからのお問い合わせ

お問い合わせ(東京本社)

PAGETOP

Document資料請求

Contactお問い合わせ