CSSで吹き出しを作られているサイトが最近よく見られるようになってきました。

下の画像のような感じですね。

このようなCSSで吹き出しデザインを簡単に作る方法を解説したいと思います。

CSSで吹き出しを簡単に作る方法

結論から。

初めての場合、下記のサイトを使って作成するのが一番早いかと思いました。

CSS ARROW PLEASE

http://www.cssarrowplease.com/

入力値に値を入力して、右の生成されたCSSをstyle.cssに貼り付ける感じですね。

ただし、細かいところの設定はこの画面のみではできません。

例えば上記の場合、吹き出しの矢印をもうちょっと左に寄せたいな。という場合です。

その場合は「.arrow_box:after, .arrow_box:before 」の「left:50%」を左に寄るように20％などに変更します。

また、h2などの見出しタグを吹き出しにする用途も多いはずです。

その場合は下記サンプルコードのようにh2タグを追記した形でCSSを記述する必要があります。

CSS

.arrow_box h2 {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
}
.arrow_box h2:after, .arrow_box h2:before {
	top: 100%;
	left: 20%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box h2:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #88b7d5;
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box h2:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 36px;
	margin-left: -36px;
}

 HTML

<div class="arrow_box"><h2>ワードプレスとは</h2></div>

出来上がりはこんな感じですね。

いったん完成したらそのコードは使い回せると思うので、2回目以降はそのコードを貼り付けてちょっと修正する方法が一番早そうですね。

CSSで吹き出しが出来る理屈

吹き出しはboderプロパティの性質と「after、before」擬似要素を利用して作成します。

widthとheightが0でborderだけサイズがあるとtop、right、bottom、leftの方向ごとに対応して三角形が出来上がります。

下記のような感じですね。

CSS

.box_test {
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-right: 100px solid blue;
	border-bottom: 100px solid green;
	border-left: 100px solid yellow;
}

HTML

<div class="box_test"></div>

例えば、border-topだけ残してあとは透明にする場合は下記のようなCSSを書きます。

.box_test {
	width: 0;
	height: 0;
	/* border: 100px solid transparent; */
	border-top: 100px solid red;
}

そうすると、下記のような三角形だけ残ります。

これを、after、beforeの擬似要素で実装すると吹き出しができあがります。

CSS吹き出しデザインのまとめ

初めての場合はツールを使った方が断然早いですが、理屈だけは覚えておいた方が良さそうですね。

2回目以降は使い回しでOKかと思います。