CSSで吹き出しデザイン|初心者向けパターン2例 AMPでも検証済み!

CSSを使った「吹き出し」の作り方を解説します。特に画像は使わず、HTMLとCSSだけで可能です。このWEBサイトでも、PC、スマホ、タブレット、AMPと全て問題なく表示できています。

吹き出しとは?

吹き出しとは以下のようなものです。

吹き出しのサンプルです!

CSSだけで吹き出しを作るには?

この吹き出しを作ってみましょう!

HTMLにDIVタグとクラス名を追加して作成します。使うHTMLとCSSを載せます。

ソース

吹き出しのHTML
<div class="hukidashi1"><p>吹き出しのサンプルです!</p></div>
吹き出しのCSS

.hukidashi1{
border:1px solid #e0edff; /* 囲み枠の太さ、種類、色*/
background: #e0edff; /* 塗りつぶしの色*/
border-radius:5px; /* 角の丸みの程度*/
position:relative;
padding: 10px; /* 吹き出しの囲み枠と文字列との余白*/
margin-bottom: 14px;
margin-left:25px;/* 吹き出し外側 左の余白*/
margin-right:25px;/* 吹き出し外側 右の余白*/
}
.hukidashi1:before {
border:10px solid transparent;
border-top-color:#e0edff; /* 塗りつぶしの色*/
border-bottom-width:0;
bottom:-9px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}
.hukidashi1:after {
border:10px solid transparent;
border-top-color:#e0edff; /* 囲み枠の色*/
border-bottom-width:0;
bottom:-10px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}
.hukidashi1 p {
margin: 0;
padding: 0;
line-height: 1.4em; /* 文字列の行間*/
font-size: 1em; /* フォントサイズ*/
}

解説

 吹き出しにしたい文字列◯◯◯◯があった場合、HTMLにDIVタグとクラス名、Pタグとを追加します。クラス名は「hukidashi1」です。実際には、

<div class="hukidashi1"><p>◯◯◯◯</p></div>

といった感じで文字列◯◯◯◯を囲めばOKです。

そして使用するCSSを何らかの方法で追記すれば終了です。 CSSの追記方法ですが、Wordpressをお使いの場合は「Simple Custom CSS」というプラグインがおススメです。プラグインの解説はこちらへ。

吹き出しの線や背景の色を変えたい場合のCSS修正法

色を変えたい場合は、「囲み枠の色」「塗りつぶしの色」とコメントしてある箇所の値を変えます。合計4箇所です。では例を掲げます。

この吹き出し2を例に変え方を説明しましょう!

ソース

それでは、枠線の色と塗りつぶしの色を変えてみましょう。

吹き出し2のHTML
<div class="hukidashi2"><p>この吹き出し2を例に変え方を説明しましょう!</p></div>
吹き出し2のCSS

/* 吹き出し2 CSS*/
.hukidashi2{
border:1px solid #FF6600; /* 囲み枠の太さ、種類、色 */
background: #FFFFCC; /* 塗りつぶしの色 */
border-radius:5px; /* 角の丸みの程度*/
position:relative;
padding: 10px; /* 吹き出しの囲み枠と文字列との余白*/
margin-bottom: 14px;
margin-left:25px;/* 吹き出し外側 左の余白*/
margin-right:25px;/* 吹き出し外側 右の余白*/
}
.hukidashi2:before {
border:10px solid transparent;
border-top-color:#FFFFCC; /* 塗りつぶしの色 */
border-bottom-width:0;
bottom:-9px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}
.hukidashi2:after {
border:10px solid transparent;
border-top-color:#FF6600; /* 囲み枠の色 */
border-bottom-width:0;
bottom:-10px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}
.hukidashi2 p {
margin: 0;
padding: 0;
line-height: 1.4em; /* 文字列の行間*/
font-size: 1em; /* フォントサイズ*/
}

関連記事

吹き出しではない、通常の囲み枠についての記事は以下です。こちらも合わせてご覧ください。 CSSで枠(ボックス)をデザイン|WordPressプラグインで一発呼び出し!

参考サイト

3つです。どれも大変参考になりました! この場を借りて感謝いたします。

CSSのみで三角形を作る方法を解説するよ!|ついでに扇型や吹き出しも作ってみる

CSSだけで三角形を作ろう!その2:吹き出しやリボンをデザインする | 株式会社グランフェアズ

画像を使わず、CSSで吹き出しを作る | miauler

CSSだけで吹き出しをつくる!デザインサンプル26個 | Tech2GO

CSSおすすめの本