CSSで作る！吹き出しデザインのサンプル19選

記事内に商品プロモーションが含まれる場合があります

今回は、HTMLとCSSで形を作る吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。会話の顔アイコンには別途画像を使います。記事内の画像は公開当時の表示例です。各デザインは別々に使う例です。同じクラス名の例を同時に使う場合は、クラス名を分けてください。

レスポンシブ対応

円形以外の例は、文字が右端まで達すると次の行へ折り返します。円形の例は短い文字列用です。実際に使う文章の量や画像に合わせて、狭い画面でも幅や表示を確認してください。

使い方（初心者向け）
CSSが反映されないときはこちら

シンプルな四角い吹き出し4つ

最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e0edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。ちなみに下から伸びる三角形は疑似要素（::before）で表現しています。興味のある方は下の記事に目を通してみてください。

下向き

コードを表示

HTML

<div class="balloon1">
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  box-sizing: border-box;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

上向き

コードを表示

HTML

<div class="balloon1-top">
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon1-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  box-sizing: border-box;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1-top::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #e0edff;
}

.balloon1-top p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

左向き

コードを表示

HTML

<div class="balloon1-left">
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon1-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: calc(100% - 15px);
  box-sizing: border-box;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}

.balloon1-left p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

右向き

コードを表示

HTML

<div class="balloon1-right">
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon1-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: calc(100% - 15px);
  box-sizing: border-box;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1-right::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #e0edff;
}

.balloon1-right p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

枠線バージョン4つ

上記のサンプルをベースに、塗りつぶしではなく「枠線」で形を見せるようにしてみました。細かな話しをすると、「黒の三角形」と「白の三角形」を作り、それぞれを重ねることで、三角形の線を作っています。さきほど同様にレスポンシブ対応です（改行にも対応しています）。

下向き

Web Maker 8

コードを表示

HTML

<div class="balloon2">
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2::before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon2::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

.balloon2 p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

上向き

Web Maker 9

コードを表示

HTML

<div class="balloon2-top">
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon2-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2-top::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2;
}

.balloon2-top::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #555;
  z-index: 1;
}

.balloon2-top p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

左向き

Web Maker 10

コードを表示

HTML

<div class="balloon2-left">
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: calc(100% - 15px);
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon2-left::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.balloon2-left p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

右向き

Web Maker 11

コードを表示

HTML

<div class="balloon2-right">
  <p>こんにちは。これは例です。</p>
</div>

CSS

.balloon2-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: calc(100% - 15px);
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2-right::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.balloon2-right::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;
}

.balloon2-right p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

吹き出しを角丸にするCSS

吹き出しを角丸にする

ここまで紹介してきた吹き出しの角には、簡単に丸みをつけることができます。方法は、上で紹介したコードの.balloon◯◯{~}の中にborder-radius: ◯◯px;と追加するだけです。

CSSの書き方例

試しに、この記事の最初に紹介した吹き出しの角を丸くしてみましょう。

<div class="balloon1">
  <p>こんにちは。これは例です。</p>
</div>

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  box-sizing: border-box;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 15px;
}

.balloon1::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

このコードの表示は以下のようになります。枠線バージョンでも同様に「border-radius」により丸みをつけることができます。

角丸吹き出し

円形の吹き出し5つ

次に、正円形の吹き出しデザインを紹介します。注意点は、文字が中央に表示される正円の場合、改行されるとデザインが崩れてしまいます。そこで以下で紹介するサンプルを使うときには、数字だけや1単語だけのように、文字を短くするようにしましょう。
なお、円の大きさはwidth、height、line-heightのpx数を変えることで調整できます（3つとも同じ値に！）。

下向き

コードを表示

HTML

<div class="balloon3">
  POINT
</div>

CSS

.balloon3 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #70a6ff;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3::before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #70a6ff;
  z-index: 0;
}

上向き

Web Maker 15

コードを表示

HTML

<div class="balloon3-top">
  POINT
</div>

CSS

.balloon3-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #a4eb84;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-top::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #a4eb84;
  z-index: 0;
}

左向き

Web Maker 16

コードを表示

HTML

<div class="balloon3-left">
  POINT
</div>

CSS

.balloon3-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #ffcc75;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #ffcc75;
  z-index: 0;
}

右向き

Web Maker-17.png

コードを表示

HTML

<div class="balloon3-right">
  POINT
</div>

CSS

.balloon3-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #ff8e9d;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-right::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #ff8e9d;
  z-index: 0;
}

斜め

斜めの吹き出し

コードを表示

HTML

<div class="balloon3-right-btm">
  POINT
</div>

CSS

.balloon3-right-btm {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #a58eff;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-right-btm::before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: -8px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #a58eff;
  z-index: 0;
  transform: rotate(45deg);
}

考えごと風のふきだし

三角形の代わりに２つの小さな円を並べて配置することで「ぼんやりと考えている」ようなデザインにしました。背景色は必要に応じて変えて頂ければと思います（#fff0c6が背景色を表すカラーコードです。3カ所とも同じコードにするようにしてください）。

考え事風

コードを表示

HTML

<div class="balloon4">
  <p>ここに文章</p>
</div>

CSS

.balloon4 {
  position: relative;
  box-sizing: border-box;
  margin: 2em 0 2em 40px;
  padding: 15px;
  background: #fff0c6;
  border-radius: 30px;
}

.balloon4::before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #fff0c6;
  border-radius: 50%;
}

.balloon4::after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #fff0c6;
  border-radius: 50%;
}
.balloon4 p {
  margin: 0; 
  padding: 0;
  overflow-wrap: anywhere;
}

会話（チャット）風

次に、人やキャラクターが喋っているような「会話風の吹き出し」の作り方を紹介します。最近ブログなどでよく見かけますね。

会話風

使い方

下のCSSを、あらかじめCSSファイルに貼付けておく
下のHTMLの顔アイコンのimgタグにあるsrcを自分の画像URLへ、altを画像の説明へ書き換え、HTMLをまるごとメモ帳などに保存しておく
会話吹き出しを使いたい部分で、②のHTMLを貼付け
コード内の「★文章を入れる★」という部分にセリフを書く

<!--吹き出しはじまり-->
<div class="balloon5">
  <div class="faceicon">
    <img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）" width="120" height="119">
  </div>
  <div class="chatting">
    <div class="says">
      <p>★文章を入れる★</p>
    </div>
  </div>
</div>
<!--吹き出し終わり-->

.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  box-sizing: border-box;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.balloon5 .says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  box-sizing: border-box;
  max-width: calc(100% - 105px);
  overflow-wrap: anywhere;
  border-radius: 12px;
  background: #d7ebfe;
}

.balloon5 .says::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.balloon5 .says p {
  margin: 0;
  padding: 0;
}

LINE風

さきほどの応用で、LINEの画面のようなデザインを作ってみました。こちらもHTMLとCSSのコピペで使うことができます。LINEらしく、左側には「アイコン付きの吹き出し」、右側には「緑が背景の吹き出し（アイコンなし）」を配置しています。

line会話風

HTMLの見方

このデザインのHTMLは、次の3つの部分に分けて見ると、理解しやすいかと思います（コードにもコメントで番号をつけています）。
①全体を囲む部分
②左側のアイコン付きふきだし
③右側のアイコン無しふきだし ②と③の吹き出しは繰り返し使ってもOKです。②③②③と交互に並べても良いですし、②②②と連続させてもOKです。ただし、会話全体は①で囲うようにします。

CSSはこの基本例のまま使えますが、実際の文章量や表示幅に合わせて確認・調整してください。

使い方

下のCSSを、あらかじめCSSファイルに貼付けておく
下のHTMLの顔アイコンのimgタグにあるsrcを自分の画像URLへ、altを画像の説明へ書き換え、HTMLをまるごとメモ帳などに保存しておく
LINE画面を表示させたい部分で、保存しておいたHTMLをまるごと貼付け
会話の数だけ、コード内の②と③を複製する（HTML内のコメントを参考にしてくださいませ）

<div class="line-bc"><!--①LINE会話全体を囲う-->

  <!--②左コメント始-->
  <div class="balloon6">
    <div class="faceicon">
      <img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）" width="120" height="119">
    </div>
    <div class="chatting">
      <div class="says">
        <p>左ふきだし文</p>
      </div>
    </div>
  </div>
  <!--②/左コメント終-->

  <!--③右コメント始-->
  <div class="mycomment">
    <p>
    右ふきだし文
    </p>
  </div>
  <!--/③右コメント終-->
  
</div><!--/①LINE会話終了-->

/*以下、①背景色など*/
.line-bc {
  padding: 20px 10px;
  max-width: 450px;
  width: 100%;
  box-sizing: border-box;
  margin: 15px auto;
  text-align: right;
  font-size: 14px;
  background: #7da4cd;

}

/*以下、②左側のコメント*/
.line-bc .balloon6 {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
}

.line-bc .balloon6 .faceicon {
  float: left;
  margin-right: -50px;
  width: 40px;
}

.line-bc .balloon6 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.line-bc .balloon6 .chatting {
  width: 100%;
  text-align: left;
}
.line-bc .says {
  display: inline-block;
  position: relative; 
  margin: 0 0 0 50px;
  padding: 10px;
  max-width: min(250px, calc(100% - 50px));
  box-sizing: border-box;
  overflow-wrap: anywhere;
  border-radius: 12px;
  background: #edf1ee;
}

.line-bc .says::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px; 
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #edf1ee;
  transform: rotate(35deg);
}
.line-bc .says p {
  margin: 0;
  padding: 0;
}

/*以下、③右側の緑コメント*/
.line-bc .mycomment {
  margin: 10px 0;
}
.line-bc .mycomment p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  padding: 8px;
  max-width: min(250px, calc(100% - 10px));
  box-sizing: border-box;
  overflow-wrap: anywhere;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px;
}

.line-bc .mycomment p::after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  transform: rotate(-35deg);
}

タイトルや見出し用

Headline 0 33 00 min

Headline 16 32 52 min

このような吹き出し型の見出しを作る方法は、下の記事で解説しています。興味のある方は目を通してみてください。

参考：CSSで三角形を作る方法

ここまで紹介してきた吹き出しの三角形のしっぽはborderプロパティにより表現されています。仕組みを詳しく知りたい方は、こちらの記事を参考にするのが良いかと思います。

参考CSSのみで三角形を作る方法を解説するよアイデアハッカーさんの記事です。

参考：吹き出しのCSSジェネレーター

吹き出しジェネレーター

このページに飛ぶ

吹き出しを簡単に作ることができるジェネレーターなんかもあります。「色や線などのスタイルを細かく指定したいけど、コードはいじりたくない」という方は是非活用してみてください。