こんにちは。

今日はCSSで吹き出しを作る方法を書こうと思います！

ネット上にはコードのコピペ素材がたくさんありますが、仕組みがわかれば

誰でも自分でコードがかけると思いました＾＾

ではさっそくみていきましょう♩

CSSで吹き出しを作る方法

吹き出しといえばご存知の通り、下記のような物ですよね。

四角部分は普通に作れそうだけど、下の三角部分はどうやって作るんだ・・・？

と思いますよね(^^;

答えをいうと、擬似要素を使って作ります！

「before,after」といったものですね＾＾

初耳だという方は調べてみてください(^○^)

では三角形を作る仕組みをみていきましょう！

吹き出しの三角形部分の作り方

まず、前提条件としてCSSのborderプロパティを使います！

HTMLでは箱を作り、

<div class="ex2"></div>

CSS上で、四角形に４辺ボーダーを指定します。

すると、

このように４辺の端は斜めになっていることが分かります。

この性質を利用していくわけですね＾＾

しかし、このままではまだピンときません。

次の段階として、横幅（width）、高さ（height）を０pxにしてみます。

するとどうなると思いますか？？

答えはこうです！

この段階で三角ができましたね！

次に赤部分を残して、他の３辺の色を透明色にします。

すると

まさに吹き出しの部分になります！

これを擬似要素で作ればうまく出来そうですね＾＾

そして吹き出しを完成させるには、擬似要素に加えてpositionプロパティも使います。

今回はHTMLで「fukidashi1」というクラス名の<div>を作った上で下のCSSを指定します。

positionを使い、ボーダーのwidth２つ分bottomを下げます。

rightで位置を調節して・・・

すると下記のように吹き出しが出来ました！

いかがだったでしょうか？

最後は駆け足になってしまいましたが、なんとな〜く仕組みは理解できましたか？(＞＜)

仕組みを理解できれば三角形部分を変形させて応用を効かせることもできるので色々試してみてください＾＾

では今日はここまで〜〜

三角形自動生成ツールもあります！

この存在を知らなかったのですが、とても便利です！