CSSで吹き出しを作ろう！

Webサイトやブログでちょっとした会話風のデザインを作りたいときに便利なのが、CSSで作る「吹き出し」です。今回は、シンプルな吹き出しを作る方法を紹介します。角は丸く、三角の部分は::after擬似要素を使って、clip-pathでちょいと細工してみますよ。

まずは基本的な吹き出しのHTMLから。シンプルに<p>タグにクラスをつけただけです。

<p class="balloon">吹き出し</p>

さて、次はCSSでスタイリング。角を丸くするのはborder-radiusプロパティでやっちゃいましょう。三角部分は::after擬似要素を使って、clip-pathで三角形を作ってみます。

.balloon {
  position: relative; /* 擬似要素の位置を相対的に */
  display: inline-block; /* 文字のサイズに合わせる */
  margin: 20px; /* 周りの余白 */
  padding: 10px 15px; /* 内側の余白 */
  background-color: #f0f0f0; /* 吹き出しの背景色 */
  border-radius: 10px; /* 吹き出しの角を丸く */
}
 
.balloon::after {
 content: ''; /* 擬似要素を生成 */
 position: absolute; /* 絶対位置指定 */
 top: 100%; /* 吹き出しの下に配置 */
 left: 20px; /* 左から20pxの位置 */
 width: 10px; /* 三角形の横幅 */
 height: 10px; /* 三角形の縦幅 */
 background-color: #f0f0f0; /* 三角形の背景色 */
 clip-path: polygon(0 0, 100% 0, 50% 100%); /* clip-pathで三角形を作成 */
}

コード解説

.balloonのスタイル
吹き出しのメイン部分です。border-radiusで角を丸くし、paddingで内側の余白を確保しています。position: relativeを指定しているのは、次の::after擬似要素の位置を吹き出し内に相対的に配置するためです。
::after擬似要素
吹き出しの三角部分です。clip-pathプロパティを使って三角形を描いています。polygon(0 0, 100% 0, 50% 100%)の値で三角形の頂点を指定しています。