現役エンジニアがオススメするデスク周りの商品紹介

CSSコピペするだけ！吹き出しデザイン14選【色別サンプル19種】

18分

CSSコピペするだけ！吹き出しデザイン14選【色別サンプル19種】

SHARE

サイト内でもよく使う「吹き出し」の形のデザイン。

文章の途中で挟むことで見やすくなり、より分かりやすくなり、滞在時間も上昇すると言われています。

今回紹介すること

  • そもそも吹き出しってどうやって作るの？
  • 吹き出しのサンプルを色々知りたい！
  • 吹き出しの意外な使い方も見れたらうれしい

今回は、そんな吹き出しのデザインを14種、色別で19種紹介していきたいと思います！

吹き出しをブログ内で使う方法

使い方が分かっているという人は飛ばしてもらっても構いません。

紹介しているHTMLは記事中にそのまま貼り付け、CSSはstyle.cssなど、各ブログサービスのCSSを設定している場所に貼り付けましょう。

例えばWordPressなら、

編集する箇所
外観
テーマエディター
style.css

にCSSを貼り付けです。

はてぶでも、Amebaでもコピペだけで簡単に使用可能ですので、サクッと検索してやってみましょう！

また、ここで紹介している吹き出しは、大体下側のみに余白が少しあるだけです。

ブログ内で使用して、余白がもう少し欲しい・・・と思う方は、こちらの記事を参考に調節してみてください！

基本の吹き出し4つ

基本的な吹き出しを紹介していきます。

:beforeという疑似要素を使用して三角形をつくり、それをうまい具合に配置することで吹き出しの基本的なデザインを作ります。

吹き出し上側

HTML
<div class="balloon-top">
上側に吹き出し
</div>
CSS
.balloon-top{
  position: relative;
  padding: 20px;
  background-color: #b3e5fc;
  margin-bottom: 2em;
}

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

右側吹き出し

HTML
<div class="balloon-right">
右側に吹き出し
</div>
CSS
.balloon-right{
  position: relative;
  padding: 20px;
  background-color: #b3e5fc;
  margin-bottom: 2em;
  margin-right: 1em;
}

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

下側吹き出し

HTML
<div class="balloon-bottom">
下側に吹き出し
</div>
CSS
.balloon-bottom{
  position: relative;
  padding: 20px;
  background-color: #b3e5fc;
  margin-bottom: 2em;
}
.balloon-bottom::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #b3e5fc;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

左側吹き出し

HTML
<div class="balloon-left">
左側に吹き出し
</div>
CSS
.balloon-left{
  position: relative;
  padding: 20px;
  background-color: #b3e5fc;
  margin-bottom: 2em;
  margin-left: 1em;
}
.balloon-left::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #b3e5fc;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

基本の吹き出し―枠線付き4つ

枠線付きの吹き出しは、:beforeも:afterも使用します。

枠線付き吹き出しの作り方

画像は分かりやすいように色を多少変えていますが、サイズの違う三角形を2つ使用して、枠線のついた吹き出しに見せています。

上側枠線付き吹き出し

HTML
<div class="balloon-top-border">
枠線付き上側に吹き出し
</div>
CSS
.balloon-top-border{
  position: relative;
  padding: 20px;
  background-color: #dcedc8;
  border: 2px solid #81c784;
  margin-bottom: 2em;
}

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

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

右側枠線付き吹き出し

HTML
<div class="balloon-right-border">
枠線付き右側に吹き出し
</div>
CSS
.balloon-right-border{
  position: relative;
  padding: 20px;
  background-color: #dcedc8;
  border: 2px solid #81c784;
  margin-bottom: 2em;
  margin-right: 1em;
}

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

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

下側枠線付き吹き出し

HTML
<div class="balloon-bottom-border">
枠線付き下側に吹き出し
</div>
CSS
.balloon-bottom-border{
  position: relative;
  padding: 20px;
  background-color: #dcedc8;
  border: 2px solid #81c784;
  margin-bottom: 2em;
}

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

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

左側枠線付き吹き出し

HTML
<div class="balloon-left-border">
枠線付き左側に吹き出し
</div>
CSS
.balloon-left-border{
  position: relative;
  padding: 20px;
  background-color: #dcedc8;
  border: 2px solid #81c784;
  margin-bottom: 2em;
  margin-left: 1em;
}

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

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

吹き出しの角を丸める

吹き出しの角の部分を丸める方法は簡単です。

border-radius: 〇px;をCSSに追加するだけです。

サンプルを二つだけ紹介します！

角丸吹き出し1

HTML
<div class="balloon-top">
上側に吹き出し(角丸)
</div>
CSS
.balloon-top{
  position: relative;
  padding: 20px;
  background-color: #b3e5fc;
  margin-bottom: 2em;
  border-radius: 7px;
}

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

枠線付き吹き出し角丸

HTML
<div class="balloon-bottom-border">
枠線付き下側に吹き出し
</div>
CSS
.balloon-bottom-border{
  position: relative;
  padding: 20px;
  background-color: #dcedc8;
  border: 2px solid #81c784;
  margin-bottom: 2em;
  border-radius: 7px;
}

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

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

いずれも、一度紹介したCSSに1行足しただけです。
簡単にアレンジできるので、覚えておきましょう！

思っている風・考えている風吹き出し

何かを思っている風の吹き出しです。

ちょっと一言添えるときなどに使用しましょう！

囲い枠の使い方

思う風吹き出し青
HTML
<div class="balloon-think">
心の中で思ってることなどが入る
</div>
CSS
/* 吹き出し本体 */
.balloon-think{
  position: relative;
  padding: 20px;
  background-color: #ade0ff;
  border-radius: 30px;
  margin-left: 4em;
  margin-bottom: 2em;
}
/* 大きい丸 */
.balloon-think::before{
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -35px;
  bottom: 15px;
  width: 30px;
  height: 30px;
}
/* 小さい丸 */
.balloon-think::after{
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -55px;
  bottom: 10px;
  width: 15px;
  height: 15px;
}

影付きの吹き出し

影付きの吹き出しでは、:beforeで三角を、:afterで影の三角部分を作っています。

そのため、枠線付きで影付きを作るのは難易度が高くなります・・・。

影付き吹き出し黄
HTML
<div class="balloon-shadow">
影付きの吹き出し
</div>
CSS
/* 吹き出し本体 */
.balloon-shadow{
  position: relative;
  padding: 20px;
  background-color: #ffecb3;
  border-radius: 10px;
  box-shadow: 6px 6px 0px 0px #ffcc80;/*影*/
  margin-bottom: 2em;
}

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

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

お知らせに使う吹き出し

文字の左上に動く吹き出しがあればだれでも見てしまうものです。

吹き出しの角を丸くする、文字をPointなどに変えるなど、アレンジは自由自在です。

動く吹き出しオレンジ
HTML
<div class="article">
<div class="balloon-head move">New!</div>
新記事です！などの文字や画像などを挿入する
</div>
CSS
.article {
  position: relative;
  padding: 10px 5px;
  margin-top: 3em;
}

.balloon-head{
  position: absolute;
  top: -36px;
  width: 50px;
  margin: 0 auto 40px;
  padding: 5px;
  background: #ffb74d;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.balloon-head::after {
  content: '';
  border: 8px solid transparent;
  border-top-color: #ffb74d;
  position: absolute;
  bottom: -16px;
  left: 50%;
  margin-left: -8px;
}

.move {
  animation: 0.5s move infinite alternate linear;
}

@keyframes move {
  to { transform: transtateY(0); }
  from { transform: translateY(4px); }
}

画像に吹き出しを追加する

画像の横や、画像の下に吹き出しを追加します。

以下の記事を参考・多少改変しました。

参考 CSSコピペでOK！画像にサルワカ風の吹き出しを入れよう

そうです、これはサルワカさんが多用しているもので、画像を使って説明する際に、非常に分かりやすくなるため便利です。

画像は、600px×600pxを使用しました。
できるだけ正方形に近い画像の方がいいのかなと思います。

サルワカ風吹き出し

HTML
<div class="fukidesc">
<div class="fukiimg">
<p><img src="ここに画像のURL" alt="" width="600" height="600" /></p>
</div>
<div class="fukicell">
<div class="fukip">
<p>吹き出しの中身</p>
</div>
</div>
</div>
CSS
.fukidesc {
  display: table;
  box-sizing: border-box;
  margin-bottom: 2em;
  width: 100%;
}

.fukicell {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  padding-right: 10px;
}

.fukidesc .fukibig {
  width: 62%;
}

.fukiimg {
  display: table-cell;
  vertical-align: middle;
  width: 31%;
  padding-right: 10px;
}

.fukiimg img {
  width: 100%;
  height: auto;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 6px rgba(0, 0, 0, 0.15);
}

.fukicell {
  display: table-cell;
  vertical-align: middle;
  width: 49%;
  position: relative;
}

.fukip {
  border: #ccc solid 3px;
  position: relative;
  background: white;
  padding: 12px 10px;
  border-radius: 13px;
}

.fukip:before {
  border-right: 23px solid #ccc;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  top: 30%;
  content: '';
  position: absolute;
  left: -23px;
}

.fukip p {
  margin: 0;
}

.fukip:after {
  content: '';
  position: absolute;
  border-right: 24px solid #fff;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  top: 30%;
  left: -17px;
}

@media screen and (max-width: 600px) {
  .fukicell, .fukidesc, .fukip, .fukiimg,
  .post-content .codefuki .codebig, .fukiimg img,
  .post-content .fukidesc .fukisml,
  .post-content .fukidesc .fukibig {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .fukiimg {
    padding: 10px 25px;
  }

  .fukiimg {
    max-width: 600px;
    text-align: center;
  }

  .fukip:before {
    border-bottom: 20px solid silver;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -40px;
    content: '';
    position: absolute;
    left: 40%;
  }

  .fukip:after {
    border-bottom: 20px solid white;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -37px;
    content: '';
    position: absolute;
    left: 40%;
  }

  .fukicell {
    padding-top: 0px;
    padding-right: 0;
  }

  .fukip {
    border-radius: 6px;
    background: white;
    margin-top: -14px;
    border: solid 2px silver;
  }
}

吹き出しのデザインCSSまとめ

今回は、吹き出しについてサンプルをまとめてみました！

吹き出しは、基本的に囲み枠＋三角形でできるため、以下の囲み枠のデザインサンプル例を元に三角形を組み合わせれば、自分好みのオリジナルなものも作ることができます！

ぜひ以下の記事を参考にオリジナルの吹き出しを作ってみたり、より見やすい記事づくりをしていきましょう！

CSSコピペするだけ！ボックスデザイン（囲み枠）25選【色別サンプル62種】 CSSコピペするだけ！ボックスデザイン（囲み枠）25選【色別サンプル62種】 CSSをコピペするだけで完成するボックスデザイン(囲み枠)を25種類用意しました。色違いで全部で62種あるので、どれか1つはあなたのサイトに合う囲い枠が見つかります。色々な枠のデザインを多用して見やすいブログを目指しましょう。
他にも見出しのデザインをまとめた記事もあります
CSSコピペするだけ！今すぐ使える見出しデザイン例21選【色別サンプル44種】 CSSコピペするだけ！今すぐ使える見出しデザイン例21選【色別サンプル44種】 見出しのCSSを21種類集めました。色違いで全44色分あるので、気に入った物が見つかるはず。見出しのHTML・CSSを変更して、あなたらしいブログに近づけましょう。
WordPress向けカスタマイズ集はこちらから
【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】 【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】 今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。

前の記事

SANGO+PORIPUにテーマを乗り換えで大変だった点【10…

次の記事

【SANGO】ブログの回遊率を改善！カテゴリ別人気記事…
【SANGO】ブログの回遊率を改善！カテゴリ別人気記事&デザイン変更