【CSS】吹き出しの作り方やCSSジェネレータ、サンプルコードを紹介

Webサイトで吹き出しデザインを使いたいけれど、画像を用意するのは手間がかかると感じたことはないでしょうか。CSSだけで吹き出しを作成すれば、画像不要でレスポンシブ対応も簡単に実現できます。

吹き出しを作成する基本的な方法として、以下の3つがあります。

• borderプロパティで三角形を作る
• 疑似要素で三角形を配置する
• 上下左右の向きを変更する

それぞれborderプロパティの特性を活かした実装方法で、疑似要素と組み合わせることによって、シンプルなHTMLコードで吹き出しを実現できます。以下では各方法について、詳しく解説していきます。

サクッとコピペだけで実装したい方はこちら

borderプロパティで三角形を作る

CSSで吹き出しの三角形部分を作成するには、borderプロパティの特性を利用します。borderプロパティとは、要素の境界線を指定するCSSプロパティで、上下左右それぞれの境界線が交わる部分は、斜めの切り口になる特性があります。

三角形を作成するための基本的な考え方は以下のとおりです。

• 要素のwidthとheightを0に指定する
• 表示したい方向以外のborderをtransparent(透明)にする
• 表示したい方向のborderに色を指定する
• borderの太さで三角形のサイズを調整する

<div class="triangle"></div>

<style>
.triangle {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #333;
}
</style>

上記のコードでは、左右のborderを透明にして上部のborderのみに色を指定しているため、下向きの三角形が表示されます。borderの太さを変更することによって、三角形のサイズや形状を自由に調整できます。

疑似要素で三角形を配置する

吹き出しの本体と三角形を組み合わせるには、疑似要素::beforeまたは::afterを使用します。疑似要素とは、HTML要素の前後に追加のコンテンツを挿入できるCSSの機能で、余分なHTMLタグを増やさずにデザインを実装できます。

<div class="balloon">吹き出しのテキスト</div>

<style>
.balloon {
  position: relative;
  padding: 20px;
  background-color: #e0edff;
  border-radius: 10px;
}

.balloon::before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #e0edff;
}
</style>

吹き出し本体にposition: relativeを指定し、疑似要素にposition: absoluteを指定することによって、三角形を好きな位置に配置できます。bottomやleftプロパティの値を変更すれば、三角形の位置を調整できます。

上下左右の向きを変更する

borderプロパティで指定する方向を変えることによって、吹き出しの三角形を上下左右のどの方向にも配置できます。向きを変更する際は、表示したい方向のborderのみに色を指定し、他の方向をtransparentにします。

各方向の実装方法は以下のとおりです。

以下のコードでは、右向きの吹き出しではborder-leftに色を指定し、上下のborderを透明にしています。このように、borderの指定方向を変更するだけで、簡単に吹き出しの向きを変えられます。

<!-- 右向きの吹き出し -->
<div class="balloon-right">右向きの吹き出し</div>

<style>
.balloon-right {
  position: relative;
  padding: 20px;
  background-color: #e0edff;
  border-radius: 10px;
}

.balloon-right::before {
  content: "";
  position: absolute;
  right: -15px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #e0edff;
}
</style>

吹き出しに枠線を付けたいけれど、三角形の部分にも枠線を表現するのは難しいと感じたことはないでしょうか。CSSの疑似要素を2つ使うことによって、三角形の枠線も自然に表現できます。

枠線付きの吹き出しを作成する方法として、以下の3つを覚えておきましょう。

• 2つの疑似要素を重ねて枠線を作る
• 上下左右の向きごとの実装
• 角丸と組み合わせる

それぞれ異なる色の三角形を少しずらして重ねることによって、枠線のように見せる手法です。疑似要素::beforeと::afterの両方を活用することで実現できます。以下では各方法について、詳しく解説していきます。

2つの疑似要素を重ねて枠線を作る

枠線付きの吹き出しを作成するには、疑似要素::beforeと::afterを使って2つの三角形を作成し、少しずらして重ねます。一方を枠線の色、もう一方を背景色にすることによって、枠線があるように見せられます。

<div class="balloon-border">枠線付き吹き出し</div>

<style>
.balloon-border {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border: 3px solid #555;
  border-radius: 10px;
}

.balloon-border::before {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #555;
  z-index: 1;
}

.balloon-border::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff;
  z-index: 2;
}
</style>

上記のコードでは、::beforeで枠線の色(#555)の三角形を作成し、::afterで背景色(#fff)の三角形を少し上にずらして重ねています。z-indexで重なり順を制御することによって、枠線の表現が実現できます。

上下左右の向きごとの実装

枠線付きの吹き出しも、基本的な吹き出しと同様に、上下左右のどの方向にも三角形を配置できます。向きを変更する際は、2つの疑似要素の両方でborderの指定方向を変更します。

各方向の実装における注意点は以下のとおりです。

右向きの場合、::beforeをより外側(right: -18px)に配置し、::afterを少し内側(right: -15px)に配置します。この位置のずれによって、枠線の太さが表現されます。

<!-- 右向きの枠線付き吹き出し -->
<div class="balloon-border-right">右向きの枠線付き</div>

<style>
.balloon-border-right {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border: 3px solid #555;
  border-radius: 10px;
}

.balloon-border-right::before {
  content: "";
  position: absolute;
  right: -18px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #555;
  z-index: 1;
}

.balloon-border-right::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #fff;
  z-index: 2;
}
</style>

角丸と組み合わせる

枠線付きの吹き出しに、border-radiusプロパティを追加することによって、角丸のデザインにできます。border-radiusとは、要素の角に丸みを付けるCSSプロパティで、値が大きいほど丸みが強くなります。

<div class="balloon-border-round">角丸の枠線付き吹き出し</div>

<style>
.balloon-border-round {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border: 3px solid #555;
  border-radius: 15px;
}

.balloon-border-round::before {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #555;
  z-index: 1;
}

.balloon-border-round::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff;
  z-index: 2;
}
</style>

border-radiusを追加するだけで、柔らかい印象の吹き出しになります。三角形部分のコードは変更する必要がないため、簡単にデザインのバリエーションを増やせます。

基本的な吹き出しの作り方をマスターしたら、次は様々なデザインバリエーションに挑戦してみましょう。CSSのプロパティを組み合わせることによって、角丸や円形、会話風など多彩な表現が実現できます。

吹き出しのデザインバリエーションとして、以下の4つがあります。

• 角丸の吹き出し
• 円形の吹き出し
• 会話風の吹き出し
• 影付きの吹き出し

それぞれ異なるCSSプロパティを活用したデザインで、用途に応じて使い分けることによって、Webサイトの表現力を高められます。以下では各デザインについて、詳しく解説していきます。

角丸の吹き出し

角丸の吹き出しは、border-radiusプロパティを使用することによって、簡単に作成できます。角に丸みを付けることで、柔らかく親しみやすい印象を与えられます。

角丸の吹き出しを作成する際のポイントは、以下のとおりです。

• 吹き出し本体にborder-radiusを指定する
• 三角形部分のコードは変更不要
• border-radiusの値を調整して丸みを変更できる
• 枠線付きの吹き出しにも適用可能

<div class="balloon-round">角丸の吹き出し</div>

<style>
.balloon-round {
  position: relative;
  padding: 20px;
  background-color: #fff3d1;
  border-radius: 15px;
}

.balloon-round::before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff3d1;
}
</style>

border-radiusの値を10px、15px、20pxなど変更することによって、丸みの強さを調整できます。柔らかい印象を出したい場合は15px以上、控えめにしたい場合は10px以下がおすすめです。

円形の吹き出し

円形の吹き出しは、正方形の要素にborder-radius: 50%を指定することによって作成できます。ワンポイントとして使用する際に効果的で、短いテキストや記号を入れるのに適しています。

<div class="balloon-circle">POINT</div>

<style>
.balloon-circle {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #70a6ff;
  color: #fff;
  border-radius: 50%;
  font-weight: bold;
}

.balloon-circle::before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #70a6ff;
}
</style>

widthとheightに同じ値を指定して正方形を作り、border-radiusを50%にすることによって正円になります。line-heightをheightと同じ値にすれば、テキストが上下中央に配置されます。

会話風の吹き出し

会話風の吹き出しは、吹き出しの横にアイコン画像を配置することによって、チャットのような表現を実現できます。ブログ記事での会話形式のコンテンツに適しています。

会話風の吹き出しを作成する際の実装方法は以下のとおりです。

• 吹き出しの左右にmarginで余白を設ける
• アイコン画像をposition: absoluteで配置
• 三角形の向きを画像側に向ける
• 左右で異なるスタイルを用意する

<div class="balloon-chat-left">
  <img src="icon.png" class="icon" alt="アイコン">
  左側から話しているような吹き出し
</div>

<style>
.balloon-chat-left {
  position: relative;
  padding: 15px;
  margin-left: 80px;
  background-color: #e0edff;
  border-radius: 10px;
}

.balloon-chat-left .icon {
  position: absolute;
  left: -80px;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.balloon-chat-left::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #e0edff;
}
</style>

アイコン画像のサイズに応じてmarginの値を調整し、三角形の位置も適切に配置します。右側から話す吹き出しを作る場合は、margin-rightとright方向のborderを使用します。

影付きの吹き出し

影付きの吹き出しは、box-shadowプロパティを使用することによって、立体感を演出できます。見出しやポイントを強調したい部分に使用すると効果的です。

影の付け方には、以下の2種類があります。

<!-- くっきりした影 -->
<div class="balloon-shadow-solid">くっきり影付き</div>

<style>
.balloon-shadow-solid {
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  border-radius: 10px;
  box-shadow: 6px 6px 0px 0px #318c30;
}

.balloon-shadow-solid::before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #bdffad;
}
</style>

<!-- ぼかした影 -->
<div class="balloon-shadow-blur">ぼかし影付き</div>

<style>
.balloon-shadow-blur {
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px #a7a7a7;
}

.balloon-shadow-blur::before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #bdffad;
}
</style>

box-shadowの最初の2つの値で影の位置を、3つ目の値でぼかしの強さを、4つ目の値で影の広がりを調整できます。用途に応じて使い分けることで、デザインの幅が広がります。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

• 「Pythonマスター講座」

  

• 「ChatGPT基礎講座」

  

CSSで吹き出しを作成する方法について解説してきましたが、コードを一から書くのは面倒だと感じた方もいらっしゃると思います。吹き出しのCSSジェネレーターを使用すれば、視覚的に調整しながら簡単にコードを生成できます。

代表的なCSSジェネレーターには、以下3つのサイトが挙げられます。

CSSジェネレータで作るのも面倒な方向けに、吹き出しのサンプルを26種類ご用意しました。コピペだけで吹き出しを実装したい方は、ぜひご活用ください。

普通の吹き出し

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>上にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}

/* beforeで三角を表現 */
.balloon::before {
  content: '';
  position: absolute;
  left: 20px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff3ad;
  border-left: 15px solid transparent;
}

アイコンを右に表示

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>右にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}

/* アイコンを右に表示 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

アイコンを下に表示

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>下にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}

/* アイコンを下に表示 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #fff3ad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

アイコンを左に表示

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>左にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}

/* アイコンを左に表示 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

横幅を自動変更

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>文字数に合わせて横幅を自動で変更
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
  display: inline-block; /* 横幅を自動で変更 */
}

/* beforeで三角を表現 */
.balloon::before {
  content: '';
  position: absolute;
  left: 20px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff3ad;
  border-left: 15px solid transparent;
}

枠線付きの吹き出し（上にアイコン）

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - 枠線
  <br>上にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
}

/* beforeで枠線の三角を表現 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ca8888;
  border-left: 15px solid transparent;
}

/* afterで本体の三角を表現 */
.balloon::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -12px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ffadad;
  border-left: 15px solid transparent;
}

枠線付きの吹き出し（右にアイコン）

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - 枠線
  <br>右にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
}

/* アイコンを右に表示 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -12px;
  top: 20px;
  border-left: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

枠線付きの吹き出し（下にアイコン）

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - 枠線
  <br>下にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
}

/* アイコンを下に表示 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #ca8888;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

.balloon::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -12px;
  border-top: 15px solid #ffadad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

枠線付きの吹き出し（左にアイコン）

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - 枠線
  <br>左にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
}

/* アイコンを左に表示 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

角丸の吹き出し（普通）

<!-- HTML -->
<div class="balloon1">
  CSSだけで吹き出しをつくる
  <br>角丸もOK
</div>

/* CSS */
/* 吹き出し本体 - 普通の吹き出し */
.balloon1 {
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
  border-radius: 10px; /* 角丸を指定 */
}

/* 三角アイコン - 普通の吹き出し */
.balloon1::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

角丸の吹き出し（枠線付き）

<!-- HTML -->
<div class="balloon2">
  CSSだけで吹き出しをつくる - 枠線
  <br>角丸もOK
</div>

/* CSS */
/* 吹き出し本体 - 枠線付きの吹き出し */
.balloon2 {
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
  border-radius: 10px; /* 角丸を指定 */
}

/* 三角アイコン - 枠線付きの吹き出し */
.balloon2::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon2::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

三角アイコンを左右の中心に表示

<!-- HTML -->
<div class="balloon1">
  CSSだけで吹き出しをつくる
  <br>アイコンを左右の中心へ配置
</div>

/* CSS */
/* 吹き出し本体 - 左右の中心 */
.balloon1 {
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}

/* 三角アイコン - 左右の中心 */
.balloon1::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #fff3ad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

【PR】『Python』を学べる企業・個人向けのプログラミングコース

• 「Python基礎・実践研修」

  

• 「オーダーメイドコース」

  

三角アイコンを上下の中心に表示

<!-- HTML -->
<div class="balloon2">
  CSSだけで吹き出しをつくる
  <br>アイコンを上下の中心へ配置
  <br>アイコンを上下の中心へ配置
</div>

/* CSS */
/* 吹き出し本体 - 上下の中心 */
.balloon2 {
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}

/* 三角アイコン - 上下の中心 */
.balloon2::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 50%;
  margin-top: -15px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

会話風の吹き出し（左に画像）

<!-- HTML -->
<div class="balloon1">
  <div class="icon">
    <!-- ●ここに画像を挿入● -->
  </div>
  CSSだけで吹き出しをつくる - 会話風
  <br>左に画像
</div>

/* CSS */
/* 吹き出し本体 */
.balloon1 {
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background-color: #0888ff;
  margin-left: 110px; /* 左に余白を設ける */
}

/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon {
  position: absolute;
  left: -110px;
  top: 0;
}

/* 三角アイコン */
.balloon1::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #0888ff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

会話風の吹き出し（右に画像）

<!-- HTML -->
<div class="balloon2">
  <div class="icon">
    <!-- ●ここに画像を挿入● -->
  </div>
  CSSだけで吹き出しをつくる - 会話風
  <br>右に画像
</div>

/* CSS */
/* 吹き出し本体 */
.balloon2 {
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background-color: #0888ff;
  margin-right: 110px; /* 右に余白を設ける */
}

/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon {
  position: absolute;
  right: -110px;
  top: 0;
}

/* 三角アイコン */
.balloon2::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #0888ff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

影付きの吹き出し（くっきりした影）

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - 影付き
  <br>くっきりした影
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  border-radius: 10px;
  box-shadow: 6px 6px 0px 0px #318c30; /* 吹き出し本体の影 */
}

/* 三角アイコン */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 27px;
  bottom: -18px;
  border-top: 15px solid #318c30;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

/* 三角アイコンの影 */
.balloon::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #bdffad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

影付きの吹き出し（ほんわかした影）

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - 影付き
  <br>ほんわかした影
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  box-shadow: 0px 0px 10px 0px #a7a7a7; /* 吹き出し本体の影 */
}

/* 三角アイコン */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #bdffad;
  border-left: 15px solid transparent;
}

マウスオーバーで表示

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - マウスオーバーで表示
  <br>上にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #ecadff;
}

/* 三角アイコン */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  transition: all .2s ease;
  left: 20px;
  top: 0px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ecadff;
  border-left: 15px solid transparent;
}

/* ホバー時に三角アイコンの位置を変える */
.balloon:hover::before {
  top: -15px;
}

まん丸吹き出し（CHECK）

<!-- HTML -->
<div class="balloon1">
  CHECK
</div>

/* CSS */
/* CHECK */
.balloon1 {
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}

.balloon1::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 2px;
  bottom: 2px;
  border-right: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}

まん丸吹き出し（POINT）

<!-- HTML -->
<div class="balloon2">
  POINT
</div>

/* CSS */
/* POINT */
.balloon2 {
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}

.balloon2::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  bottom: 2px;
  border-left: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}

まん丸吹き出し（LOOK）

<!-- HTML -->
<div class="balloon3">
  LOOK
</div>

/* CSS */
/* LOOK */
.balloon3 {
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}

.balloon3::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 2px;
  top: 2px;
  border-right: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}

まん丸吹き出し（GOOD）

<!-- HTML -->
<div class="balloon4">
  GOOD
</div>

/* CSS */
/* GOOD */
.balloon4 {
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}

.balloon4::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  top: 2px;
  border-left: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}

心の声

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - 心の中
  <br>心の中で思ってることなど
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #ade0ff;
  border-radius: 30px;
}

/* 大きい丸 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -35px;
  bottom: 15px;
  width: 30px;
  height: 30px;
}

/* 小さい丸 */
.balloon::after {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -55px;
  bottom: 10px;
  width: 15px;
  height: 15px;
}

曲がったアイコン

<!-- HTML -->
<div class="balloon">
  CSSだけで吹き出しをつくる - 曲がったアイコン
  <br>左上にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  background-color: #107b5e;
  color: #ffffff;
  border-radius: 10px;
}

/* 色付きの半円 */
.balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 20px;
  top: -15px;
  border-left: 20px solid #107b5e;
  border-top: 20px solid #107b5e;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

/* 白い半円 */
.balloon::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;
}

グラデーション（上にアイコン）

<!-- HTML -->
<div class="balloon1">
  CSSだけで吹き出しをつくる - グラデーション
  <br>上にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon1 {
  position: relative;
  padding: 20px;
  background: linear-gradient(to bottom, #b3dced 0%, #29b8e5 100%);
  color: #ffffff;
}

/* グラデーションの開始の色に合わせた三角アイコン */
.balloon1::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #b3dced;
  border-left: 15px solid transparent;
}

グラデーション（下にアイコン）

<!-- HTML -->
<div class="balloon2">
  CSSだけで吹き出しをつくる - グラデーション
  <br>下にアイコン
</div>

/* CSS */
/* 吹き出し本体 */
.balloon2 {
  position: relative;
  padding: 20px;
  background: linear-gradient(to bottom, #b3dced 0%, #29b8e5 100%);
  color: #ffffff;
}

/* グラデーションの終了の色に合わせた三角アイコン */
.balloon2::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #29b8e5;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  Photoshopの無料筆ブラシをダウンロードする方法やおすすめを紹介
• 
  KeynoteとPowerPointの違いや変換方法などから徹底比較
• 
  php.iniファイルはどこにある？OS別に設定ファイルの場所を確認する方法
• 
  イラレ(Illustrator)の遠近グリッドの使い方を簡単に解説
• 
  HTMLで&quotが文字化けする原因と解決方法を解説
• 
  Vimのコマンドの使い方や基本的な操作方法を解説
• 
  PHPのceil関数やfloor関数で小数点を切り上げ・切り捨てする方法
• 
  Pythonのコードはどこに書く？初心者におすすめの場所と実行する手順を解説
• 
  Photoshop(フォトショップ)のクリッピングパスとは？切り抜き方法などを詳しく解説
• 
  PHPのmb_convert_kanaで全角・半角の変換をする方法

ITやプログラミングに関するニュース

• 
  BICHONが名古屋で名刺交換術セミナーを開催、初対面で記憶に残る秘訣を伝授
• 
  株式会社スーツが事業承継ウェビナーを開催、中小企業のリアルな経営について解説
• 
  CBTソリューションズが無料ウェビナー開催、日本アクセスが語る人材育成DX事例を紹介
• 
  株式会社WeBridgeがサロンオーナー向けウェビナーを開催、Googleマップ集客の秘訣を解説
• 
  株式会社M&Aナビがウェビナー開催、吸血型M&Aの詐欺的手口と構造的背景を解説
• 
  株式会社KAENがAI採用ウェビナーを開催、効率的なスカウトで理想の人材獲得を支援
• 
  株式会社セキドとスペースワンが福島でドローンセミナーを共催、測量や災害対応の最新機体を実演
• 
  日本計画研究所がセミナー開催、東北地域のデータセンターの適地性と事業機会を解説
• 
  カウンターワークスとSansanが共同ウェビナー開催、商業施設の契約DXの最前線を解説
• 
  ビースタイルグループが生成AIサミットVol.6登壇、2025年のAI最新動向を解説