HTML / CSS / jQuery コーディング

【CSS】cssで見出しタイトルを吹き出し形式にする方法


cssのみで、吹き出しタイプの見出し・タイトル表示にする方法です。

◆html

<div class="textBox">吹き出しのタイトル</div>
<p>下にコメントがはいります。</p>

◆css

.textBox {
position: relative;
font-weight: bold;
background-color: #b7f9ff;
padding: 10px 20px;
border-radius: 5px;
}
.textBox::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 15px solid #b7f9ff;
}

※「color」の箇所で、色が変更できます。

⇒ サンプルページはこちら

-HTML / CSS / jQuery コーディング
-

© 2026 Web担当屋 ブログ