[CSS]CSSで作る「吹き出し」のサンプル（上下左右の4方向）

CSSスニペット

2013.05.172016.09.20

吹き出しやバルーンとも言いますが、CSSだけで実現できるのでまとめました。

上下左右の4方向に対応した吹き出しの作り方とサンプルをまとめました。

「下向き」吹き出しの作り方
「上向き」吹き出しの作り方
1. 擬似要素:after について
2. 「上向き」吹き出しのサンプル
「左向き」吹き出しの作り方
1. 擬似要素:after について
2. 「左向き」吹き出しのサンプル
「右向き」吹き出しの作り方
1. 擬似要素:after について
2. 「右向き」吹き出しのサンプル
まとめ

「下向き」吹き出しの作り方

まずは「下向き」からです。

<style>
/*親*/
.parent1				{
	width:100%;
	background:#dd0000;
	padding:0;
	position:relative;
}

/*子*/
.parent1 .child1			{
	background:#dd0000;
	position:relative;

	/*テキストの補正*/
	color:#fff;
	padding:10px 0
}

/*擬似要素:after*/
.parent1 .child1:after	{
	content: ' ';
	width:0;
	height: 0;
	position:absolute;
	border:10px solid transparent;
	border-top-color:#dd0000;
	top:100%;
	left:50%;
}
</style>

<div class="parent1">
<p class="child1">「下向き」吹き出しのサンプル</p>
</div>

<style>

/*親*/

.parent1 {

width:100%;

background:#dd0000;

padding:0;

position:relative;

}

/*子*/

.parent1 .child1 {

background:#dd0000;

position:relative;

/*テキストの補正*/

color:#fff;

padding:10px 0

}

/*擬似要素:after*/

.parent1 .child1:after {

content: ' ';

width:0;

height: 0;

position:absolute;

border:10px solid transparent;

border-top-color:#dd0000;

top:100%;

left:50%;

}

</style>

<p class="child1">「下向き」吹き出しのサンプル</p>

</div>

吹き出し作成時のポイント

吹き出しの大きさ（幅）は、親要素である.parentのwidthで調整します。

また、heightで高さを指定する場合は、親子の要素で値を同じにすることでキレイに収まります。

親子でborderやbackgroundの色を同じにすることで、単色のベタ塗りバルーンになります。

擬似要素:after について

擬似要素:afterで吹き出しの位置と大きさを調整します。

まずはcontent:''を空値にして、border-top-color:#dd0000で矢印の向きを調整します。

top:100%で親要素の下位置に吹き出しの三角マークが来るようにして、left:50%で三角マークを中央に持ってきています。
※この辺の数値はサイトに合わせて微調整してみてください。

「下向き」吹き出しのサンプル

「下向き」吹き出しのデモ

「上向き」吹き出しの作り方

次は「上向き」吹き出しです。

<style>
/*親*/
.parent2				{
	width:100%;
	background:#dd0000;
	padding:0;
	position:relative;
}

/*子*/
.parent2 .child2			{
	background:#dd0000;
	position:relative;

	/*テキストの補正*/
	color:#fff;
	padding:10px 0
}

/*擬似要素:after*/
.parent2 .child2:after	{
	content: ' ';
	width:0;
	height: 0;
	position:absolute;
	border:10px solid transparent;
	border-bottom-color:#dd0000;
	bottom:100%;
	left:50%;
}
</style>

<div class="parent2">
<p class="child2">「上向き」吹き出しのサンプル</p>
</div>

<style>

/*親*/

.parent2 {

width:100%;

background:#dd0000;

padding:0;

position:relative;

}

/*子*/

.parent2 .child2 {

background:#dd0000;

position:relative;

/*テキストの補正*/

color:#fff;

padding:10px 0

}

/*擬似要素:after*/

.parent2 .child2:after {

content: ' ';

width:0;

height: 0;

position:absolute;

border:10px solid transparent;

border-bottom-color:#dd0000;

bottom:100%;

left:50%;

}

</style>

<p class="child2">「上向き」吹き出しのサンプル</p>

</div>

擬似要素:after について

下向きバルーンとの違いは「擬似要素:after」の値です。

border-bottom-color:#dd0000で矢印の向きを変えます。また、bottom:100%で親要素の上位置に吹き出しの三角マークが来るように調整しています。

「上向き」吹き出しのサンプル

「左向き」吹き出しの作り方

今度は「左向き」の吹き出しの作り方です。

<style>
/*親*/
.parent3				{
	width:100%;
	background:#dd0000;
	padding:0;
	position:relative;
}

/*子*/
.parent3 .child3			{
	background:#dd0000;
	position:relative;

	/*テキストの補正*/
	color:#fff;
	padding:10px 0
}

/*擬似要素:after*/
.parent3 .child3:after	{
	content: ' ';
	width:0;
	height: 0;
	position:absolute;
	border:10px solid transparent;
	border-right-color:#dd0000;
	top:25%;
	right:100%;
}
</style>

<div class="parent3">
<p class="child3">「左向き」吹き出しのサンプル</p>
</div>

<style>

/*親*/

.parent3 {

width:100%;

background:#dd0000;

padding:0;

position:relative;

}

/*子*/

.parent3 .child3 {

background:#dd0000;

position:relative;

/*テキストの補正*/

color:#fff;

padding:10px 0

}

/*擬似要素:after*/

.parent3 .child3:after {

content: ' ';

width:0;

height: 0;

position:absolute;

border:10px solid transparent;

border-right-color:#dd0000;

top:25%;

right:100%;

}

</style>

<p class="child3">「左向き」吹き出しのサンプル</p>

</div>

擬似要素:after について

同じく:afterの値の調整です。
border-right-color:#dd0000で矢印の向きを変え、top:25%right:100%で位置調整を行います。

「左向き」吹き出しのサンプル

「右向き」吹き出しの作り方

最後に「左向き」の吹き出しの作り方です。

<style>
/*親*/
.parent4				{
	width:100%;
	background:#dd0000;
	padding:0;
	position:relative;
}

/*子*/
.parent4 .child4			{
	background:#dd0000;
	position:relative;

	/*テキストの補正*/
	color:#fff;
	padding:10px 0
}

/*擬似要素:after*/
.parent4 .child4:after	{
	content: ' ';
	width:0;
	height: 0;
	position:absolute;
	border:10px solid transparent;
	border-left-color:#dd0000;
	top:25%;
	left:100%;
}
</style>

<div class="parent4">
<p class="child4">右向き吹き出しの例</p>
</div>

<style>

/*親*/

.parent4 {

width:100%;

background:#dd0000;

padding:0;

position:relative;

}

/*子*/

.parent4 .child4 {

background:#dd0000;

position:relative;

/*テキストの補正*/

color:#fff;

padding:10px 0

}

/*擬似要素:after*/

.parent4 .child4:after {

content: ' ';

width:0;

height: 0;

position:absolute;

border:10px solid transparent;

border-left-color:#dd0000;

top:25%;

left:100%;

}

</style>

<p class="child4">右向き吹き出しの例</p>

</div>

擬似要素:after について

border-left-color:#dd0000で矢印の向きを変え、top:25%left:100%で位置調整を行います。

「右向き」吹き出しのサンプル

「右向き」吹き出しの例

まとめ

「擬似要素:after」でwidth:0height:0を指定することと、borderの3辺を透明にすることで、以下のように三角マークに見える仕組みです。