CSSで吹き出しを作る。

こんばんは。きわさです。

メッセージアプリ等によくある吹き出しですが、あんな感じのものをCSSで作れるそうなのでやってみました。備忘録CSS編です。

CSSで吹き出しを作る

まずはCSS。このようになっています。

.balloon {
    position: relative;
    background: #ffff80;
    padding: 10px;
    margin: 0 20px;
    border-radius: 10px;
}

.balloon:after {
    right: 100%;
    top: 10px;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border-style: solid;
    border-color: transparent #ffff80 transparent transparent;
    border-width: 10px;
}

色々書いてありますが、いくつか抜き出してみます。

まず、balloonとballoon:afterがありますね。
balloonというのは任意の名前なので気にせず、注目すべきは:afterのほうですね。

これは擬似要素といい、要素の直後に内容を挿入できます。
content: の内容が追加されますが、今回は空欄にし、吹き出し元の三角を表示するのに使用しています。
balloonで吹き出し本体、balloon:afterで吹き出しの三角を作っています。

paddingで吹き出しの余白部分の大きさを作っています。
border-radiusは吹き出しの丸みです。数値が高いほど丸みがあり、低いほど四角に近づきます。

そして吹き出し元の三角ですが、少し複雑なことを、やっています。

例えばこのような図形があります。

サンプル

これは、CSSは次のようになっています。

border-style: solid;
border-color: #ffff00 #ff0000 #ff00ff #00ffff;
border-width: 30px;

サンプルという文字を4色の台形が囲んでいますね。
まずこの4色というのは
border-colorで指定しています。上 右 下 左 の順です。
次に、この台形の高さがborder-widthです。

中にサンプルという文字があるため、台形になっていますが、この内側の四角形の幅と高さを0にしてあげるとこうなります。

 

 

台形ではなく三角形になりました。
あとは必要ない部分を透明にしてあげます。

 

 

するとどうでしょう。
右側だけ残っていますね。
これは、border-colorで上と下と左にtransparentを設定して透明にしています。

このようにして吹き出し元の三角形を作っていました。

あとは大きさを調整して本体と合わせれば、

HTMLに記述する

さて次はHTMLですが、こちらは簡単。
HTMLでは先ほど作ったclassを指定してあげるだけです。

<p class="balloon">ここにメッセージを記述</p>

 

今回はシンプルな形の吹き出しでしたが、CSSの書き方次第ではもっと凝ったデザインの吹き出しも作れそうです。