吹き出しデザイン集
ここからは『吹き出し』のサンプルデザインを紹介していきます。
HTMLをコピペするだけで適用できるので、ぜひ活用してみてくださいね。
＼吹き出しの背景色、枠色を自由にカスタマイズ／
背景色： 枠色：
会話風の吹き出し
会話風の吹き出し（左）
.会話風の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: left; align-items: start; gap: 0 10px;">
<div style="position: absolute; overflow: hidden; border-radius: 50%; max-width: 70px; max-height: 70px; border: 3px solid #f2f2f2;">★ここにアイコン画像を指定★</div>
<div style="position: relative; margin: 0 0px 30px 100px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span>会話風の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span></div>
</div>
<div style="position: absolute; overflow: hidden; border-radius: 50%; max-width: 70px; max-height: 70px; border: 3px solid #f2f2f2;">★ここにアイコン画像を指定★</div>
<div style="position: relative; margin: 0 0px 30px 100px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span>会話風の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span></div>
</div>
会話風の吹き出し（右）
.会話風の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: right; align-items: start; gap: 0 10px; position: relative;">
<div style="position: absolute; right: 0; overflow: hidden; border-radius: 50%; max-width: 70px; max-height: 70px; border: 3px solid #f2f2f2;">★ここにアイコン画像を指定★</div>
<div style="position: relative; margin: 0px 100px 30px 0px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span>会話風の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span></div>
</div>
<div style="position: absolute; right: 0; overflow: hidden; border-radius: 50%; max-width: 70px; max-height: 70px; border: 3px solid #f2f2f2;">★ここにアイコン画像を指定★</div>
<div style="position: relative; margin: 0px 100px 30px 0px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span>会話風の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span></div>
</div>
シンプルな吹き出し
シンプルな吹き出し（左）
.シンプルな吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: left; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span>シンプルな吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span>シンプルな吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span></div>
</div>
シンプルな吹き出し（右）
.シンプルな吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: right; align-items: start; gap: 0 10px; position: relative;">
<div style="position: relative; margin: 0px 20px 30px 0px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span>シンプルな吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span></div>
</div>
<div style="position: relative; margin: 0px 20px 30px 0px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span>シンプルな吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span></div>
</div>
シンプルな吹き出し（上）
.シンプルな吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: center; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -15px;">.</span>シンプルな吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -10px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -15px;">.</span>シンプルな吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -10px;">.</span></div>
</div>
シンプルな吹き出し（下）
.シンプルな吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: center; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -15px;">.</span>シンプルな吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -10px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 5px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -15px;">.</span>シンプルな吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -10px;">.</span></div>
</div>
直角の吹き出し
直角の吹き出し（左）
.直角の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: left; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 0px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span>直角の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 0px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span>直角の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0 50%, 100% 0, 100% 100%); top: 15px;">.</span></div>
</div>
直角の吹き出し（右）
.直角の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: right; align-items: start; gap: 0 10px; position: relative;">
<div style="position: relative; margin: 0px 20px 30px 0px; padding: .8em 1em; border-radius: 0px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span>直角の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span></div>
</div>
<div style="position: relative; margin: 0px 20px 30px 0px; padding: .8em 1em; border-radius: 0px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -13px; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span>直角の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -11px; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: 15px;">.</span></div>
</div>
直角の吹き出し（上）
.直角の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: center; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 0px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -15px;">.</span>直角の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -10px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 0px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -15px;">.</span>直角の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -10px;">.</span></div>
</div>
直角の吹き出し（下）
.直角の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: center; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 0px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -15px;">.</span>直角の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -10px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 0px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -15px;">.</span>直角の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -10px;">.</span></div>
</div>
角丸の吹き出し
角丸の吹き出し（左）
.角丸の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: left; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -2.3%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0 50%, 100% 5px, 100% 80%); top: 20%;">.</span>角丸の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -1.8%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0 50%, 100% 5px, 100% 80%); top: 20%;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -2.3%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0 50%, 100% 5px, 100% 80%); top: 20%;">.</span>角丸の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -1.8%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0 50%, 100% 5px, 100% 80%); top: 20%;">.</span></div>
</div>
角丸の吹き出し（右）
.角丸の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: right; align-items: start; gap: 0 10px; position: relative;">
<div style="position: relative; margin: 0px 20px 30px 0px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -2.3%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 20%, 100% 50%, 0% 80%); top: 20%;">.</span>角丸の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -1.8%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 20%, 100% 50%, 0% 80%); top: 20%;">.</span></div>
</div>
<div style="position: relative; margin: 0px 20px 30px 0px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -2.3%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 20%, 100% 50%, 0% 80%); top: 20%;">.</span>角丸の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -1.8%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 20%, 100% 50%, 0% 80%); top: 20%;">.</span></div>
</div>
角丸の吹き出し（上）
.角丸の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: center; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -15px;">.</span>角丸の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -10px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -15px;">.</span>角丸の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 0%); top: -10px;">.</span></div>
</div>
角丸の吹き出し（下）
.角丸の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: center; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -15px;">.</span>角丸の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -10px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #b0b0b0; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -15px;">.</span>角丸の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: 50%; width: 13px; height: 30px; color: #ffffff00; background-color: #f2f2f2; clip-path: polygon(0% 50%, 100% 50%, 50% 100%); bottom: -10px;">.</span></div>
</div>
-心の声- 風の吹き出し
心の声（左）
.心の声風の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: left; align-items: start; gap: 0 10px;">
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -3.0%; width: 15px; height: 15px; color: #ffffff00; background-color: #b0b0b0; top: 62%; border-radius: 18px;">.</span>心の声風の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -5%; width: 10px; height: 10px; color: #ffffff00; background-color: #b0b0b0; top: 75%; border-radius: 18px;">.</span></div>
</div>
<div style="position: relative; margin: 0 0px 30px 20px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; left: -3.0%; width: 15px; height: 15px; color: #ffffff00; background-color: #b0b0b0; top: 62%; border-radius: 18px;">.</span>心の声風の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; left: -5%; width: 10px; height: 10px; color: #ffffff00; background-color: #b0b0b0; top: 75%; border-radius: 18px;">.</span></div>
</div>
心の声（右）
.心の声風の吹き出しのサンプルです。ここに文章を記載してください。
.
.
✙ タップしてコードを見る
HTML コード
<div style="display: flex; justify-content: right; align-items: start; gap: 0 10px; position: relative;">
<div style="position: relative; margin: 0px 20px 30px 0px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -3.0%; width: 15px; height: 15px; color: #ffffff00; background-color: #b0b0b0; top: 62%; border-radius: 18px;">.</span>心の声風の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -5%; width: 10px; height: 10px; color: #ffffff00; background-color: #b0b0b0; top: 75%; border-radius: 18px;">.</span></div>
</div>
<div style="position: relative; margin: 0px 20px 30px 0px; padding: .8em 1em; border-radius: 40px; background-color: #f2f2f2; border: solid 2px #b0b0b0;"><span style="position: absolute; right: -3.0%; width: 15px; height: 15px; color: #ffffff00; background-color: #b0b0b0; top: 62%; border-radius: 18px;">.</span>心の声風の吹き出しのサンプルです。ここに文章を記載してください。
<span style="position: absolute; right: -5%; width: 10px; height: 10px; color: #ffffff00; background-color: #b0b0b0; top: 75%; border-radius: 18px;">.</span></div>
</div>