CSSで吹き出しを作ろう｜サンプル付きで手を動かしながらわかる

2023.06.15

※本サイトにはプロモーション・広告が含まれています。

（最終更新日：2023年9月）

✔当記事は以下のような方に向けて書かれています

「css 吹き出しをどのように作成できるのか知りたい」
「css 吹き出しのコーディングテクニックが学びたい」
「具体的なcss 吹き出しの実例を参考にしたい」

✔当記事でお伝えする内容

  • css 吹き出しの基本概念
  • css 吹き出しのコーディング方法と応用技
  • 実例を交えたcss 吹き出しの説明

当記事では、css 吹き出しの基本から応用に至るまで、具体的な実例を交えながら丁寧に解説していきます。

ぜひ最後までご覧ください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker
¥2,640 (2024/05/21 14:24:38時点 Amazon調べ-詳細)

基本的な吹き出しの種類

こちらでは、基本的な吹き出しの種類について見ていきましょう。

吹き出しはデザインにおいて重要な要素であり、その形状によって印象が大きく変わります。

  • 四角い吹き出し
  • 円形の吹き出し
  • 角丸の吹き出し

四角い吹き出し

四角い吹き出しは最もシンプルで一般的な形状で、直角の辺がはっきりとした印象を与えます。

特に公式な文章や、フォーマルな場面でよく使用されるものです。

以下のCSSコードは四角い吹き出しを生成します。

.bubble-square {
  position: relative;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
}

円形の吹き出し

円形の吹き出しは柔らかい印象を与え、親しみやすさを表現します。

アバターの吹き出しや、カジュアルなデザインで使用されることが多いです。

次のCSSコードは円形の吹き出しを生成します。

.bubble-circle {
  position: relative;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

角丸の吹き出し

角丸の吹き出しは四角い吹き出しと円形の吹き出しの中間で、優しさとフォーマルさを兼ね備えています。

一般的なウェブサイトやアプリで広く使用されています。

以下のCSSコードは角丸の吹き出しを生成します。

.bubble {
  position: relative;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}

吹き出しのデザインにアレンジを加える方法

次に、「吹き出しのデザインにアレンジを加える方法」について解説します。

基本形状をベースにして、さまざまなデザインを試すことで、より魅力的な吹き出しを作ることができます。

  • 枠線付きの吹き出しを作成
  • 考えごと風の吹き出し
  • 会話風の吹き出し（チャット風）
  • タイトルや見出し用の吹き出しデザイン

枠線付きの吹き出しを作成

枠線付きの吹き出しは、情報を強調したい場合や、コントラストを上げて可視性を高めるために使用します。

枠線の太さや色を調整することで、様々な表現が可能になります。

以下のCSSコードは枠線付きの吹き出しを生成します。

.bubble {
  position: relative;
  padding: 10px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 15px;
}

考えごと風の吹き出し

考えごと風の吹き出しは、キャラクターが考えていることを表現するために使用されます。

しっぽ部分が雲状になっていることが特徴です。

そのためには、CSSの疑似要素を使用して複数の円形を重ね合わせることで実現します。

/* 吹き出しのベーススタイル */
.balloon {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-size: 14px;
}

/* 雲状のしっぽ部分のスタイル */
.balloon::before,
.balloon::after,
.balloon .tail {
  content: '';
  position: absolute;
  background-color: #f5f5f5;
  border-radius: 50%;
}

/* 1つ目のしっぽ部分 */
.balloon::before {
  width: 20px;
  height: 20px;
  bottom: -10px;
  left: 15px;
}

/* 2つ目のしっぽ部分 */
.balloon::after {
  width: 25px;
  height: 25px;
  bottom: -12px;
  left: 35px;
}

/* 3つ目のしっぽ部分 */
.balloon .tail {
  width: 30px;
  height: 30px;
  bottom: -15px;
  left: 60px;
}

会話風の吹き出し（チャット風）

会話風の吹き出しは、SNSやチャットアプリでよく見かけるデザインです。

一つの吹き出しに一つのメッセージを配置し、それらを時間順に下に並べることで会話形式を表現します。

吹き出しの左右位置や背景色を変えることで、発言者を区別します。

/* コンテナ */
.chat-container {
  width: 400px;
  font-family: Arial, sans-serif;
}

/* 吹き出しのベーススタイル */
.message {
  position: relative;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  max-width: 70%;
  clear: both;
}

/* 右側（自分）の吹き出し */
.message.self {
  float: right;
  background-color: #4caf50; /* 緑色 */
  color: #ffffff;
}

.message.self::before {
  content: '';
  position: absolute;
  top: 5px;
  right: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 10px 5px 0;
  border-color: transparent #4caf50 transparent transparent;
}

/* 左側（相手）の吹き出し */
.message.other {
  float: left;
  background-color: #e0e0e0; /* グレー */
  color: #333333;
}

.message.other::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #e0e0e0;
}

HTMLはこちらです。

<div class="chat-container">
  <div class="message other">
    こんにちは！
  </div>
  
  <div class="message self">
    こんにちは、お元気ですか？
  </div>
  
  <div class="message other">
    元気ですよ！ありがとう。
  </div>
</div>

タイトルや見出し用の吹き出しデザイン

吹き出しは、タイトルや見出しを強調するためにも使用されます。

吹き出し自体が大きくし、テキストは吹き出しの中央に配置すると良いでしょう。

装飾的な要素を追加することもおすすめです。

このようなデザインは、ポップなデザインや子供向けのデザインによく使用されます。

/* 吹き出しのベーススタイル */
.title-balloon {
  position: relative;
  display: inline-block;
  padding: 20px 30px;
  background-color: #FFD700; /* ゴールド色 */
  color: #333333;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 吹き出しのしっぽ部分のスタイル */
.title-balloon::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #FFD700 transparent transparent transparent;
}

/* 装飾的な要素（星形） */
.title-balloon::before {
  content: '★';
  position: absolute;
  font-size: 30px;
  top: -15px;
  right: -15px;
  color: #FF4500; /* オレンジ色 */
}

HTMLです。

<div class="title-balloon">
  特別なタイトル
</div>

吹き出しの作成手順（実践編）

次に、「吹き出しの作成手順（実践編）」について詳しく説明します。

吹き出しの基本的な構造を理解した上で、自分だけのオリジナル吹き出しを作成する方法を学んでいきましょう。

  • CSSで吹き出し本体を作成する方法
  • CSSで吹き出しのしっぽを作成する方法
  • 枠線付きの吹き出しを作成する方法
  • 自分でオリジナルの吹き出しを作りましょう！

CSSで吹き出し本体を作成する方法

吹き出しの本体は、基本的にはひとつのdiv要素で構成されます。

背景色、ボーダー、パディング、ボーダーラディウスを設定することで、吹き出しの形状と色を定義しましょう。

  • 吹き出しの構成イメージ
  • 吹き出し本体の作成方法

吹き出しの構成イメージ

まず、吹き出しの構成を理解しましょう。

吹き出しは主に二つの部分で構成されています。

一つはメッセージを表示する「本体」、もう一つは吹き出しの発言源を示す「しっぽ」です。

吹き出し本体の作成方法

以下に、CSSを使って吹き出し本体を作成するための基本的なコードを示します。

.bubble {
  position: relative;
  padding: 15px;
  background: #f0f0f0;
  border-radius: 10px;
}

CSSで吹き出しのしっぽを作成する方法

吹き出しのしっぽは、CSSの疑似要素を用いて作成します。

疑似要素を使うことで、元の要素に追加的なデザインを加えることが可能になるのです。

/* 吹き出しのベーススタイル */
.balloon-with-tail {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  background-color: #e0e0e0; /* グレー色 */
  border-radius: 8px;
  font-size: 14px;
}

/* 吹き出しのしっぽ部分のスタイル（疑似要素を使用） */
.balloon-with-tail::before {
  content: ''; /* 空のコンテンツ */
  position: absolute;
  bottom: -10px;
  left: 15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #e0e0e0 transparent transparent transparent;
}

HTMLのサンプルです。

<div class="balloon-with-tail">
  これは吹き出しのテキストです。
</div>

枠線付きの吹き出しを作成する方法

しっぽ部分に枠線を追加する方法です。

/* 吹き出しのベーススタイル */
.balloon-with-bordered-tail {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  background-color: #e0e0e0; /* グレー色 */
  border: 1px solid #b0b0b0; /* 枠線 */
  border-radius: 8px;
  font-size: 14px;
}

/* 吹き出しの背景色のしっぽ部分のスタイル */
.balloon-with-bordered-tail::before {
  content: '';
  position: absolute;
  bottom: -11px; /* 1px分の枠線を考慮 */
  left: 15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 11px 0 11px; /* 1px分の枠線を考慮 */
  border-color: #e0e0e0 transparent transparent transparent;
}

/* 吹き出しの枠線のしっぽ部分のスタイル */
.balloon-with-bordered-tail::after {
  content: '';
  position: absolute;
  bottom: -12px; /* 2px分の枠線の外側 */
  left: 14px;   /* 1px分の枠線の左側を考慮 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px; /* 2px分の枠線を考慮 */
  border-color: #b0b0b0 transparent transparent transparent;
}

自分でオリジナルの吹き出しを作りましょう！

以上の基本的な手法を組み合わせることで、オリジナルの吹き出しを作れます。

色や形状、シャドウなどを自由に組み合わせて、自分だけの吹き出しを作りましょう。

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

CSSを使って三角形を作る方法もご覧ください。

吹き出しの「しっぽ」部分を作成する際に使用できます。

この方法はCSSのborderプロパティを特殊な方法で使用することで、三角形を描画できるのです。

/* 全ての三角形のベーススタイル */
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
}

/* 上向きの三角形 */
.triangle-up {
  border-width: 0 25px 50px 25px;
  border-color: transparent transparent #007bff transparent; /* 青色の三角形 */
}

/* 下向きの三角形 */
.triangle-down {
  border-width: 50px 25px 0 25px;
  border-color: #007bff transparent transparent transparent; /* 青色の三角形 */
}

/* 左向きの三角形 */
.triangle-left {
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #007bff; /* 青色の三角形 */
}

/* 右向きの三角形 */
.triangle-right {
  border-width: 25px 50px 25px 0;
  border-color: transparent #007bff transparent transparent; /* 青色の三角形 */
}

HTMLはこちらです。

<!-- 上向きの三角形 -->
<div class="triangle triangle-up"></div>

<!-- 下向きの三角形（例えば、吹き出しの「しっぽ」部分として） -->
<div class="triangle triangle-down"></div>

<!-- 左向きの三角形 -->
<div class="triangle triangle-left"></div>

<!-- 右向きの三角形 -->
<div class="triangle triangle-right"></div>

吹き出しのCSSジェネレーターを使う方法（参考）

最後に、手軽に吹き出しのCSSを生成する方法として、吹き出しのCSSジェネレーターを使う方法を紹介します。

これはオンライン上のツールで、ユーザーが吹き出しの形状や色、大きさなどのパラメータを設定すると、その設定に基づいたCSSコードを自動で生成してくれるもの。

初心者の方や、素早くプロトタイプを作りたい方には非常に便利なツールです。

まとめ

基本的な形状から始まり、自分だけのオリジナル吹き出しの作成方法までを順を追って解説しました。

これらの知識を活用して、ウェブサイトやアプリに個性的で魅力的な吹き出しを加えてみてください。

さらに深く学びたい方は、CSSの参考書を読むか、オンラインの教材を探してみましょう。

タイトルとURLをコピーしました