カスタマイズのゴール 今回のカスタマイズのゴールはこちらです。 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> 「右からの吹き出し
![画像と吹き出しテキストで会話風にするHTMLとCSS。 | Fantastech(ファンタステック)](https://cdn-ak-scissors.b.st-hatena.com/image/square/07f8314c80be1facd8197409e91c9ad7d2c6dfdc/height=288;version=1;width=512/https%3A%2F%2Ffantastech.net%2Fwp-content%2Fuploads%2F2016%2F06%2Fkaiwa-text-2-e1515645919706.jpg)