CSSだけで作れる「吹き出し」をご紹介します！
会話風のものやワンポイントで使えるものなど、コピペしてお使いください。
コポペするだけでこんな感じに作れるよ！横幅の小さいスマホでみても端までくればテキストが折り返されて表示されるレスポンシブ仕様になってるから安心！
基本の吹き出し
基本となる下向き中央の吹き出しです。
上向き中央の吹き出しです。
左向き中央の吹き出しです。
右向き中央の吹き出しです。
下向きの三角の位置を左側にしました。一番最初の基本となる吹き出しのleft:50%を5%にしただけです。
border-radiusを追加して角を丸くしました。
枠線
枠線だけの吹き出しです。
角を丸くしたい場合は.balloon{}の中にborder-radius:◯◯px;と追加してください。
影が濃く背景あり
影の濃い吹き出しです。
枠線（下のみ）
下だけの吹き出しです。横の表示サイズを80%にしてあります。横幅いっぱいにしたい場合は100%にしてください。
ジェネレーターで簡単！
会話風
左からの会話風の吹き出しです。
右からの会話風の吹き出しです。
HTMLにある画像URLに画像を入れるとこんな感じになります！
反対の場合は背景の色が設定されてます。背景の色が必要ない場合はCSSにある「background-color:#ebffe7;」を削除してください。
ワンポイント利用に最適！丸形
「左斜め下」にある丸い形の吹き出しです。
「左」にある丸い形の吹き出しです。
「左斜め上」にある丸い形の吹き出しです。
「上」にある丸い形の吹き出しです。
「右斜め上」にある丸い形の吹き出しです。
「右」にある丸い形の吹き出しです。
「右斜め下」にある丸い形の吹き出しです。
「下」にある丸い形の吹き出しです。
心の声や考え事
心の声や考え事の時に使えそうな吹き出しです。
心の声や考え事の時に使えそうな吹き出しです。
おしゃれな吹き出しです。
最後に
いかがでしたか？CSSの疑似要素であるbeforeとafterを使うといろいろなことができるようになりますね。
他にもコピペして使えるものを用意したので参考程度に引き続き見ていってください。
この記事へのコメントはありません。