HTML・CSSでつくるおしゃれな吹き出しデザイン12選

2022/10/82023/2/22

ブログ記事などでよく見かける吹き出しデザイン。吹き出しを使うことで文章のテンポに緩急を付けることができるだけでなく、キャラクターなどと組み合わせればそのサイトの独自性を出すことも可能です。カラー調整対応＆コピペだけで完成する本ジェネレーターを使用して、ぜひご自身のサイトに取り入れてみてください。

シンプルな吹き出し

上向き

背景色：#e0efff
文字色：#333333

単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。

<div class="balloon-002">
    単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
</div>

.balloon-002 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin-top: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #e0efff;
    color: #333333;
}

.balloon-002::before {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 15px;
    background-color: #e0efff;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

下向き

背景色：#e0efff
文字色：#333333

単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。

<div class="balloon-001">
    単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
</div>

.balloon-001 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin-bottom: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #e0efff;
    color: #333333;
}

.balloon-001::before {
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-color: #e0efff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

右向き

背景色：#e0efff
文字色：#333333

単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。

<div class="balloon-003">
    単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
</div>

.balloon-003 {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 300px;
    margin-left: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #e0efff;
    color: #333333;
}

.balloon-003::before {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    background-color: #e0efff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

左向き

背景色：#e0efff
文字色：#333333

単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。

<div class="balloon-004">
    単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
</div>

.balloon-004 {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 300px;
    margin-left: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #e0efff;
    color: #333333;
}

.balloon-004::before {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color: #e0efff;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}

枠線ありの吹き出し

上向き

枠線の色：#2589d0
文字色：#333333

枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。

<div class="balloon-006">
    枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
</div>

.balloon-006 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin-top: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.balloon-006::before,
.balloon-006::after {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

.balloon-006::before {
    background-color: #2589d0;
}

.balloon-006::after {
    top: -11px;
    background-color: #fff;
}

下向き

枠線の色：#2589d0
文字色：#333333

枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。

<div class="balloon-005">
    枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
</div>

.balloon-005 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin-bottom: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.balloon-005::before,
.balloon-005::after {
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.balloon-005::before {
    background-color: #2589d0;
}

.balloon-005::after {
    bottom: -11px;
    background-color: #fff;
}

右向き

枠線の色：#2589d0
文字色：#333333

枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。

<div class="balloon-007">
    枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
</div>

.balloon-007 {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 300px;
    margin-right: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.balloon-007::before,
.balloon-007::after {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

.balloon-007::before {
    background-color: #2589d0;
}

.balloon-007::after {
    right: -11px;
    background-color: #fff;
}

左向き

枠線の色：#2589d0
文字色：#333333

枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。

<div class="balloon-008">
    枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
</div>

.balloon-008 {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 300px;
    margin-left: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.balloon-008::before,
.balloon-008::after {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}

.balloon-008::before {
    background-color: #2589d0;
}

.balloon-008::after {
    left: -11px;
    background-color: #fff;
}

会話風の吹き出し

左向き

吹き出しの色：#e0efff
アイコン枠線の色：#e6edf3
文字色：#333333

これは会話風の吹き出しです。お好きなアイコン画像を指定できます。

<div class="balloon-009">
    <!-- お好きなアイコン画像を指定してください -->
    <img src="/html-maker/img/op-icon-padding.svg" alt="" loading="lazy" decoding="async"/>
    <p>これは会話風の吹き出しです。お好きなアイコン画像を指定できます。</p>
</div>

.balloon-009 {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.balloon-009 img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #e6edf3;
    border-radius: 50%;
}

.balloon-009 p {
    position: relative;
    max-width: 300px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #e0efff;
    color: #333333;
}

.balloon-009 p::before {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color: #e0efff;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}

右向き

吹き出しの色：#e0efff
アイコン枠線の色：#e6edf3
文字色：#333333

これは会話風の吹き出しです。お好きなアイコン画像を指定できます。

<div class="balloon-010">
    <p>これは会話風の吹き出しです。お好きなアイコン画像を指定できます。</p>
    <!-- お好きなアイコン画像を指定してください -->
    <img src="/html-maker/img/op-icon-padding.svg" alt="" loading="lazy" decoding="async"/>
</div>

.balloon-010 {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.balloon-010 img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #e6edf3;
    border-radius: 50%;
}

.balloon-010 p {
    position: relative;
    max-width: 300px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #e0efff;
    color: #333333;
}

.balloon-010 p::before {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    background-color: #e0efff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

LINE風

右側のアイコンなしあり

これはLINE風の吹き出しです。

使い所こそ限られますが、遊び心のある可愛らしいデザインになります。

LINEのチャットを再現した吹き出しブロック。使い所こそ限られますが、遊び心のある可愛らしいデザインになります。

<div class="balloon-012">
    <div class="balloon-012__section">
        <!-- お好きなアイコン画像を指定してください -->
        <img class="balloon-012__img" src="/html-maker/img/op-icon-padding.svg" alt="" width="45" height="45"
             loading="lazy" decoding="async"/>
        <p class="balloon-012__p left">これはLINE風の吹き出しです。</p>
    </div>
    <div class="balloon-012__section">
        <p class="balloon-012__p right">使い所こそ限られますが、遊び心のある可愛らしいデザインになります。</p>
    </div>
</div>

.balloon-012 {
    display: grid;
    gap: 1em 0;
    padding: 25px 15px;
    background-color: #769ece;
}

.balloon-012__section {
    display: flex;
    align-items: center;
    gap: 0 15px;
}

.balloon-012__img {
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
}

.balloon-012__p {
    display: inline-block;
    position: relative;
    max-width: 80%;
    margin: 0;
    padding: .4em .8em;
    border-radius: 20px;
    color: #333;
    font-size: .9em;
}

.balloon-012__p.left {
    background-color: #fff;
}

.balloon-012__p.right {
    background-color: #30e852;
    margin: 0 10px 0 auto;
}

.balloon-012__p::before {
    position: absolute;
    top: -15px;
    width: 20px;
    height: 30px;
    content: '';
}

.balloon-012__p.left::before {
    left: -10px;
    border-radius: 0 0 0 15px;
    box-shadow: -3px -15px 0 -7px white inset;
}

.balloon-012__p.right::before {
    right: -10px;
    border-radius: 0 0 15px 0;
    box-shadow: 3px -15px 0 -7px #30e852 inset;
}

その他の吹き出し

画像+補足

枠線の色：#d6dde3

ここに文章を入れます。ここに文章を入れます。ここに文章を入れます。

画像の横に吹き出しを添えてみました。画像を元に手順を説明する際などにとても効果的なデザインです。ちなみにモバイルの場合は画像の下に吹き出しが表示されます。

<div class="balloon-013">
    <div class="balloon-013__img-wrap">
        <!-- お好きな画像を指定してください -->
        <img class="balloon-013__img" src="/html-maker/img/op-pc.svg" alt="" width="320" height="180"
             loading="lazy" decoding="async"/>
    </div>
    <p class="balloon-013__text">ここに文章を入れます。ここに文章を入れます。ここに文章を入れます。</p>
</div>

.balloon-013__img-wrap {
    max-width: 100%;
}

.balloon-013__img {
    width: 100%;
    height: auto;
}

.balloon-013__text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: .7em;
    border: 3px solid #d6dde3;
    border-radius: 10px;
    font-size: .95em;
}

.balloon-013__text::before,
.balloon-013__text::after {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

.balloon-013__text::before {
    background-color: #d6dde3;
}

.balloon-013__text::after {
    top: -11px;
    background-color: #fff;
}

@media only screen and (min-width: 521px) {
    .balloon-013 {
        display: flex;
        align-items: center;
        gap: 0 15px;
    }

    .balloon-013__img-wrap,
    .balloon-013__text {
        flex-basis: 50%;
    }

    .balloon-013__text::before,
    .balloon-013__text::after {
        top: unset;
        left: -15px;
        width: 15px;
        height: 30px;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }

    .balloon-013__text::after {
        top: unset;
        left: -11px;
    }
}