ZeroPlus Media > Web制作 > HTML/CSS > CSSで吹き出しを作ろう

CSSで吹き出しを作ろう

HTML/CSS

2022/07/23

2023/06/02

今回はHTMLとCSSを使った「吹き出しの作り方」を紹介していきます。

Webサイトの中で吹き出しを使うことは意外に多い傾向にあります。吹き出しの画像で代用することもできますが、コードとして作成できると素材を作る手間が省くことができます。

HTML,CSSでも装飾を作ることができるようになるためにも、今回の記事で吹き出しの作り方をマスターしていきましょう。

CSSで吹き出しを作る
枠線がついた吹き出しを作る
- 枠線がついた吹き出し
自分で吹き出しを作ってみよう

CSSで吹き出しを作る

まずは、どのようにして吹き出しを作るかを考えていきましょう。

吹き出しの構成イメージ

吹き出しをHTML, CSSで作るイメージは画像の通りになります。

吹き出しをHTML,CSSで作る時の大切な考え方は１つです。

「吹き出しの本体」と「吹き出しのしっぽ」でパーツを分けて考えましょう。

このように、本体のパーツと装飾のパーツに分けて考えると、そのほかの吹き出しのデザインも簡単に作ることができるようになります。

吹き出しの本体の作成

まずは、「吹き出しの本体」を作っていきます。

See the Pen 吹き出し by ZeroPlus (@zeroplus-programming) on CodePen.

作り方を解説します。

<div class="sample-balloon">
  <p>パンはパンでも食べられないやん</p>
</div>

まずは、HTMLをこのように作成します。

今回は、divタグに対してsample-balloonクラスをつけます。

.sample-balloon {
  position: relative;
  display: inline-block;
  background: #ff9158;
  border-radius: 30px;
  padding: 16px;
  font-weight: bold;
  color: #fff;
}

CSSで見た目を整えます。今回の例は丸みを帯びた形にします。

吹き出しのしっぽを作る

吹き出しの本体ができたら、次に「吹き出しのしっぽ」を作っていきます。

三角形を作って配置

.sample-balloon:before {
  content: "";
  /* borderで三角形を作る */
  border: 10px solid transparent;
  border-top: 10px solid #ff9158;
  /* 配置する */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

「吹き出しのしっぽ」は装飾なので、吹き出しの本体の擬似要素として作成します。

ここでのポイントは、CSSで三角形を作ることです。

上下左右全てのborder-colorを透明にしてから、上下左右の一箇所にのみborderのスタイルを指定すると三角形の見た目を作ることができます。

ここまでの作り方が理解できればもう一安心です。あとは、三角形の向きを変えて配置するだけで、色々な方向から吹き出しのしっぽを作ることができます。

枠線がついた吹き出しを作る

次は、吹き出しのパターンとして、枠線がついたものを作っていきます。

枠線がついた吹き出し

このパターンについても、作成の手順は先ほどの例とほとんど同じです。

See the Pen 吹き出し - 枠線だけ by ZeroPlus (@zeroplus-programming) on CodePen.

<div class="sample-border-balloon">
  <p>食パンの袋を止めるやつってバッククロージャーっていうらしい。</p>
</div>

まずはHTMLで吹き出しの元となる構造を作ります。

/* 吹き出し本体の背景色用 */
.sample-border-balloon {
  position: relative;
  display: inline-block;
  background: #fff;
  border-radius: 30px;
  padding: 16px;
  font-weight: bold;
  color: #000;
  border: 4px solid #d5d5d5;
  box-sizing: border-box;
}

/* 吹き出しのしっぽ：本体の背景色用 */
.sample-border-balloon:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top: 12px solid #fff;
  z-index: 2;
}

/* 吹き出しのしっぽ：枠線の色用 */
.sample-border-balloon:after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-top: 14px solid #d5d5d5;
  z-index: 1;
}

次にCSSで吹き出しのしっぽを作りますが、ここで先ほどの例との違いがあります。

今回のパターンですと、しっぽの構造を２つ作って配置しなければなりません。