吹き出しをCSSで作る方法。

ワードプレスで、見出しを吹き出しのデザインにしているブログを良く見かけます。
それで、今回は吹き出しをCSSで作ってみることにしました。
<div>タグでコードを書いていますが、ここを<h2>のような見出しタグに変更してカスタマイズすると吹き出し型の見出しを作ることができますよ。
ぜひ活用してみてください。

CSSで吹き出しを作る方法

右向きの吹き出し

このHTMLタグの「コメント」の部分に任意の文章を入れます。

<div class="baloon-right">コメント</div>

そして、スタイルシートに以下のスタイルを記載します。

.baloon-right{
	margin-right:20px;
	margin-top:10px;
	margin-bottom:10px;
	padding:10px;
	border-radius:10px;
	position:relative;
	height:auto;
	width:50%;
	border: 1px solid #e6a117;
	float:right;
	background-color: #e6a117;
	color: #fff;
}

.baloon-right:before{
	position: absolute;
	left: 100%;
	top: 20%;
	content:" ";
	border-left: 20px solid #e6a117;
	border-top: 10px solid transparent;	
	border-right: 20px solid transparent;	
	border-bottom: 10px solid transparent;		
}

左向きの吹き出し

このHTMLタグの「コメント」の部分に任意の文章を入れます。

<div class="baloon-left">コメント</div>

そして、スタイルシートに以下のスタイルを記載します。

.baloon-left{
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
	padding:10px;
	border-radius:10px;
	position:relative;
	height:auto;
	width:50%;
	border: 1px solid #e6a117;
	float:left;	
}
.baloon-left:before{
	position: absolute;
	right: 100%;
	top: 20%;
	content:" ";
	border-right: 20px solid #e6a117;
	border-top: 10px solid transparent;	
	border-left: 20px solid transparent;	
	border-bottom: 10px solid transparent;		
}
.baloon-left:after{
	position: absolute;
	left: -38px;
	top: 20%;
	content:" ";
	border-right: 20px solid #fff;
	border-top: 10px solid transparent;	
	border-left: 20px solid transparent;	
	border-bottom: 10px solid transparent;		
}

下向きの吹き出し

このHTMLタグの「コメント」の部分に任意の文章を入れます。

<div class="baloon-up">コメント</div>

そして、スタイルシートに以下のスタイルを記載します。

.baloon-up{
	margin-bottom:20px;
	margin-top:10px;
	padding:10px;
	border-radius:10px;
	position:relative;
	height:auto;
	width:100%;
	border: 1px solid #e6a117;
	background-color: #e6a117;
	color: #fff;
}
.baloon-up:before{
	position: absolute;
	left: 10%;
	bottom: -40px;
	content:" ";
	border-top: 20px solid #e6a117;
	border-right: 10px solid transparent;	
	border-bottom: 20px solid transparent;	
	border-left: 10px solid transparent;		
}

上向きの吹き出し

このHTMLタグの「コメント」の部分に任意の文章を入れます。

<div class="baloon-down">コメント</div>

そして、スタイルシートに以下のスタイルを記載します。

.baloon-down{
	margin-top: 20px;
	margin-bottom: 10px;
	padding:10px;
	border-radius:10px;
	position:relative;
	height:auto;
	width:100%;
	border: 1px solid #e6a117;
}
.baloon-down:before{
	position: absolute;
	right: 10%;
	top: -40px;
	content:" ";
	border-bottom: 20px solid #e6a117;
	border-right: 10px solid transparent;	
	border-top: 20px solid transparent;	
	border-left: 10px solid transparent;		
}
.baloon-down:after{
	position: absolute;
	right: 10%;
	top: -38px;
	content:" ";
	border-bottom: 20px solid #fff;
	border-right: 10px solid transparent;	
	border-top: 20px solid transparent;	
	border-left: 10px solid transparent;		
}

ジェネレータの紹介

必要事項を入力すると、吹き出しのCSSを出してくれる便利なジェネレーターもあります。CSSが良く分からない場合でも、これなら使えそうです😊
http://cssarrowplease.com/