画像を使わずにCSSだけで吹き出しを作る方法(上下左右の4パターン)

ウェブデザインで吹き出しのようなデザインって使い勝手が良いんですよね。

画像を使わずにCSSだけで簡単に実装できるからよく使われてるんだと思われます。

というわけで、CSSだけで簡単に作れる吹き出しの作り方をソースコード付きでご紹介します。コピペして使ってください。

画像を使わずにCSSだけで吹き出しを作る方法

まずはHTMLの記述から。

<div class="balloon">
  <p>テキストが入ります</p>
</div>

HTMLの記述例として上記のようにしました。pタグをdivタグで囲う二重構造にしてますが、二重にする必要は必ずしもありません。

h2タグに吹き出しを付けたりする場合もありますし、下記のような形でも良いです。

<h2 class="balloon">見出し</h2>

では肝心のCSSを紹介しますね。まずソースコードを紹介しますので、そのあとの解説と合わせてごらんください。

左側の吹き出し

.balloon {
  background-color: #fff;
  padding: 20px;
  position: relative;
}
.balloon:after {
  border-right: 12px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  content: '';
  margin-top: -10px;
  position: absolute;
  left: -12px;
  top: 50%;
}

右側の吹き出し

.balloon {
  background-color: #fff;
  padding: 20px;
  position: relative;
}
.balloon:after {
  border-left: 12px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  content: '';
  margin-top: -10px;
  position: absolute;
  right: -12px;
  top: 50%;
}

上側の吹き出し

.balloon {
  background-color: #fff;
  padding: 20px;
  position: relative;
}
.balloon:after {
  border-bottom: 12px solid #fff;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  margin-left: -10px;
  position: absolute;
  top: -12px;
  left: 50%;
}

下側の吹き出し

.balloon {
  background-color: #fff;
  padding: 20px;
  position: relative;
}
.balloon:after {
  border-top: 12px solid #fff;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  margin-left: -10px;
  position: absolute;
  bottom: -12px;
  left: 50%;
}

吹き出しのざっくり解説

まず「border-なんちゃら」は吹き出しを向けたい方向以外の3方向に設定します。ここで設定したボーダーの太さが三角形の大きさになります。

content: '';は決まり事というか、これがあるから吹き出しを形として表現することができます。

あとはpositionとmarginで位置調整をします。

まず吹き出しの方向にborderで設定した数字と同じ大きさの数字でマイナス方向に移動させます。これで三角形が飛び出してきます。

最後に吹き出しの位置調整のためにpositionで50％の位置に置きつつ同じ方向にマイナス10ピクセル(margin-top: -10px;)してます。これで真ん中あたりに配置することができます。

最後に

今回紹介したのは吹き出しの三角形部分が中央に来るパターンでしたので、位置の調整などはお好みでカスタマイズしてみてください。

※それぞれのソースコードに添えた画像はフォトショで作ったイメージ画像なので、CSSをコピペして使ってもそのままの形にはなりません。ご了承ください。