css別々に

質問

チャットボットを作成し、メッセージを交互にやり取りするプログラムを書き、そのcssで端が丸くなるように設定しました。
その結果画像のように全体で丸くなってしまいました。

LINEのテキストの様にテキスト一つずつに囲いをつけたいです。
どうしたらいいでしょうか？

回答No.1

AsarKingChang · ベストアンサー

LINEのようにってのが、実は難しいのですが、
行単位なら
<div>you:<div></div></div>
<div>Taro:<div>あいさつ１</div></div>
の、最初のDIVにだけセレクタを反応させれば、
そのラインにだけ適応されます。
ただし！！！
LINEなどでは、同じ人が2回投稿すると
結合された表示になるので、その場合はCSSで
下に結合する物があるケース。
同じく上に結合する物があるケース。
両方に挟まれているケースで４種類作らないとLINEの
用にはなりませんが。ひとまず↑のやり方で、
行単位にはなりますよ。
PS
あと角度きつすぎなので、
もうちょいゆるい方がいいんじゃないかと。

お礼

いい感じに分けることが出来ました。ありがとうございました