こんにちは、パソコンインストラクターの川上雄大です。
前回、吹き出し囲み枠の記事をアップしましたが、
今度は、やり取りする感じの、こんな吹き出しボックスはどうですかね？
（↑画像です）
実際にはこんな感じになります↓
HTMLはそれぞれこんな感じです。
<div style="position: absolute;margin-left:0;">川上</div>
<div style="position: absolute;margin-left:56px;background:#008000; color:#ffffff; border:1px solid #008000; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">おはよう！</div>
<div style="position: relative;margin-top:8px;margin-left:40px; border-top: 8px solid transparent; border-right: 8px solid #008000; border-bottom: 8px solid transparent; border-left: 8px solid transparent; width: 0; height: 0;"> </div>
と、
<div style="position: absolute; margin-right: 0px; text-align: right;">生徒</div>
<div style="position: absolute;margin-left:56px;background:#1E93C1; color:#ffffff; border:1px solid #1E93C1; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">おはようございます！</div>
<div style="position: relative;margin-top:8px;margin-left:40px; border-top: 8px solid transparent; border-right: 8px solid #1E93C1; border-bottom: 8px solid transparent; border-left: 8px solid transparent; width: 0; height: 0;"> </div>
と、
<div style="position: absolute; margin-right: 0px; text-align: right;">C子</div>
<div style="position: absolute;margin-left:56px;background:#FF14AA; color:#ffffff; border:1px solid #FF14AA; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">おっは～～～！</div>
<div style="position: relative;margin-top:8px;margin-left:40px; border-top: 8px solid transparent; border-right: 8px solid #FF14AA; border-bottom: 8px solid transparent; border-left: 8px solid transparent; width: 0; height: 0;"> </div>
といった感じになります。
そのままタグをコピペして、文字を変えるとすぐにできると思います。
もっと手の込んだ吹き出しを作るには、このようなサイトをご参考にされるとよいと思います↓
以上、こんな吹き出し、でした。
LIDS札幌・ライフデザインスクール
川上 雄大
