ZeroPlus Media > L_HTML/CSS > Step5 > CSSで吹き出しを作ろう

CSSで吹き出しを作ろう

2022/07/14

2024/06/06

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

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

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

この記事で身につく内容

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-width: 10px;
  border-style: solid;
  border-color: #ff9158 transparent transparent transparent;

  /* 配置する */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

「吹き出しのしっぽ」はCSSで三角形を作成します。
装飾にあたる部分なので、吹き出しの本体の擬似要素として作ります。

三角形はborderを利用することで再現ができましたね。
一辺だけ色をつけ、他の辺を透明にすることで三角形のように見せることができました。

詳しい仕組みは以下の記事で復習しましょう。

CSSでいろいろな図形を作ろう

あとは、三角形の向きを変えて配置するだけで、色々な方向から吹き出しのしっぽを作ることができます。

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

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

枠線がついた吹き出し

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

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-width: 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  z-index: 2;
}

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

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

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