CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。
今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。
今回ご紹介するサンプルは4つ
- 一般的な三角の吹き出し
- 一般的な三角の吹き出し（ボーダー付き）
- ぽわわーんとした吹き出し
- 丸い（曲線の）吹き出し
4つのサンプルの実行結果は、ここで確認できます。
IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。
IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。
それでは1つ1つ見て行きましょう。
1.一般的な三角の吹き出し
まずはソースから。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
box-sizing: border-box;
}
.wrapper {
padding: 30px;
position: relative;
}
.box {
position: relative;
background: #ccc;
height: 50px;
width: 100px;
margin-bottom: 20px;
}
.box:after {
content: '';
position: absolute;
border-top: 10px solid #ccc;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
bottom: -9px;
left: 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
</html>
ベースのHTMLはいたってシンプルです。
boxというクラスがついているdivに対して吹き出しをつけていきます。
吹き出しは、after疑似要素を使って絶対配置で付けます。
そのため、wrapperクラスに対してposition:relativeを指定し、boxクラスのafter擬似要素にposition:absoluteを指定しています。
吹き出しは、borderを使って表示します。
高さと幅が0の要素に対してborderを指定 すると、各位置のボーダーが三角形で表示されます。
これを利用して三角形の吹き出しを作成します。
今回のサンプルでは、boxクラスの下に下向きの三角形の吹き出しを作成するため、border-topに下向きの三角形の部分となる指定をいれます。
border-topを指定するだけだと三角にならないので、border-leftとborder-rightを指定して、border-topが三角になるようにします。
colorにtransparent（透過色）を指定することで、border-leftとborder-rightを見えなくし、見事に下向きの三角形が完成します。
あとは、top(bottom)とleft(right)で吹き出しの表示位置を調整してあげれば完成です。
簡単ですね！
上付きの吹き出しや、左右付きの吹き出しを作成したい場合は、表示するborderとtransparentのborderの組み合わせを変えることで簡単に実現することができます。
上付きと左右付きの吹き出しのサンプルは、ここのソースを参照してください。
2.一般的な三角の吹き出し（ボーダー付き）
1で紹介したサンプルにちょっと手を加えることで、ボーダー付きの吹き出しを作ることができます。
ソースはこんな感じです。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
box-sizing: border-box;
}
.wrapper {
padding: 30px;
position: relative;
}
.box {
position: relative;
background: #ccc;
height: 50px;
width: 100px;
margin-bottom: 20px;
border: 1px solid #999;
}
.box:after {
content: '';
position: absolute;
border-top: 10px solid #ccc;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
bottom: -9px;
left: 5px;
}
.box:before {
content: '';
position: absolute;
border-top: 10px solid #999;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
bottom: -11px;
left: 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
</html>
1のソースと違うところは、boxクラスにborderを追加したことと、boxクラスのbefore要素を追加したことです。
before要素の指定内容はafter要素の指定内容とほぼ同じです。
違いは、border-topの色をboxクラスのborderの色と合わせたことと、bottomの位置をafter擬似要素よりも下に表示されるようにbottomの値を変更したところです。
仕組みは簡単で、before要素がafter要素からはみ出すように表示することで、あたかもborderが表示されるようにしている。ただ、それだけです。
簡単ですね！
1と同様に、上付きの吹き出しや、左右付きの吹き出しを作成したい場合は、表示するborderとtransparentのborderの組み合わせを変えることで簡単に実現することができます。
上付きと左右付きの吹き出しのサンプルは、ここのソースを参照してください。
3.ぽわわーんとした吹き出し
頭の中で考えていることなどを表示するときによく使われる、「ぽわわーん」とした吹 き出しの作成方法です。
まずはソースです。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link media="all" rel="stylesheet" href="css/reset.css" type="text/css" />
<style type="text/css">
* {
box-sizing: border-box;
}
.wrapper {
padding: 30px;
position: relative;
}
.box {
position: relative;
background: #ccc;
height: 70px;
width: 100px;
margin-bottom: 20px;
border-radius: 50px;
}
.box:before {
content: '';
position: absolute;
background: #ccc;
height: 20px;
width: 20px;
border-radius: 10px;
bottom: -20px;
left: 70px;
}
.box:after {
content: '';
position: absolute;
background: #ccc;
height: 10px;
width: 10px;
border-radius: 5px;
bottom: -30px;
left: 90px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
</html>
1、2のサンプルと同様に、before擬似要素とafter擬似要素を使って吹き出し部分を作っていきます。
今回のサンプルでは、before要素で大きめの丸を、after要素で小さめの丸を作成しています。
擬似要素で丸を作るのは簡単で、高さと幅を同じ大きさに合わせて、border-radiusに高さ（幅）の半分の大きさを指定してやると丸を作成することができます。
あとは、top(bottom)とleft(right)で丸の表示位置を調整してあげれば完成です。
簡単ですね！
丸の表示位置を変更することで、上付き、左右付きも簡単に作成することができます。
4.丸い（曲線の）吹き出し
最後に丸い（曲線の）吹き出しです。
まずはソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link media="all" rel="stylesheet" href="css/reset.css" type="text/css" />
<style type="text/css">
* {
box-sizing: border-box;
}
.wrapper {
padding: 30px;
position: relative;
}
.box {
position: relative;
background: #ccc;
height: 70px;
width: 100px;
margin-bottom: 20px;
border-radius: 50px;
}
.box:after {
content: '';
position: absolute;
height: 50px;
width: 50px;
border-radius: 25px;
z-index: -1;
background: #fff;
bottom: -20px;
left: 50px;
}
.box:before {
content: '';
position: absolute;
height: 50px;
width: 50px;
border-radius: 25px;
z-index: -1;
background: #ccc;
bottom: -15px;
left: 35px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
</html>
曲線の吹き出しもafter擬似要素、before擬似要素で作成します。
まずは3のサンプルと同様に、after要素とbefore要素に高さ、幅、border-radiusを指定して、丸を作成します。
次に、after要素とbefore要素の両方にz-index:-1を指定して、boxクラスの要素の後ろに隠れるようにします。
いよいよ曲線の作り方なのですが、after要素には背景色と同じ色（今回のサンプルでは#fff）を指定し、before要素には吹き出しの色を指定します。
そして、before要素とafter要素のtop(bottom)、left(right)の位置を調整して、吹き出し色の丸の上に背景色の丸がずれて重なるようにします。
吹き出し色の丸に背景色の丸を重ねてやることで、あたかも曲線の吹き出しが表示されているように見せるというわけです。
簡単ですね！
背景色の丸の位置を調整することで、吹き出しの太さを変更する事も簡単にできます。
今回紹介した方法は、アシアルブログやアシアルHPの中でも実際に使用しています。
非常に簡単に実装できるのでみなさんもぜひ試してみてください！
