画像を使わずにHTMLとCSSだけで吹き出しを作る方法です。漫画のセリフを入れるところに使われ、バルーンとも呼ばれます。
画像を読み込まないので、応答時間やページの表示時間が少しだけ短縮できます。
CSSで形や色味をかんたんに変更できるのもメリット。
HTMLとCSSだけで作ることは、画像やcanvasなどを使った吹き出しと比べ応答時間やページの表示時間が大幅に改善されるかといえば、そんなに変わらないでしょう。
でも、CSSの基本機能だけでつくるので、このような小さなことの積み重ねが結果的に大きな改善につながります。
（ただし、CSSサイズが大きくなるデメリットがあります。）
HTMLとCSS、そしてその結果を見ていきましょう。
上の吹き出し
See the Pen Balloon top by tadtadya (@tadtadya) on CodePen.
.balloon::beforeと.balloon::afterのborderのサイズで、吹き出しの矢印部分のサイズが変更できます。
.balloonのmargin-bottomと.balloon::before, .balloon::afterのleft, topで、吹き出しの矢印の位置を調整します。
下の吹き出し
See the Pen Balloon bottom by tadtadya (@tadtadya) on CodePen.
吹き出しの調整方法は、使うプロパティがちがうだけで上の吹き出しと同じ。
左の吹き出し
See the Pen Balloon left by tadtadya (@tadtadya) on CodePen.
吹き出しの調整方法は同じ。
右の吹き出し
See the Pen Balloon right by tadtadya (@tadtadya) on CodePen.
吹き出しの調整方法は同じ。
吹き出しの矢印について
吹き出しの矢印はborderの角の特長を利用しています。まずは以下のサンプルを見てください。
See the Pen Balloon triangle by tadtadya (@tadtadya) on CodePen.
borderのtop, left, right, bottomの接点は、borderの外輪郭と内輪郭の角を結んだ斜め線で分かれます。
吹き出しの矢印の三角形はこの部分を使います。たとえば、下向きの三角形は次のように。
See the Pen Balloon triangle bottom by tadtadya (@tadtadya) on CodePen.
コンポーネントのサイズは0で実体はなく、border-left, border-right, border-topを使うとborder-topが三角形になります。
吹き出しでは、これを::before、::afterの疑似要素でつくりました。
::beforeの上に::afterの三角形をかぶせて少しずらすことで三角形の線ができます。
今回は、吹き出しの背景が白色だったのでこのように表現しました。吹き出しの背景が有色で吹き出しの枠線がいらないとき、::afterはいりません。
