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

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

今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。

レスポンシブ対応

以下で紹介する吹き出しデザインは（円形のものを除き）、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。

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

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

CSSの疑似要素とは？beforeとafterの使い方まとめ

下向き

コードを表示

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%;
  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;
}

上向き

コードを表示

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%;
  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;
}

左向き

コードを表示

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: 100%;
  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;
}

右向き

コードを表示

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: 100%;
  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;
}

枠線バージョン4つ

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

下向き

コードを表示

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;
}

上向き

コードを表示

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;
}

左向き

コードを表示

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: 100%;
  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;
}

右向き

コードを表示

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: 100%;
  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;
}

吹き出しを角丸にするCSS

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

border-radiusは、角の丸みを指定するCSSのプロパティです。例えば、border-radius: 10px;と書けば、角は10pxぶん丸くなります。

CSSの書き方例

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

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%;
  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;
}

このコードの表示は以下のようになります。枠線バージョンでも同様に「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;
}

上向き

コードを表示

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;
}

左向き

コードを表示

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;
}

右向き

コードを表示

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;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

考えごと風のふきだし

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

コードを表示

HTML

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

CSS

.balloon4 {
  position: relative;
  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;
}

会話（チャット）風

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

使い方

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

HTML

<!--吹き出しはじまり-->
<div class="balloon5">
  <div class="faceicon">
    ★ここに画像を入れる <img~>★
  </div>
  <div class="chatting">
    <div class="says">
      <p>★文章を入れる★</p>
    </div>
  </div>
</div>
<!--吹き出し終わり-->

CSS

.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;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

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

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

LINE風

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

HTMLの見方

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

CSSについては何もいじる必要はありません。

使い方

下のCSSを、あらかじめCSSファイルに貼付けておく
下のHTMLの「★ここにアイコン画像★」という部分に画像のimgタグを追加し、HTMLをまるごとメモ帳などに保存しておく
LINE画面を表示させたい部分で、保存しておいたHTMLをまるごと貼付け
会話の数だけ、コード内の②と③を複製する（HTML内のコメントを参考にしてくださいませ）

HTML

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

  <!--②左コメント始-->
  <div class="balloon6">
    <div class="faceicon">
      ★ここにアイコン画像 <img~>★
    </div>
    <div class="chatting">
      <div class="says">
        <p>左ふきだし文</p>
      </div>
    </div>
  </div>
  <!--②/左コメント終-->

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

CSS

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

}

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

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

.balloon6 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.balloon6 .chatting {
  width: 100%;
  text-align: left;
}
.says {
  display: inline-block;
  position: relative; 
  margin: 0 0 0 50px;
  padding: 10px;
  max-width: 250px;
  border-radius: 12px;
  background: #edf1ee;
}

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

/*以下、③右側の緑コメント*/
.mycomment {
  margin: 10px 0;
}
.mycomment p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  padding: 8px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

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

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

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

参考

CSSのみで三角形を作る方法を解説するよ

アイデアハッカーさんの記事です。

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

このページに飛ぶ

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

この記事も参考になるかも

CSSの疑似要素とは？beforeとafterの使い方まとめ

コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）

HTMLとCSSの勉強におすすめの本8冊（初心者〜中級者向け）