CSSで吹き出しをつける【簡単】

こんにちは、mickです。

プログラマ系SEとしてIT企業で11年勤務。

WordPressを扱うついでにCSSを再勉強中です。

今回は吹き出しをCSSで実装してみます。

吹き出しをつける
- サンプルレビュー
コーディング
- HTML部分
- CSS部分
解説
まとめ。

吹き出しをつける

吹き出しをブログの中に入れます。

サンプルレビュー

コーディング

HTML部分

<p class="balloon">吹き出しを実現するにはどうすればよいですか？</p>

<p class="balloon-r">こうやって実装します。</p>

CSS部分

.balloon {
	color: #ffffff;
	background-color: #4169e1;
	border: 1px solid #ffffff;
	border-radius: 5px;
	box-shadow: 0px 0px 0px 5px #4169e1;
	padding: 10px;
	position: relative;
}

.balloon::before{
	content: '';
	position: absolute;
	border: 15px solid transparent;
	border-top: 20px solid #4169e1;
	border-bottom: 0;
	top: 100%;
	left: 15px;
	-webkit-transform: translateY(6px);
	transform: translateY(6px);
}

.balloon-r {
	color: #ffffff;
	background-color: #4169e1;
	border: 1px solid #ffffff;
	border-radius: 5px;
	box-shadow: 0px 0px 0px 5px #4169e1;
	padding: 10px;
	position: relative;
	text-align: right;
}

.balloon-r::before{
	content: '';
	position: absolute;
	border: 15px solid transparent;
	border-top: 20px solid #4169e1;
	border-bottom: 0;
	top: 100%;
	right: 15px;
	-webkit-transform: translateY(6px);
	transform: translateY(6px);
}

解説

セレクタ「.balloon」部分。「border-radius」で吹き出しの角を丸く演出します。

疑似要素「.balloon:before」部分。「border」で吹き出しの三角部分の太さを決めます。そして「transparent」を指定して一度ボーダーの色を透明にします。次に吹き出しの三角部分にあたる「border-top」を指定して透明にならないようにします。三角部分の大きさと傾きは、この「border」を変えることで変更できます。「translateY」で6px動かしているのは、「border」と「box-shadow」の合計が6pxだからです。

セレクタ「.balloon-r」と疑似要素「.balloon-r:before」は吹き出しの位置を右に寄せただけになります。セレクタ「.balloon」と疑似要素「.balloon:before」とほぼ同じですが、「text-align」で文字を右寄せにしています。また「right」で三角部分が右に来るように指定しています。