2019/10/27LINE・チャットのようなコミュニケーションツールでの吹き出しや、ブログ・Webサイトで見られる吹き出しなど、吹き出しをデザインに組み込むケースも多いと思います。今回はCSSで吹き出しを作りたい方向けに、画像を使わずにCSSのみで吹き出しデザインを作成する方法と、吹き出し作成に便利なジェネレーターを紹介します。bubbleCSSで吹き出しを作る方法1吹き出し(下向き)CSSで吹き出しを作り方は、文章を書くエリア(要素)に疑似クラス(before)で吹き出し部(三角形)を追加して形成します。下向きにしたい場合はborderプロパティを下記のように記述します。10px(左)と、下の線幅を0にして下向きの三角を作ります。CSSでの三角形の作り方については下記記事を参考にしてみてください。10px(左)と、上の線幅を0にして上向きの三角を作ります。10px(左)と、右の線幅を0にして右向きの三角を作ります。0(左)と、左の線幅を0にして左向きの三角を作ります。-10px;}5吹き出し部の形状を変える(其の1)吹き出し部(三角形)を鋭角にしたい場合の例です。10px(左)と、上の線幅を20pxにサイズ変更してにして鋭角の三角を作ります。-10px;}6吹き出し部の形状を変える(其の2)吹き出し部(三角形)のバリエーション例です。0(左)とすることで角度が変わった三角を作ることができます。-10px;}7円形の吹き出し円形の吹き出しを作る場合は、5で紹介した鋭角の三角形を使用した方がキレイな吹き出しを作れます。-10px;}8枠線の吹き出し枠線の吹き出しは吹き出し部(三角形)の疑似クラス(before・after)を用い作成します。beforeとafterをz-index(深度)で重ね合わせafter(下層)の表示位置を調整し枠線を作ります。-14px;}簡単に吹き出しを作れるジェネレーターこれまでCSSでの吹き出しに作り方を解説しましたが、CSSなんて理解しなくてもいいから手軽にソースだけ欲しいという方もいるでしょう。そんな方はブラウザでCSSの吹き出しを作ることができるジェネレーターを利用してみましょう。簡単な操作で吹き出しを作成できるジェネレーターを4サイト紹介します。吹き出しデザインのアイデアコードコミュニティサイトCodepenで公開しているCSSで作られた吹き出しのアイデアからデザイン例をピックアップしました。CSSでの吹き出しを作成する時の参考にしてみてください。CodePen.会話調の文章や、強調したい箇所など効果的に使用することができますね。アイデア次第では、個性的な吹き出しも作成できますので参考にしてみてください。以上、CSSで作成する吹き出しとデザインのアイデアでした。