画像なしでCSS3スピーチバブルを作成する方法

クレジット: https://www.sitepoint.com/pure-css3-speech-bubbles/

私が初めて画像なしのスピーチバブルを作成したのは何年も前のことです。その際、DOMに要素を挿入するための長ったらしいJavaScript関数が必要で、ひどいCSSを使っていて、見た目もあまり良くなく、IE5ではうまく動作しませんでした。

CSS3は私たちの生活をより良く変え始めています。現在、すべてのブラウザーで動作し、1つのHTML要素、数行のCSS3コード、画像なし、JavaScriptなしで素晴らしいスピーチバブルを作成できるようになっています。

最初に、HTMLを確認しましょう。1つの要素だけが必要なので、Pタグを使用しています：

	<p>SitePoint Rocks!</p>

まず、外枠のボックスをスタイリングします：

	p.speech
	{
	position: relative;
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}

そこまで難しくはありません。唯一の重要なプロパティは、スピーチバブルのポインターに必要なposition: relativeです。また、すべてのCSS3ブラウザーで動作するように、border-radiusとbox-shadowにはMozillaおよびWebkitのベンダープレフィックスが必要です。IE8以下では角が四角く、影は表示されませんが、ボックス自体は表示されます。

次に、三角形のバブルポインターを作成します。画像を使う代わりに、CSSのボーダーを使用して三角形を作成できます。簡単な説明として、異なる色のボーダーを持つ要素を確認してみてください：

要素の幅と高さを0pxにして、異なるサイズのボーダーを使うと、さまざまな三角形が形成されることがわかります：

したがって、スピーチバブルポインターには、上部と左のボーダーを実線にし、右と下のボーダーを透明にすることができます：

しかし、このボーダープロパティをどこに適用すればよいのでしょうか？幸い、CSSの:beforeと:after疑似要素を使用して、さらに2つのコンテンツ項目を生成することができます。したがって、次のようにします：

	p.speech:before
	{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 100px;
	border: 25px solid;
	border-color: #666 transparent transparent #666;
}

三角形はバブルの下に配置されます。ちなみに、この要素に影を適用しようとしても、透明なボーダーの周りに影が表示され、見える三角形には影が表示されません。

この三角形の一部を削除する必要があります。そのため、灰色の三角形の上に小さな白い三角形を配置して、削除効果を実現します：

	p.speech:after
	{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
	top: 100px;
	border: 15px solid;
	border-color: #fff transparent transparent #fff;
}

これで、画像なしの純粋なCSS3スピーチバブルが完成しました。

本質的には、:beforeと:after疑似要素を使用して、さまざまな効果を作成できます。例えば、思考バブルは、2つのコンテンツ項目を円に丸めて作成できます：

	p.thought
	{
	position: relative;
	width: 130px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 58px;
	-moz-border-radius: 58px;
	border-radius: 58px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}

p.thought:before, p.thought:after
{
	left: 10px;
	top: 70px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
}

p.thought:after
{
	width: 20px;
	height: 20px;
	left: 5px;
	top: 100px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}

こちらのデモページで、これらのテクニックを使用した例をご覧ください。すべてのCSSコードはHTMLソースに含まれています。