ホームページ制作で吹き出しを使ったデザインを作成することがあります。

備忘録がてらサンプルをいくつか作成したので、CSSで作る吹き出し12パターンをまとめてご紹介します。

CSSで作る吹き出しのメリットとデメリット

CSSで作るメリット

• 画像を使わないのでデザインの変更が楽にできる
• 中に入れるテキストの長さを自由に変更できる
• スマホ対応が楽にできる
• Retinaディスプレイでも綺麗に見える

CSSで作るデメリット

• ブラウザによってレンダリングに差が出る場合がある

特になんの処理もしていない場合、IE8以下は角丸が使用できないのでちゃんと表示されません。
用途に合わせて使用してみてください。

吹き出しサンプル

「枠線ありの吹き出し」と「枠線なしの吹き出し」は汎用性が高そうなので1つずつサンプルを用意しました。

枠線ありの吹き出し

その1

その2

その3

その4

枠線を作る場合三角の部分を2つ作り、大きさを少し変えて背景色でくり抜くというような処理をしています。

枠線なしの吹き出し

その1

その2

その3

その4

枠線がない場合は、くり抜く処理のある枠線がある吹き出しよりコードが少し短くなります。

内側に三角が付いている吹き出し

内側に三角をくっつけるタイプです。三角の部分は背景色に合わせて使ってみてください。

ジェネレーターもあります

cssarrowplease

簡単に吹き出しが作れる有名なジェネレーター。

まとめ

最近はスマホサイトの重要性がどんどん高まっていく傾向にあります。
CSSで作ると画像を書き出す手間が減りスマホサイト対応がしやすく、制作時間の削減にも役立つと思います。

便利なジェネレーターもありますが、基本の構造を知っているとカスタマイズもしやすくなると思うので、ぜひ自分でも書いてみてくださいね。