【CSS】会話表現や引用に使える吹き出しデザイン 3個

どうも、今回は会話表現や引用に使える吹き出しデザインをCSSで作成していきたいと思います。特に難しいことはやりませんがCSSのbeforeとafterの概念だけは知らないと理解できないと思います。ですので、before,afterを知らない方は下記の記事を読んでからこの記事を読むとより理解が深まります。

CSS 擬似クラス・擬似要素の使い方とまとめ

ではさっそく紹介していきます。

目次

  • 吹き出し1(横形式)
  • 吹き出し2(縦形式)
  • 吹き出し3(縦形式)

吹き出し1

質問者の写真
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
解答者の写真
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
HTML

CSS

吹き出しを横に表示したベーシックな会話タイプに使える吹き出しデザインになります。写真はborder-radiusで丸く表示しているので正方形サイズの写真を使用しないとアスペクト比が崩れて歪んでしまいます。

吹き出し2

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

質問者の写真Mr.Bean

HTML

CSS

こちらは吹き出しを上に表示したタイプになります。会話でも使用できますが何か人物の引用でセリフなんかを表示するときに使えると思います。今度試しに使ってみようと思います。

吹き出し3

質問者の写真Mr.Bean
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
Mr.Bean質問者の写真
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
HTML

CSS

こちらは下に吹き出しを表示させてるタイプになります。会話形式に使用でき、レスポンシブに対応するときも吹き出しの横幅だけ変わるだけなので一番楽な吹き出しだと思います。

以上、シンプルで使い易い吹き出しデザインをご紹介しました。基本的にコピペでOKですがダメだった場合ご自分でCSSを調整していただく必要がございます。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。