スポンサーリンク

HTMLとCSSで吹き出しデザインを作ってみよう！

便利ツール・サービス
2022.03.30

今回は、HTMLとCSSで作る吹き出しデザインをご紹介します。
吹き出しデザインは、目立たせたいところや、会話文にオススメです。
吹き出しデザインの画像をブログやサイトに挿入すると、まとまりがでて、とても見やすくなります！
WordPressならプラグインを使用することもできますが、HTMLとCSSで作成することで、サイトが軽くなるだけでなく、カラーやデザインをサイトに合わせて設定することも簡単にできるので便利です。

いろんなデザインの吹き出しを紹介するよ♬

吹き出しデザインとは？

LINEなどのメッセージアプリでやりとりをする時などによく見る吹き出しデザイン。
Webサイトやブログの中でも会話風に表現するときや、コメントを入れたい時、また目立たせたい時などにも大活躍です！ 吹き出しデザインは、四角い枠（丸の場合もあり）と小さい三角形の組み合わせで作られています。 

コレ→　四角い枠　や、

コレ→　丸い枠　と、

↓ コレ（三角）

を組み合わせて作ります。 

吹き出しデザインを作る際の三角形に使うのは、CSSの擬似要素『::before / ::after 』です。

吹き出しデザインの作り方

では、早速吹き出しデザインをご紹介していきます。

☆シンプル四角の吹き出し☆

1-下向き

〜本文はこちら〜

【HTML】
<p class="balloon01">〜本文はこちら〜</p>

【CSS】
.balloon01 { 
position: relative;
background-color: #c5c5c5;
padding: 10px;
text-align: center;
color: #333;
}
.balloon01::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-top: 12px solid #c5c5c5;
top: 100%;
left: 50%;
}
.balloon01 p {
margin: 0;
padding: 0;
}
2-上向き

〜本文はこちら〜

【HTML】
<p class="balloon02">〜本文はこちら〜</p>

【CSS】
.balloon02 {
position: relative;
background-color: #c5c5c5;
padding: 10px;
text-align: center;
color: #333;
}
.balloon02::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-bottom: 12px solid #c5c5c5;
bottom: 100%;
left: 50%;
}
.balloon02 p {
margin: 0;
padding: 0;
}
3-左向き

〜本文はこちら〜

【HTML】
<p class="balloon03">〜本文はこちら〜</p>

【CSS】
.balloon03 {
position: relative;
background-color: #c5c5c5;
padding: 10px;
text-align: center;
color: #333;
}
.balloon03::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-right: 12px solid #c5c5c5;
right: 100%;
top: 20%;
}
.balloon03 p {
margin: 0;
padding: 0;
}
4-右向き

〜本文はこちら〜

【HTML】
<p class="balloon04">〜本文はこちら〜</p>

【CSS】
.balloon04 {
position: relative;
background-color: #c5c5c5;
padding: 10px;
text-align: center;
color: #333;
}
.balloon04::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-left: 12px solid #c5c5c5;
left: 100%;
top: 20%;
}
.balloon04 p {
margin: 0;
padding: 0;
}
上の４種類の吹き出しデザインを見ると、::before の三角形部分に特徴があるのが見えるよね！？。 三角形の吹き出し口が下なら[top]、上なら[bottom]、左の時は[right]、右の時は[left]となっているんだ。 ということは・・・吹き出し口の場所と反対にすればいいんだよ！！ 吹き出し口の位置を変えたい時は、上下バージョンは [left: 50%;] 、左右バージョンは [top: 20%;] の数値を変えてね。

☆枠つきの四角い吹き出し☆

1-下向き

〜本文はこちら〜

【HTML】
<p class="balloon11">〜本文はこちら〜</p>

【CSS】
.balloon11 {
position: relative;
background-color: #fff;
border: #778899 solid 2px;
padding: 10px;
text-align: center;
color: #333;
}
.balloon11::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-top: 12px solid #778899;
top: 100%;
left: 50%;
}
.balloon11::after {
content: "";
position: absolute;
border: 12px solid transparent;
border-top: 12px solid #fff;
margin-top: -4px;
top: 100%;
left: 50%;
}
.balloon11 p {
margin: 0;
padding: 0;
}
2-左向き

〜本文はこちら〜

【HTML】
<p class="balloon12">〜本文はこちら〜</p>

【CSS】
.balloon12 {
position: relative;
background-color: #fff;
border: #778899 solid 2px;
padding: 10px;
text-align: center;
color: #333;
}
.balloon12::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-right: 12px solid #778899;
right: 100%;
top: 20%;
}
.balloon12::after {
content: "";
position: absolute;
border: 12px solid transparent;
border-right: 12px solid #fff;
margin-right: -4px;
right: 100%;
top: 50%;
}
.balloon12 p {
margin: 0;
padding: 0;
}
吹き出し口を上バージョンにしたい場合は、下バージョンの[CSS]から[top]の部分を全て[bottom]に変えてみよう！
右バージョンにしたい場合は、左バージョンの[CSS]から[right]の部分を全て[left]に変えたらいいよ！
テキストを左寄せにしたい場合は、[text-align: center;]を[left]に変更しよう！

☆角丸の四角い吹き出し☆

1-下向き

〜本文はこちら〜

【HTML】
<p class="balloon21">〜本文はこちら〜</p>

【CSS】
.balloon21 {
position: relative;
display: inline-block;
background-color: #f5f5f5;
border: #778899 solid 2px;
border-radius: 10px;
padding: 10px 20px;
text-align: center;
color: #333;
}
.balloon21::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-top: 12px solid #778899;
top: 100%;
left: 50%;
}
.balloon21::after {
content: "";
position: absolute;
border: 12px solid transparent;
border-top: 12px solid #f5f5f5;
margin-top: -4px;
top: 100%;
left: 50%;
}
.balloon21 p {
margin: 0;
padding: 0;
}
枠つきバージョンを参考に、吹き出し口は好きな位置に変えてね！
[ border-radius: 10px; ] で丸みをがつくよ。pxで丸みを変えてみよう。
[ display: inline-block; ] を入れることで、文字幅に合わせた枠幅になるよ。

☆円形の吹き出し☆

ポイント使いにとっても便利！

オススメの使い方は・・・
文字は短く
数字や単語のみ！！

1-下向き

Special

【HTML】
<p class="balloon31">Special</p>

【CSS】
.balloon31 {
position: relative;
display: inline-block;
padding: 0 15px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
background-color: #ff8c00;
text-align: center;
color: #fff;
font-size: 16px;
}
.balloon31::before {
content: "";
position: absolute;
border: 15px solid transparent;
border-top: 25px solid #ff8c00;
bottom: -30px;
left: 50%;
margin-left: -15px;
}
2-左向き

Special

【HTML】
<p class="balloon32">Special</p>

【CSS】
.balloon32 {
position: relative;
display: inline-block;
padding: 0 15px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
background-color: #ff8c00;
text-align: center;
color: #fff;
font-size: 16px;
}
.balloon32::before {
content: "";
position: absolute;
border: 15px solid transparent;
border-right: 25px solid #ff8c00;
left: -30px;
top: 50%;
margin-top: -15px;
}
吹き出し口を上バージョンにしたい場合は、下バージョンの[CSS]から[top]の部分を[bottom]に[bottom]の部分を[top]に変えてみてね。 右バージョンにしたい場合は、左バージョンの[CSS]から[right]の部分を[left]に[left]の部分を[right]に変えよう！
3-斜め右下向き

Special

【HTML】
<p class="balloon33">Special</p>

【CSS】
.balloon33 {
position: relative;
display: inline-block;
padding: 0 15px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
background-color: #ff8c00;
text-align: center;
color: #fff;
font-size: 16px;
}
.balloon33::before {
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid #ff8c00;
right: 5px;
bottom: 5px;
transform: rotate(45deg);
}
[transform: rotate(45deg);] が斜め45°にしてくれてるよ。
左側に吹き出し口を作りたい場合は [right: 5px;] を[left] に、斜め上に吹き出し口を作りたい場合は [bottom: 5px;] を[top] に変えよう！

☆心の声っぽい吹き出し☆

よく漫画などに出てくる声に出さない、心の声を描くときに使うような吹き出しです。

〜心の声はこちら〜

【HTML】
<p class="balloon4">〜心の声はこちら〜</p>

【CSS】
.balloon12 {
position: relative;
background-color: #fff;
border: #778899 solid 2px;
padding: 10px;
text-align: center;
color: #333;
}
/* 大きい丸 */
.balloon12::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-right: 12px solid #778899;
right: 100%;
top: 20%;
}
/* 小さい丸 */
.balloon12::after {
content: "";
position: absolute;
border: 12px solid transparent;
border-right: 12px solid #fff;
margin-right: -4px;
right: 100%;
top: 50%;
}
.balloon12 p {
margin: 0;
padding: 0;
}
::before が大きい丸、::after が小さい丸を作っているよ。
吹き出し口を左にしたい場合は、[right] を全部 [left] に変えてね！

知ってると便利なWebツール

吹き出しの作り方をご紹介してきましたが、自分で作るのめんどくさい！という方や、時間をかけずにパパッとできないの？作り方・・・忘れちゃった(^◇^;)という方にオススメのツールがあります。

☆ CSS Arrow Please! ☆

英語のサイトですが、直感的に使えるのでとても便利です。

CSS Arrow Please - By Simon Hoejberg - @shojberg
CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.
cssarrowplease.com

参考）CSS Arrow Please!（https://cssarrowplease.com/）

☆ CSS デザインシュミレーター ☆

日本語のサイトです。
class名の設定をはじめ、細かくいろんな設定ができるので、サイトに合わせて作成し、コピペで使えるので時短で簡単です。

吹き出しデザインジェネレーター
面倒な吹き出しCSSが1分で！？HTMLとCSSだけで作る吹き出し作成ジェネレーターです。完成後のデザインを見ながら簡単調整♪三角のサイズも調整できます。複雑な吹き出しCSSが簡単に作成できます。LINE風の吹き出しも簡単にできます！
generator.web-alpha.info

参考）CSSデザインシュミレーター（https://generator.web-alpha.info/fukidashi/index.php#step1）

☆ カラー大辞典 ☆

色を変えたい場合に便利なWEBサイトです。
ブックマークしておくと使いたいときにパッとみれて便利ですよ！

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
www.colordic.org

参考）カラー大辞典（https://www.colordic.org/）

まとめ

基本的な、吹き出しデザインの作り方をご紹介しました。

ポイント使いや強調したいところなどに、ご自分のサイトに合わせていろいろアレンジしながら使ってください。

CSSはちょっと複雑ですが、上記のソースを自由に変更しながら検証してみてください。
ジェネレーターを使って、いろいろ変更して変わる部分をみるのも勉強になるので、試してみてはいかがですか？

この記事を書いた人
プロフィール
ERIKO

☆ FrankuLメンバー。（https://frankul.net/crew/koyama/）　
☆ 楽しいことが大好きなWebクリエイターです。
制作を通してたくさんの人のHAPPYが溢れるお手伝いができることが幸せです♫
☆ 開発・コーダー・ライター・デザインといろいろやってます。

フォローはこちらから
便利ツール・サービス
CSSHTMLデザイン
よかったらシェアしてね
フォローはこちらから
ERIKO
タイトルとURLをコピーしました