CSSのみで吹き出しを作る方法【デザインサンプル10種】

CSSのみで作る様々なデザインの吹き出しの作り方をご紹介しています。

三角形部分は縦横0pxのdiv要素の枠線（border）で作られており、div要素のbefore疑似属性とafter疑似属性で表示しています。

枠線付き・角丸・影付き、正円形、三角形を曲げたもの、画像付き、ギザギザなどいろいろできます。

CSSのみで吹き出しを作る方法

今回は画像を使わずにCSSのみで作る吹き出しの作り方をご紹介します。

シンプル、枠線付き、正円形風、心の声風などを一挙にまとめましたので、HTMLとCSSはコピペして使って下さい。

なぜこのようになるのかについて簡単な解説を入れつつご紹介しています。

吹き出しの基本：三角部分の作り方

基本的に吹き出し部分は、出っ張っている「▼」部分が決め手ですよね。ここをどのように作るのかがポイントになります。

ではこの三角部分をどのようにCSSで実現しているのか、簡単に説明しましょう。

三角形アイコンの作り方

HTML

<div class="bubble"></div>

CSS

.bubble{ width: 0; height: 0; border: 80px solid transparent; border-left: 80px solid #cc0000; }

実行例

なぜ三角形ができるのか

よくdiv要素の上下左右を囲むように枠線（border）を付ける事ってありますよね。

通常の枠線を付けたものが下記とします。ここではあえて上下左右の枠線に別々の色を付けています。

上記では縦と横でそれぞれ100pxの幅があります。この縦幅と横幅を「0」にすると、下の様に枠線のみが残りますよね。

さらにここから上や下の赤のborder色を透明（transparent）に設定してみましょう。

右と左の三角形がくっついているように見えますよね。

ここでできた三角形（片方）を利用しているのですね。わかってしまえば簡単な構造です。

三角形の表示ポイント

吹き出しの作り方を一度忘れると上向きの場合にborder-topを使ってしまいそうですが、実際は逆になります。

三角を作る基本ルールは「上なら下」「下なら上」と全て反対側を使う事です。

基本の吹き出し

基本的な吹き出しのコードです。

div要素を普通にCSSで装飾し、:before疑似要素で三角形を実現して、絶対配置を利用してdiv要素の縁部分に設置しています。

div要素だけで実現できるのでコードが少なくて済みます。

基本的な吹き出しの作り方

HTML

<div class="bubble1"> <p>吹き出しの例です</p> </div>

CSS

/* 吹き出し本体 */ .bubble1 { position: relative; display: inline-block; margin: 1.5em 0; padding: 17px 10px; min-width: 200px; max-width: 100%; color: #555; font-size: 16px; background: #1a62bc; } /* 三角アイコン */ .bubble1:before { content: ""; position: absolute; top: 100%; left: 20%; border: 15px solid transparent; border-top: 15px solid #1a62bc; } .bubble1 p { margin: 0; padding: 0; text-align: center; color: #fff; }

表示される吹き出し事例

上下左右の中心にアイコンを付ける

上記のCSSで絶対配置を掛けている部分を適宜変更すれば、上下左右につける事ができます。

三角形が付く位置が変わると、三角形の角の方向（borderの上下左右）も変わりますので対応させるようにしましょう。

絶対配置とborderの向き

吹き出しアイコン（中心）の作り方

HTML

<div class="row"> <div class="col-sm-3"> <div class="bubble1_1"> <p>吹き出し下</p> </div> </div> <div class="col-sm-3"> <div class="bubble1_2"> <p>吹き出し上</p> </div> </div> <div class="col-sm-3"> <div class="bubble1_3"> <p>吹き出し右</p> </div> </div> <div class="col-sm-3"> <div class="bubble1_4"> <p>吹き出し左</p> </div> </div> </div>

CSS

.bubble1_1, .bubble1_2, .bubble1_3, .bubble1_4 { position: relative; display: inline-block; margin: 1.5em 0; padding: 17px 10px; width: 100%; font-size: 16px; background: #1a62bc; } /* 下向き三角 */ .bubble1_1:before{ content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #1a62bc; } /* 上向き三角 */ .bubble1_2:before{ content: ""; position: absolute; top: 0%; left: 50%; margin-left: -15px; margin-top: -30px; border: 15px solid transparent; border-bottom: 15px solid #1a62bc; } /* 右向き三角 */ .bubble1_3:before{ content: ""; position: absolute; top: 50%; left: 100%; margin-top: -15px; margin-left: 0px; border: 15px solid transparent; border-left: 15px solid #1a62bc; } /* 左向き三角 */ .bubble1_4:before{ content: ""; position: absolute; top: 50%; left: 0%; margin-top: -15px; margin-left: -30px; border: 15px solid transparent; border-right: 15px solid #1a62bc; } .bubble1_1 p, .bubble1_2 p, .bubble1_3 p, .bubble1_4 p { margin: 0; padding: 0; text-align: center; color: #fff; }

表示される吹き出し事例

「左右の中心＋三角の向き」は、設定するマイナス数値に注意

左右の中心から始める際は「三角の向き＋左右の中心」を考慮しなければなりませんので、それぞれmarginの数値が調整されています。

三角形の向きでmargin調整が必要

三角形のアイコン部分は基本「borderによる枠線」を利用しています。

例えば上向き三角（下の枠線）であれば、透明にしている上の枠線分だけの余白が必ずあるのですね。

ですのでその枠線を本来の位置から適切な位置へ調整する分、marginのマイナス数値を追加する必要があります。

下向きの場合と右向きを使う場合は、疑似層素が本体要素に重なりません。

しかもborder-topやborder-leftがそのままくっついて自然に吹き出しになります。

それに対し上向き（border-bottom）や左向き（border-right）を使う場合は、絶対配置を設定しても疑似要素が本体要素上に重なっています。

なので三角アイコンがdiv要素の外に出るまでには、枠線の倍のマージンを取る必要があるのです。

左右の中心にするため調整が必要

縦にせよ横にせよ、絶対配置で50％の位置に移動させてそこから枠線を表示させるとなるとその分位置がずれてしまいますよね。

三角の位置は完全に真ん中にしなければならないのですから、三角形の始まりはそれこそ45とか46％あたりから始めないといけません。

ですので一旦50％の位置へ持ってきて、枠線の幅分だけマイナス数値を入れてやると、丁度真ん中に来るのです。

枠線が付いた吹き出し

上記のサンプルをベースに、今度は「枠線」で吹き出しの形を見せる場合です。

厳密には「枠色の三角形」を先に作りその上に「白の三角形」を重ねて三角形の枠線を構成しています。

これを実現するために:before疑似要素ともう一つ:after疑似要素を使います。

吹き出し（枠線付き）の作り方

CSS（下向き三角の場合）

.bubble2 { position: relative; display: inline-block; margin: 1.5em 0; padding: 17px 10px; min-width: 200px; max-width: 100%; font-size: 16px; border: solid 3px #1a62bc; } /* 上に載せる三角アイコン */ .bubble2:before { content: ""; position: absolute; bottom: -25px; left: 50%; margin-left: -16px; border: 13px solid transparent; border-top: 13px solid #FFF; z-index: 2; } /* 下に載せる三角アイコン */ .bubble2:after { content: ""; position: absolute; bottom: -29px; left: 50%; margin-left: -17px; border: 14px solid transparent; border-top: 14px solid #1a62bc; z-index: 1; } .bubble2 p { margin: 0; padding: 0; text-align: center; }

表示される吹き出し事例

ポイント

:after疑似要素の三角アイコン上に:before疑似要素による三角アイコンを乗せています。

この時三角アイコンの接地面にborder線が出ない様に気を付けましょう。

枠が丸い吹き出し

ここまで紹介してきた吹き出しの角には「丸み」をつける事もできます。

上で紹介したCSSコードの中に「border-radius: 00px;」と追加するだけです。

吹き出し（角丸）の作り方

CSS（下向き三角の場合）

.bubble3 { position: relative; display: inline-block; margin: 1.5em 0; padding: 7px 10px; min-width: 200px; max-width: 100%; font-size: 16px; background: #1a62bc; border-radius: 10px; } /* 三角アイコン */ .bubble3:before { content: ""; position: absolute; top: 99%; left: 50%; margin-left: -15px; border: 16px solid transparent; border-top: 16px solid #1a62bc; } .bubble3 p { margin: 0; padding: 0; text-align: center; color: #fff; }

表示される吹き出し事例

影付きの吹き出し

吹き出しに影が付いた状態を作る事も出来ます。

仕組みとしては、まず吹き出し本体に影をつけます。

:before疑似要素はそのまま普通に設置をして、:after疑似要素を三角形の影として使うため少しずらして設置します。

吹き出し（影付き）の作り方

CSS（下向き三角の場合）

/* 影付き吹き出し本体 */ .bubble4{ position: relative; display: inline-block; padding: 20px; min-width: 200px; max-width: 100%; background-color: #f1f1fd; border-radius: 10px; box-shadow: 4px 4px 0px 0px #1a62bc; /* 上の部分が吹き出し本体の影になります */ } /* 三角アイコン */ .bubble4:before{ content: ''; position: absolute; width: 0; height: 0; left: 27px; top: 100%; border: 15px solid transparent; border-top: 15px solid #1a62bc; } /* 三角アイコンの影 */ .bubble4:after{ content: ''; position: absolute; width: 0; height: 0; left: 22px; top: 100%; border: 15px solid transparent; border-top: 15px solid #f1f1fd; }

表示される吹き出し事例

正円形の吹き出し

次に、正円形の吹き出しを生成する場合を紹介します。

正円形を使う場合は文字を中央に表示させる事が多いので、文字が多くなり改行されるとデザインが崩れてしまいます。

ですので、数字だけや1単語だけにして文字を短くするようにしましょう。

正円吹き出しの作り方

CSS

/* 正円形部分 */ .bubble1 { position: relative; display: inline-block; margin: 1.5em 0; padding: 0 5px; width: 90px; height: 90px; text-align: center; color: #FFF; font-size: 20px; font-weight: bold; background: #70a6ff; border-radius: 50%; box-sizing: border-box; } /* 三角アイコン */ .bubble1:before { content: ""; position: absolute; bottom: -25px; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #70a6ff; z-index: 0; } .bubble5 p { margin: 0; padding: 0; text-align: center; color: #fff; line-height: 90px !important; }

表示される吹き出し事例

斜めにアイコンを出す場合

上記の正円のbefore疑似要素部分を下記の様にします。三角を右下に出す場合で紹介しています。

CSS

/* 三角アイコン */ .bubble6:before { content: ""; position: absolute; bottom: -8px; right: -8px; margin-left: -15px; border: 15px solid transparent; border-left: 15px solid #1a62bc; z-index: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

表示される吹き出し事例

心の声風吹き出し

心の声風の吹き出しは三角形の代わりに２つの小さな円を並べて配置します。

心の声風吹き出しの作り方

CSS

/* 心の声吹き出し本体 */ .bubble7 { position: relative; display: inline-block; margin: 1.5em 0 0 40px; padding: 17px 10px; min-width: 200px; max-width: 100%; background: #1a62bc; font-size: 16px; border-radius: 10px; } /* 円アイコン1 */ .bubble7:before { content: ""; position: absolute; left: -38px; width: 13px; height: 12px; bottom: 0; background: #1a62bc; border-radius: 50%; } /* 円アイコン2 */ .bubble7:after { content: ""; position: absolute; left: -24px; width: 20px; height: 18px; bottom: 3px; background: #1a62bc; border-radius: 50%; } .bubble7 p { margin: 0; padding: 0; text-align: center; color: #fff; }

表示される吹き出し事例

アイコンが曲がった吹き出し

三角部分がくねっと曲がってかわいらしくなる吹き出しです。

この曲がった三角部分もbefore疑似要素とafter疑似要素で表現します。

色付きの半円部分と白色の半円をずらして重ねる事で、曲がった部分を演出できるのです。

曲がった吹き出しアイコンの作り方

CSS（上向き三角の場合）

/* 曲がった吹き出し本体 */ .bubble8{ position: relative; padding: 20px; display: inline-block; min-width: 200px; max-width: 100%; background-color: #1a62bc; color: #ffffff; border-radius: 10px; } /* 色付きの半円 */ .bubble8::before{ content: ''; position: absolute; width: 0; height: 0; border-radius: 50%; transform: rotate(45deg); left: 20px; top: -15px; border-left: 20px solid #1a62bc; border-top: 20px solid #1a62bc; border-right: 20px solid transparent; border-bottom: 20px solid transparent; } /* 白い半円 */ .bubble8::after{ content: ''; position: absolute; display: block; width: 0; height: 0; border-radius: 50%; transform: rotate(45deg); left: 35px; top: -20px; border-left: 20px solid #ffffff; border-top: 20px solid #ffffff; border-right: 20px solid transparent; border-bottom: 20px solid transparent; }

表示される吹き出し事例

色付き半円とその上に重なる白い円の位置を調整する事によって、曲がった部分の演出が変わりますね。

画像付き吹き出し

上記の絶対配置部分は基本的に50％にして左右の中心にしていましたが、これを10％か90％などに調整すればより吹き出しっぽくなります。

画像付き吹き出しの作り方

HTML

<div class="bubble9"> <div class="imgs"> <img src="../images/css_bubble_img5.jpg" alt=""> </div> <div class="chat"> <div class="ss"> <p>画像付き吹き出し例</p> </div> </div> </div>

CSS

.bubble9 { width: 100%; margin: 1.5em 0; overflow: hidden; } .bubble9 .imgs { float: left; margin-right: -90px; width: 80px; } .bubble9 .imgs img{ width: 100%; height: auto; border: solid 3px #1a62bc; border-radius: 50%; } .bubble9 .chat { width: 100%; } .ss { display: inline-block; position: relative; margin: 5px 0 0 105px; padding: 17px 13px; border-radius: 12px; background: #1a62bc; } .ss:after { content: ""; display: inline-block; position: absolute; top: 18px; left: -24px; border: 12px solid transparent; border-right: 12px solid #1a62bc; } .ss p { margin: 0; padding: 0; color: #fff; }

表示される吹き出し事例

ギザギザ吹き出し

最後によく特売やセールなどで使われるギザギザ吹き出しをCSSのみで実現してみました。

ギザギザ吹き出しの作り方

HTML

<div class="gizagiza"> <a><span>200円OFF</span></a> </div>

/* ギザギザ吹き出し */ .giza a, .giza a:after, .giza a:before, .giza a span { content:""; width:100px; height:100px; background: #1a62bc; position:absolute; top:0px; } .giza, .giza a, .giza a:after, .giza a:before { -webkit-transform: rotate(22.5deg); -moz-transform: rotate(22.5deg); } .giza a span { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); text-align: center; z-index: 999; line-height: 100px; color: #fff; } .giza { position:relative; width:100px; height:100px; background: #1a62bc; margin: 20px 0 0 20px; }

表示される吹き出し事例

※IEを除くブラウザで表示できます。

簡単に吹き出しを作れるジェネレーター

このCSSの吹き出しは制作中のWEBサイトに採用されればしばらく使うでしょうから、その間は覚えているかも知れません。

しかししばらく離れているとすぐに忘れてしまう場合がありますよね。

そんな人には、すぐに吹き出し作成をサポートしてくれるサイトがあるのでご紹介します！

ジェネレーターWEBツール

いくつかのツールをご紹介します。どれも視覚的に操作しやすい構造になっています。

色や形などを選択したらすぐにCSSがリアルタイムに生成されるので、後はコピーして使うだけです。

CSS ARROW PLEASE!

URL：CSS ARROW PLEASE!

Bubbly

URL：Bubbly

CSSデザインジェネレーター

URL：CSSデザインジェネレーター

まとめ

以上CSSのみで作る吹き出しの種類と方法をご紹介しました。

WEBページ上で会話形式の文章や、強調したい箇所などに使ってみてはいかがでしょうか。

これまでの例を応用すれば、あなただけの斬新で個性的な吹き出しが作成できるかも知れません。

まずは上記をコピーして使い、パラメータを少しずつ変えて結果を検証すれば問題はありません。

CSSのコード部分の仕組みは多少複雑かも知れませんがが、ジェネレーターを使えば忘れていてもすぐに実現できます。

一押し人気コーナー紹介