スマートフォンのモック
上向き
下向き
右向き

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

  • HTML
  • CSS
  • カラー調整対応
  • レスポンシブ対応

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

シンプルな吹き出し

シンプルな吹き出しの上向きver

上向き

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1
デザインを調整する
単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
step2
HTMLをコピペする
HTML
<div class="balloon-002">
    単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
</div>
step3
CSSをコピペする
CSS
.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: '';
}
シンプルな吹き出しの下向きver

下向き

step1
デザインを調整する
単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
step2
HTMLをコピペする
HTML
<div class="balloon-001">
    単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
</div>
step3
CSSをコピペする
CSS
.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: '';
}
シンプルな吹き出しの右向きver

右向き

step1
デザインを調整する
単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
step2
HTMLをコピペする
HTML
<div class="balloon-003">
    単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
</div>
step3
CSSをコピペする
CSS
.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: '';
}
シンプルな吹き出しの左向きver

左向き

step1
デザインを調整する
単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
step2
HTMLをコピペする
HTML
<div class="balloon-004">
    単色のシンプルな吹き出し。背景色を変えることで、どんなサイトにも馴染ませることができます。
</div>
step3
CSSをコピペする
CSS
.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: '';
}

枠線ありの吹き出し

枠線ありの吹き出しの上向きver

上向き

step1
デザインを調整する
枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
step2
HTMLをコピペする
HTML
<div class="balloon-006">
    枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
</div>
step3
CSSをコピペする
CSS
.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;
}
枠線ありの吹き出しの下向きver

下向き

step1
デザインを調整する
枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
step2
HTMLをコピペする
HTML
<div class="balloon-005">
    枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
</div>
step3
CSSをコピペする
CSS
.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;
}
枠線ありの吹き出しの右向きver

右向き

step1
デザインを調整する
枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
step2
HTMLをコピペする
HTML
<div class="balloon-007">
    枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
</div>
step3
CSSをコピペする
CSS
.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;
}
枠線ありの吹き出しの左向きver

左向き

step1
デザインを調整する
枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
step2
HTMLをコピペする
HTML
<div class="balloon-008">
    枠線付きのシンプルな吹き出し。枠線をコントラストの強い色にすると、より目立たせることができます。
</div>
step3
CSSをコピペする
CSS
.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;
}

会話風の吹き出し

会話風の吹き出しの左向きver

左向き

step1
デザインを調整する

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

step2
HTMLをコピペする
HTML
<div class="balloon-009">
    <!-- お好きなアイコン画像を指定してください -->
    <img src="/html-maker/img/janitor-icon-padding.svg" alt="" loading="lazy" decoding="async"/>
    <p>これは会話風の吹き出しです。お好きなアイコン画像を指定できます。</p>
</div>
step3
CSSをコピペする
CSS
.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: '';
}
会話風の吹き出しの右向きver

右向き

step1
デザインを調整する

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

step2
HTMLをコピペする
HTML
<div class="balloon-010">
    <p>これは会話風の吹き出しです。お好きなアイコン画像を指定できます。</p>
    <!-- お好きなアイコン画像を指定してください -->
    <img src="../../../img/janitor-icon-padding.svg" alt="" loading="lazy" decoding="async"/>
</div>
step3
CSSをコピペする
CSS
.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: '';
}