こちらの記事 に出てくる会話部分のCSSです。
ほぼ参考サイトのままですが、文脈上、自分側の吹き出しが2人の部分があって、
参考サイトのCSSでは対応できなかったので、ちょっと追加しました(ほげほげ-double
のやつ)。
相手側のふきだしも同様に対応すればイケると思います。
あと、参考サイトより、角丸をすこし抑えました。
<style> /*********************************** チャット風レイアウト Special Thanks To: [レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep http://vdeep.net/css-chat-design レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】 | ガジェニュー http://smart-phone.783783783.com/2016/02/25/chatlike-css/ ************************************/ /*画像左側のチャット*/ .chat-box { width: 100%; height: auto; overflow: hidden; margin-bottom: 20px; } .chat-face { float: left; margin-right: -120px; } .chat-face img { width: 90px; height: 90px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 0 4px #ddd; } .chat-area { width: 100%; float: right; } .chat-hukidashi { display: inline-block; padding: 15px 20px; margin-left: 120px; margin-top: 8px; border-radius: 10px; position: relative; background-color: #D9F0FF; } .chat-hukidashi p { margin-bottom: 0px; } .chat-hukidashi:after { content: ""; position: absolute; top: 35px; left: -10px; margin-top: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #D9F0FF transparent transparent; } /*画像左側のチャット(2人)*/ .chat-box-double { width: 100%; height: auto; overflow: hidden; margin-bottom: 20px; } .chat-face-double { float: left; margin-right: -220px; } .chat-face-double img { width: 90px; height: 90px; display: inline-block; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 0 4px #ddd; } .chat-area-double { width: 100%; float: right; } .chat-hukidashi-double { display: inline-block; padding: 15px 20px; margin-left: 220px; margin-top: 8px; border-radius: 10px; position: relative; background-color: #D9F0FF; } .chat-hukidashi-double p { margin-bottom: 0px; } .chat-hukidashi-double:after { content: ""; position: absolute; top: 35px; left: -10px; margin-top: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #D9F0FF transparent transparent; } /*画像右側のチャット*/ .chat-box-right { width: 100%; height: auto; overflow: hidden; margin-bottom: 20px; } .chat-face-right { float: right; margin-left: -120px; } .chat-face-right img { width: 90px; height: 90px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 0 4px #ddd; } .chat-area-right { width: 100%; float: left; } .chat-hukidashi-right { display: inline-block; padding: 15px 20px; margin-right: 120px; margin-top: 8px; border-radius: 10px; position: relative; background-color: #BCF5A9; float: right; } .chat-hukidashi-right p { margin-bottom: 0px; } .chat-hukidashi-right:after { content: ""; position: absolute; top: 35px; right: -20px; margin-top: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 10px 10px; border-color: transparent transparent transparent #BCF5A9; } /*スマホの時は画像を小さく*/ @media screen and (max-width: 440px) { /*画像左側のチャット*/ .chat-face { float: left; margin-right: -80px; } .chat-face img { width: 60px; height: 60px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 0 4px #ddd; } .chat-hukidashi { display: inline-block; padding: 10px 10px; margin-left: 80px; margin-top: 0px; border-radius: 10px; position: relative; background-color: #D9F0FF; min-height: 3em; } /*画像左側のチャット(2人)*/ .chat-face-double { float: left; margin-right: -150px; } .chat-face-double img { width: 60px; height: 60px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 0 4px #ddd; } .chat-hukidashi-double { display: inline-block; padding: 10px 10px; margin-left: 150px; margin-top: 0px; border-radius: 10px; position: relative; background-color: #D9F0FF; min-height: 3em; } /*画像右側のチャット*/ .chat-face-right { float: right; margin-left: -80px; } .chat-face-right img { width: 60px; height: 60px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 0 4px #ddd; } .chat-hukidashi-right { display: inline-block; padding: 10px 10px; margin-right: 80px; margin-top: 0px; border-radius: 10px; position: relative; background-color: #BCF5A9; float: right; min-height: 3em; } } </style> <div class="chat-box"> <div class="chat-face"> <img src="https://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/> </div> <div class="chat-area"> <div class="chat-hukidashi"> おっおっおっ </div> </div> </div> <div class="chat-box-double"> <div class="chat-face-double"> <img src="https://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/> <img src="https://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/> </div> <div class="chat-area-double"> <div class="chat-hukidashi-double"> おっおっおっ </div> </div> </div> <div class="chat-box-right"> <div class="chat-face-right"> <img src="https://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="50" height="50"/> </div> <div class="chat-area-right"> <div class="chat-hukidashi-right"> おっおっおっ </div> </div> </div>