htmlとcssで吹き出し 基本編

htmlとcssで吹き出しを作る方法です。

こんな感じの吹き出し。

See the Pen balloon by HIROMITSU Daisuke (@daisuke718) on CodePen.

背景とかでごまかしてますがｗ
cssのballoonクラスに吹き出しの設定についてまとめています。

• 吹き出しをくっつけたい要素のpositionをrelativeにする
• beforeまたはafter擬似要素で吹き出し部分を表示させる（上記デモではbeforeを使ってます。）
• beforeまたはafter擬似要素のpositionをabsoluteにする
• width, heightは0とする
  • 0以外でも実装できるかもしれないけどやったことない
• top, bottom, left, rightで大体の位置を決める(上記デモではbottom, leftで決めてます)
• marginを使って位置を微調整
• 吹き出しの実体はborderで実現。デモではblackとtransparent(透明部分)を使って形を変えてます。

これ、正直文章でいろいろ説明しても分からないと思います 。
特にborder-colorの部分。
興味ある方は自分でいろいろいじってみてくださいｗ