画像と吹き出しテキストで会話風にするHTMLとCSS。 | Fantastech（ファンタステック）カスタマイズのゴール 今回のカスタマイズのゴールはこちらです。 LINEのような色にすることもできます。 もちろん、レスポンシブに対応するようにしました。では、コードをご紹介します。 HTMLコード まずはHTMLのコード。下記のコードの日本語の部分を変更するだけで「左からの吹き出し」が作れます。 <div class="balloon"> <figure class="balloon-image-left"> <img src="画像のパス（URL）" alt="画像名"> <figcaption class="balloon-image-description"> 人の名前や画像の説明 </figcaption> </figure> <div class="balloon-text-right"> <p> 吹き出しの中のテキスト </p> </div> </div> 「右からの吹き出し
CSS Arrow Please - By Simon Hoejberg - @shojberg
