【CSS】吹き出しの作り方

2018年12月14日
CSS
HTML

会話形式のブログで使用するために作成した。

サンプル

手順

吹き出しを表示するために必要なHTMLを記述する

吹き出しを表示するため、表示したい箇所に下記のHTMLを記述する。

<div class="speech-balloon">
  <p></p>
</div>

CSSでデザインする

続いて、作成したい種類の吹き出しに応じて、下記のCSSを記述する。

通常( 矩形 )の吹き出しの場合

.speech-balloon {
    max-width: 100%;
    margin: 20px 0 20px 40px;
    padding: 20px;
    position: relative;
    background-color: #fff;
    border: solid 3px #ccc;
}

.speech-balloon::before {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 6px 12px;
    border-color: #fff #fff transparent transparent;
    top: 29px;
    left: -24px;
    z-index: 2;
}

.speech-balloon::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 10px 16px;
    border-color: #ccc #ccc transparent transparent;
    top: 26px;
    left: -32px;
    z-index: 1;
}

想起の吹き出しの場合

.speech-balloon {
    max-width: 100%;
    margin: 20px 0 20px 40px;
    padding: 20px;
    position: relative;
    border-radius: 50px;
    background-color: #fff;
    border: solid 3px #ccc;
}

.speech-balloon::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 25px;
    top: 25px;
    left: -30px;
    border-radius: 50px;
    background-color: #fff;
    border: solid 3px #ccc;
}

.speech-balloon::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 15px;
    top: 25px;
    left: -50px;
    border-radius: 50px;
    background-color: #fff;
    border: solid 3px #ccc;
}

※ このデザインの肝は、beforeとafterの2つの擬似要素を利用し、吹き出しのとんがりの部分や、想起の小さい円を作っているところ。

セリフを入れる

最後に、先ほど記述したHTMLのp要素内に吹き出しのセリフを入れる。

<div class="speech-balloon">
  <p>任意のセリフをここに入れる。</p>
</div>