2016どうも、今回は会話表現や引用に使える吹き出しデザインをCSSで作成していきたいと思います。難しいことはやりませんがCSSのbeforeとafterの概念だけは知らないと理解できないと思います。before,afterを知らない方は下記の記事を読んでからこの記事を読むとより理解が深まります。擬似クラス・擬似要素の使い方とまとめではさっそく紹介していきます。吹き出し1(横形式)吹き出し2(縦形式)吹き出し3(縦形式)吹き出し1あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。class="arrow_question">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。class="arrow_answer">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。hidden;}吹き出しを横に表示したベーシックな会話タイプに使える吹き出しデザインになります。写真はborder-radiusで丸く表示しているので正方形サイズの写真を使用しないとアスペクト比が崩れて歪んでしまいます。吹き出し2あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。class="fukidashi-box">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。20px;}こちらは吹き出しを上に表示したタイプになります。会話でも使用できますが何か人物の引用でセリフなんかを表示するときに使えると思います。今度試しに使ってみようと思います。吹き出し3Mr.Beanあのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。Mr.Beanあのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。id="balloon-1-top">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。id="balloon-2-top">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。id="balloon-1-top">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。id="balloon-2-top">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。-1;}こちらは下に吹き出しを表示させてるタイプになります。会話形式に使用でき、レスポンシブに対応するときも吹き出しの横幅だけ変わるだけなので一番楽な吹き出しだと思います。以上、シンプルで使い易い吹き出しデザインをご紹介しました。基本的にコピペでOKですがダメだった場合ご自分でCSSを調整していただく必要がございます。よろしければシェアをお願いします。デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。意外と知らない隣接セレクタの使い方formなどで簡単に使用できるCSSだけで作れるステッププログレスバーBOOTSTRAP3のモーダルが便利そうなので使ってみた結果便利でした。YamashitaTop。