【CSS】吹き出しを作る

CSSで吹き出しを作る方法を紹介します。

キャラクター等の画像と組み合わせることによって会話風にしたり、目立たせたい箇所に使用するとちょっとしたアクセントになります。

サンプル

HTML

<div class="fukidashi">
  吹き出しのサンプルです。吹き出しのサンプルです。吹き出しのサンプルです。吹き出しのサンプルです。吹き出しのサンプルです。
</div>

CSS

/* 吹き出し本体 */
.fukidashi {
  position: relative;
  width: 500px;  /* 吹き出しの横幅 */
  padding: 16px;  /* 内側の余白 */
  background: #eee;  /* 吹き出しの色 */
  border-radius: 8px;  /* 角を丸くする*/
}
/* 吹き出しの出っ張り部分 */
.fukidashi::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0;  /* 出っ張りの横位置を中央にする */
  bottom: -10px;  /* 出っ張りの縦位置を調整 */
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 10px 10px 0 10px;  /* 出っ張り部分のサイズ */
  border-color: #eee transparent transparent transparent;  /* 出っ張り部分の色 */
}