[CSS] 画像を用いずにCSSとHTMLで吹き出しを作成する

こんにちは、@yoheiMuneです。
以前にHTMLとCSSを使って三角形を作成する方法を書いた内容の続きで、 今回はHTMLとCSSだけで吹き出しを作成する方法をブログに書きたいと思います。

画像を用いずにHTMLとCSSだけで吹き出しを作成する

三角形を作る実装を、:before疑似要素と:after疑似要素に用いることで、吹き出しを作成したいと思います。
今回以下のようなものを作成します。

（ソースコード）

<style type="text/css">
/* 吹き出し本体部分のスタイル */
.baloon {
  width: 200px;
  height: 100px;
  background-color: #fffaee;
  border: 2px solid #66ff66;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  margin: 20px auto;
  position: relative;
}
/* 吹き出し三角部分のスタイル */
.baloon:before, .baloon:after {
  width: 0;
  height: 0;
  content: "";  
  position: absolute;
  /* 吹き出し三角形を右側につける */
  right: 0px;
}
/* 吹き出し三角部分のボーダーとなる部分のスタイル */
.baloon:before {
 /* 吹き出し三角形の大きさを指定する */
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #66ff66;
  border-right: 0px solid transparent;
  /* 右側の上下中央に表示するため50% */
  /* パーセント指定することで、吹き出しの高さが可変でも対応できる */
  top: 50%;
  /* 三角形の大きさ分、ネガティブマージンを取る */
  margin-right: -20px;
  margin-top: -20px;
}
/* 吹き出し三角形部分のボーダー内側のスタイル */
.baloon:after {
  /* :beforeより2px小さくすることで、:beforeがボーダーとして見える */
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 18px solid #fffaee;
  border-right: 0px solid transparent;
  top: 50%;
  margin-right: -18px;
  margin-top: -18px;
}
</style>
<div class="baloon"></div>

上記のスタイルを指定することで、吹き出しを作成することができます。
最初はHTMLでなんで三角形ができるの？と不思議でしたが、順を追ってまなぶことでなんとか理解できてスッキリしました(*ﾟ▽ﾟ)ﾉ

また、:after要素を使わない場合には、以下のようにボーターの拡張が三角形になります。
こーゆうスタイルも便利。


上記の吹き出しをベースにして、三角形の大きさ・形・場所を変更することでいろいろな吹き出しを作ることができます。
例えば、吹き出しの三角形を上側／左右左寄りに表示する場合には、以下のように実装します。



（ソースコード）

〜 抜粋 〜

.baloon3:before, .baloon3:after {
	/* 上に表示する */
	top: 0px;
}
.baloon3:before {
	/* 矢印を上に表示する */
	border-top: 0px solid transparent;
	border-bottom: 10px solid #66ff66;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-right: -10px;
	/* 左右で左寄りに表示 */
	left: 25%;
	margin-top: -10px;
}
.baloon3:after {
	border-top: 0px solid transparent;
	border-bottom: 8px solid #fffaee;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	margin-right: -8px;
	left: 25%;
	margin-top: -8px;
}

関連記事

吹き出しの三角形部分の色々なカスタマイズについて、以下の記事が参考になるかもしれません。
少しでもお役になれば幸いです。
- HTMLとCSSを使って三角形を作成する方法

最後に

仕事でお世話になっている案件で、吹き出しを行数可変で表示したいというお話があって、吹き出しの実装を学んだのでブログに書いてみました。
今回は吹き出しに陰をつける要件はなかったのですが、いろいろと調べると陰もつけられるようなので、今後挑戦したいと思います。

最後までご覧頂きましてありがとうございました。