CSSだけで作れる「吹き出し」をご紹介します！
会話風のものやワンポイントで使えるものなど、コピペしてお使いください。
コポペするだけでこんな感じに作れるよ！横幅の小さいスマホでみても端までくればテキストが折り返されて表示されるレスポンシブ仕様になってるから安心！
目次
基本の吹き出し
基本となる下向き中央の吹き出しです。
上向き中央の吹き出しです。
左向き中央の吹き出しです。
右向き中央の吹き出しです。
下向きの三角の位置を左側にしました。一番最初の基本となる吹き出しのleft:50%を5%にしただけです。
border-radiusを追加して角を丸くしました。
枠線
枠線だけの吹き出しです。
角を丸くしたい場合は.balloon{}の中にborder-radius:◯◯px;と追加してください。
影が濃く背景あり
影の濃い吹き出しです。
枠線（下のみ）
下だけの吹き出しです。横の表示サイズを80%にしてあります。横幅いっぱいにしたい場合は100%にしてください。
ジェネレーターで簡単！
会話風
左からの会話風の吹き出しです。
右からの会話風の吹き出しです。
HTMLにある画像URLに画像を入れるとこんな感じになります！
反対の場合は背景の色が設定されてます。背景の色が必要ない場合はCSSにある「background-color:#ebffe7;」を削除してください。
ワンポイント利用に最適！丸形
「左斜め下」にある丸い形の吹き出しです。
「左」にある丸い形の吹き出しです。
「左斜め上」にある丸い形の吹き出しです。
「上」にある丸い形の吹き出しです。
「右斜め上」にある丸い形の吹き出しです。
「右」にある丸い形の吹き出しです。
「右斜め下」にある丸い形の吹き出しです。
「下」にある丸い形の吹き出しです。
心の声や考え事
心の声や考え事の時に使えそうな吹き出しです。
心の声や考え事の時に使えそうな吹き出しです。
おしゃれな吹き出しです。
最後に
いかがでしたか？CSSの疑似要素であるbeforeとafterを使うといろいろなことができるようになりますね。
他にもコピペして使えるものを用意したので参考程度に引き続き見ていってください。
よそのコピペではうまくいかなくて前々から滞っていた吹き出しができるようになりそうでうれしいです！
1つ質問ですが、こちらで会話風吹き出しを作ると、キャラの顔がみゆさんのように円いっぱいになりません。
トリミングしているつもりですが、円の下の方に偏ってしまいます。
なにか改善策があればお教えいただけると幸いです。
しるみんさん、コメントありがとうございます。
＞円の下の方に偏ってしまいます
という事ですが、以下2点程お試し下さい。
1）画像サイズが大きすぎではないでしょうか。250px x 250px以内のものを入れてみるとどうなるでしょうか。
2）画像に隙間はないでしょうか。トリミングもしているとのことですが、頭の上に隙間があるとその部分も表示されてしまいます。髪の毛上ぎりぎりにトリミングをし、なるべく隙間なく表示させたい画像を入れてみるとどうなるでしょうか。
どのような状況か把握しきれず、あいまいな回答で申し訳ありません。
みゆ様
こちらこそコメントありがとうございました！
隙間はなかったのですが、ご指摘の通り、画像のサイズに問題がありました。
250×250に変更し、満足いく結果が得られました。
CSSの勉強もしつつ、色々手を加えていきたいです。
この度はありがとうございました。