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

吹き出しデザインサンプル

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

レスポンシブ対応

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

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

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

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

下向き

dgada-3.png

コードを表示
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つ

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

下向き

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

上向き

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

左向き

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

右向き

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

吹き出しを角丸にする

吹き出しを角丸にする

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

サルワカくんの顔(通常)
サルワカくん

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

書き方例

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

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単語だけのように、文字を短くするようにしましょう。
なお、円の大きさはwidthheightline-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; vertical-align: middle; 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; vertical-align: middle; 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; vertical-align: middle; 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; vertical-align: middle; 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; vertical-align: middle; 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; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

考えごと風

三角形の代わりに2つの小さな円を並べて配置することで「ぼんやりと考えている」ようなデザインにしました。背景色は必要に応じて変えて頂ければと思います(#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; }

会話(チャット)風

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

会話風

使い方

  1. 下のCSSコードを、あらかじめCSSファイルに貼付けておく
  2. 下のHTMLコードの「★ここに画像を入れる★」という部分にアイコン画像として使うimgタグを追加し、HTMLをまるごとメモ帳などに保存しておく
  3. 会話吹き出しを使いたい部分で、②のHTMLを貼付け
  4. コード内の「★文章を入れる★」という部分にセリフを書く
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らしく、左側には「アイコン付きの吹き出し」、右側には「緑が背景の吹き出し(アイコンなし)」を配置しています。

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

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

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

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

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

吹き出しジェネレーター

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

サルワカ