【CSS】CSSのみで角丸の吹き出しを作成する方法

吹き出しのデザインを実装する場合、背景画像に吹き出しの画像を適用するという方法もありますが、CSSで実装したほうがレイアウトの融通も利くので楽！
ということで、今回は吹き出しのデザインをCSSで実装する方法についてです。

参考にしたサイトはこちらです。

CSSで作る！吹き出しデザインのサンプル19選
https://saruwakakun.com/html-css/reference/speech-bubble

参考に…というより、ほぼコピペですが…。
他にもいろいろなデザインの吹き出しのサンプルコードがあるので、是非訪問してみてください！

で、実装方法ですが、下のコードで、下記のような右から吹き出したスタイルの吹き出しが作れます。

<div class="balloon">
    <p>右向きの吹き出しです</p>
</div>

.balloon {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    padding: 10px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 2px #555;
    box-sizing: border-box;
    border-radius: 10px;
}
.balloon:before{
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}
.balloon:after{
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #555;
    z-index: 1;
}

とても簡単ですね！
また、吹き出しの三角の部分の位置を変えたい場合は、.balloon:before と
.balloon:after の top のパーセントの値を変更します。
行数でいうと、18行目と28行目の箇所です。
パーセントを大きくすると三角が下に、小さくすると三角が上に移動しますので、お好みの位置で調節してください。

以上、吹き出しデザインの実装方法でした。
他にも、枠線を消して背景色を変えたりしても、また違った雰囲気になって良いですね。
さらに、参考にさせていただいたサイトでは、円形の吹き出しや、考え事風の吹き出しの実装方法についても解説しているので、こちらも是非参考にしてみてはいかがでしょうか。