ふきだしジェネレーター | HTML & CSSを簡単作成！

2025年2月5日

ウェブサイトやブログでよく使われる「ふきだし」を、簡単にカスタマイズしてHTML & CSSコードを生成できるジェネレーターです！
テキストや余白、フォントサイズ、角の丸み、吹き出しの位置などを調整し、リアルタイムでプレビューを確認しながら、自分好みのデザインを作成できます。

ここに文字を入力してプレビュー確認

テキスト:フォントサイズ 16px 上下の余白 10px 左右の余白 10px 角の丸み:10px 吹き出しの位置:

下上右左

HTML Code

<div class="bubble triangle bottom">
    ここに文字を入力してプレビュー確認
</div>

CSS Code

.bubble {
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 18px;
}
.bubble.triangle::after {
    content: "";
    position: absolute;
    border-style: solid;
    display: block;
    border-width: 10px;
}
.bubble.triangle.bottom::after {
    top: 100%;
    left: 20px;
    border-color: #000 transparent transparent transparent;
}