CSS擬似要素で作る！初心者でも簡単な吹き出しデザインの実装ガイド

擬似要素を使った吹き出しデザインの実装方法

先生と生徒の会話形式で理解しよう

生徒

「ブログなどでよく見る、三角形がついた『吹き出し』のようなデザインはどうやって作るんですか？」

先生

「CSSの『擬似要素（ぎじようそ）』という機能を使うと、HTMLを汚さずに綺麗な吹き出しを作ることができますよ。」

生徒

「擬似要素……なんだか難しそうですが、私にもできますか？」

先生

「基本さえわかれば大丈夫です！四角い箱に、CSSで作った小さな三角形をくっつけるイメージですね。具体的な作り方を見ていきましょう！」

1. 吹き出しデザインの仕組みを理解しよう

Webサイトのデザインにおいて、メッセージを強調したり、キャラクターのセリフを表現したりするときに欠かせないのが吹き出しです。一見すると複雑な形に見えますが、実は「文字が入る四角い箱」と「しっぽの部分の三角形」という二つのパーツを組み合わせてできています。

プログラミング未経験の方に向けて例えると、これは「付箋（ふせん）」に「小さな三角の切れ端」を糊でペタッと貼るような作業です。HTMLという土台に四角い箱を作り、そこにCSSという魔法の指示書を使って、後から三角形を付け足します。この「後からパーツを付け足す機能」のことを、専門用語で擬似要素（ぎじようそ）と呼びます。

2. 擬似要素beforeとafterとは何か

CSSには、特定の要素の直前や直後に、仮想的なパーツを作り出す機能があります。これが ::before（ビフォー） と ::after（アフター） です。これらはHTMLファイルの中に直接書かなくても、CSS側からの指示だけで「そこに新しい図形を出しなさい」と命令できる便利な仕組みです。

吹き出しを作る場合、本文の入った箱に対して ::before や ::after を使い、しっぽとなる三角形を作成します。このとき、必ずセットで使うのが content という命令です。これを書かないと、パーツは画面に現れません。パソコンを触ったことがない方は、content は「パーツを実体化させるための呪文」だと思ってください。中身が空っぽでも、この呪文を唱えることで透明な粘土が用意され、それを三角形にこねていくイメージです。

3. CSSだけで三角形を作る不思議なテクニック

「画像を使わずにどうやって三角形を作るの？」と疑問に思うかもしれません。実はCSSでは、四角い枠線の厚みを極端に太くし、一部の色以外を透明にすることで、鋭い三角形を作り出すことができます。これを ボーダー（枠線） のテクニックと呼びます。

四角形の上下左右に別々の色の枠線を塗ると、そのつなぎ目は斜めになりますよね。この性質を利用して、三方の色を消し、一方だけに色を残すと綺麗な三角形が残ります。この手法はWebデザインの世界では非常に一般的で、ボタンの矢印や吹き出しのしっぽを作るのに最適です。まずはこの基本の三角形を表示させてみましょう。


<style>
    .balloon-base {
        position: relative;
        display: inline-block;
        padding: 15px;
        background: #007bff;
        color: white;
        border-radius: 10px;
    }

    /* 擬似要素で三角形を作ります */
    .balloon-base::after {
        content: "";
        position: absolute;
        top: 100%; /* 下側に配置 */
        left: 20px;
        border: 15px solid transparent; /* 全てを透明に */
        border-top-color: #007bff; /* 上側だけ色を付ける */
    }
</style>

<div class="p-5">
    <div class="balloon-base">
        こんにちは！吹き出しのテストです。
    </div>
</div>

ブラウザ表示

4. 配置の鍵となるpositionプロパティの解説

吹き出しのしっぽを好きな場所に固定するには、position（ポジション） という設定が不可欠です。これは図形を配置するためのルールを決めるものです。親となる四角い箱に position: relative;（相対位置）を設定し、追加する三角形に position: absolute;（絶対位置）を設定します。

例えるなら、四角い箱を「親亀」、三角形を「子亀」とする親子関係のようなものです。親亀に relative という印をつけることで、「子亀はこの親亀の背中の上が基準だよ」と教えてあげるのです。これを設定しないと、三角形は画面のどこか遠くへ飛んでいってしまいます。top（上）や left（左）といった数値を変えることで、しっぽの位置を自由自在に動かすことができます。

5. 横から飛び出す吹き出しのデザイン例

下向きのしっぽだけでなく、横から飛び出す吹き出しもよく使われます。横向きにする場合は、三角形を作るボーダーの向きを調整します。具体的には、左側からしっぽを出したいなら border-right-color を使って右向きの三角形を作ります。

横向きの吹き出しは、LINEのようなチャット形式の画面や、人物のアイコン画像の横にセリフを添える際に非常に役立ちます。余白や色のバランスを調整することで、モダンで清潔感のあるデザインになります。ここでは少し優しい色合いの横向き吹き出しを作ってみましょう。


<style>
    .chat-bubble {
        position: relative;
        background: #f8f9fa;
        border: 2px solid #dee2e6;
        padding: 10px 20px;
        border-radius: 20px;
        margin-left: 20px;
        display: inline-block;
    }

    .chat-bubble::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -20px; /* 箱の外側に配置 */
        margin-top: -10px;
        border: 10px solid transparent;
        border-right-color: #dee2e6; /* 枠線と同じ色 */
    }

    .chat-bubble::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -17px;
        margin-top: -10px;
        border: 10px solid transparent;
        border-right-color: #f8f9fa; /* 中の色と同じ色で重ねる */
    }
</style>

<div class="p-5">
    <div class="chat-bubble">
        横向きの吹き出しもオシャレですね！
    </div>
</div>

ブラウザ表示

6. 枠線付きの吹き出しを綺麗に作るコツ

背景が塗りつぶされた吹き出しは簡単ですが、「枠線だけがある吹き出し」を作るときは少し工夫が必要です。なぜなら、擬似要素で作る三角形は一つの図形なので、そのままでは箱の枠線と繋がって見えないからです。

そこで使うのが、::before と ::after の二刀流です！一つ目の三角形（before）で「枠線と同じ色の少し大きな三角形」を作り、その上に二つ目の三角形（after）で「背景と同じ色の少し小さな三角形」をほんの少しずらして重ねます。こうすることで、あたかも枠線がしっぽの部分まで繋がっているように見える「騙し絵」のような仕組みが完成します。プロのWeb制作者もよく使う、非常に賢い手法です。

7. 文字量に合わせて伸び縮みする吹き出し

実際のWebサイトでは、吹き出しの中に入る文字の長さはバラバラです。どんなに長い文章が入っても、形が崩れないように設定するのがベストです。そのためには、幅（width）を固定せずに display: inline-block; や max-width（最大幅）という命令を使います。

これにより、短いセリフのときはコンパクトに、長い解説のときは画面の端まで自動で広がってくれる「柔軟な吹き出し」になります。パソコンでの見え方と、画面の小さなスマホでの見え方の両方を考慮することが、使いやすいサイト作りの第一歩です。どこまで広がって良いかを決める最大幅の設定は、読みやすさを守るための大切なガードレールになります。


<style>
    .flex-balloon {
        position: relative;
        background: #fff3cd;
        border: 1px solid #ffeeba;
        padding: 15px;
        border-radius: 8px;
        max-width: 300px; /* 最大の幅を決めておきます */
        display: inline-block;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }

    .flex-balloon::after {
        content: "";
        position: absolute;
        bottom: -10px;
        right: 20px;
        border-width: 10px 10px 0;
        border-style: solid;
        border-color: #fff3cd transparent;
    }
</style>

<div class="p-5">
    <div class="flex-balloon">
        文章が長くなっても大丈夫！自動で改行されて、吹き出しの形も綺麗に保たれます。これが柔軟な設計の力です。
    </div>
</div>

ブラウザ表示

8. 応用：さらに個性を出す吹き出しアレンジ

基本をマスターしたら、さらに自分らしさを加えてみましょう。例えば、影（box-shadow）をつけて浮かび上がらせたり、角の丸み（border-radius）を極端に大きくして丸い吹き出しにしたりすることもできます。また、しっぽの形を三角形ではなく、小さな円にするだけでも、ポップで可愛い印象に変わります。

最近の流行りでは、グラデーションをかけたり、少しだけ透明にしたりするデザインも人気です。CSSの数値を変えるだけで、無限のバリエーションが生まれます。最初から完璧を目指す必要はありません。色を変え、位置をずらし、少しずつ「これだ！」と思える形を探していく過程こそが、Webデザインの一番楽しい時間です。ぜひ、あなただけの素敵な吹き出しを作ってみてくださいね！

2026年最新スキルアップ・実践セミナー