CSS で吹き出しを作る方法

CSS で吹き出しを作る方法を紹介します。
例えば、画像を使わずに吹き出しを作りたいときに便利な方法です。

1. CSS で吹き出しを作る方法
   1. 吹き出しに影をつける方法

CSS で吹き出しを作る方法

CSS だけで吹き出しを作る場合は、CSS セレクタの擬似要素 ::before や ::after を使用します。
例えば、シンプルな長方形の吹き出しを作る場合の方法を紹介します。実際の見た目は次の通りです。

ベースの HTML は次の通りです。

<div class="fukidashi">吹き出し</div>

CSS はこちら。

.fukidashi {

  position: relative;

  width: 240px;

  margin: 0 auto;

  padding: 15px;

  font-size: 16px;

  line-height: 1.3;

  text-align: center;

  letter-spacing: 0.05em;

  background-color: #fff;

  border-radius: 8px;

}

.fukidashi::before {

  content: "";

  position: absolute;

  bottom: -30px;

  left: 50%;

  width: 0;

  height: 0;

  margin-left: -15px;

  border: 15px solid transparent;

  border-top-color: #fff;

}

吹き出しの三角形は、擬似要素にボーダーを使った三角形を使って表現します。
三角形の詳しい作り方はCSS で三角形を作る方法をご覧ください。

吹き出しに影をつける方法

影をつける場合は CSS セレクタの box-shadow を使うのが一般的ですが、これだと擬似要素を含めて影をつけることができません。
擬似要素を含めて影をつけたい場合は filter:drop-shadow を使います。
影をつける場合は先に紹介した CSS に次のコードを追加します。

.fukidashi {

  -webkit-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));

  -moz-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));

  -ms-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));

  filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));

}

まとめ

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