以前、CSSで吹き出しを作って対談式のレイアウトを組んでみたんですが、PCのみのレイアウト組みだったので、新たにスマホ版の物を組んでみました(・∀・) PC版との違いを検証してみれば面白そうなので、見比べながら検証しようと思います。 @akiueoさんのブログで「どなたか改良版を」って書いてあったので、LINEのグループトークみたいなレイアウトの改良版をアップします(頼まれてもいませんが・・・) CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2 以前組んだ奴とほとんど同じレイアウトで対応させた例 以前の物は横幅指定していたため、スマホではキチンと表示されませんので、width指定のところはすべて%表示に治す必要があります。【HTML】はほとんど変更なしです。<img>に直接指定しているサイズ指定を取っ払うのみです。 HTMLマークアップ 【HTML】 <body>
![(K)CSSで作った対談(会話)式吹き出しをLINE風にしてスマホにも対応させる | web(K)campus|WEBデザイナーのための技術系メモサイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/9bd50909fad8609f317ae2da8d50f9f7279cdc57/height=288;version=1;width=512/https%3A%2F%2Fwebkcampus.com%2Fwp-content%2Fuploads%2F2014%2F11%2Ffukidashi_line.jpg)