• RSS

[CSS]CSS で作る「吹き出し」のサンプル

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

上下左右の4方向に対応した吹き出しサンプルです。

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

まずは「下向き」からです。
<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>

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

吹き出しの大きさ(幅)は、親要素である.parentwidth で調整します。

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

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


擬似要素: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>

擬似要素: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>

擬似要素: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>

擬似要素:after について

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

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

「右向き」吹き出しの例



まとめ

「擬似要素:after」で width:0 height:0 を指定することと、borderの3辺を透明にすることで、以下のように三角マークに見える仕組みです。
[CSS]CSS で作る「吹き出し」のサンプル



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す