web-dev-qa-db-ja.com

Facebookメッセンジャーのようなチャットバブルを作成する方法

enter image description here

このようにチャットの吹き出しを作成するにはどうすればよいですか。より具体的には、1つのタイプのユーザーによる2つ以上の連続したメッセージを全体として1つのバブルにグループ化する方法。たとえば、送信者の場合-最初のメッセージの右下ボーダーは0で、その間のメッセージの右上、下は0ボーダー半径、最後のメッセージは右上0ボーダー半径です。 JavaScriptを使用する必要がありますか、それともCSSを使用して実行できますか？.

HTML構造

<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

どのようなCSSクラス/スタイルを使用する必要がありますか？

htmlcsschat
13
Raj Sharma

これはかなり基本的な例ですが、必要なすべての基本を説明しているはずです。

ほとんどの解決策は+隣接する兄弟セレクター 。この場合、同じ人からの連続する複数のメッセージに異なるボーダー半径を適用するために使用されます。

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  display:inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.him{
  background: #eee;
  float: left;
}

.me{
  float: right;
  background: #0084ff;
  color: #fff;
}

.him + .me{
  border-bottom-right-radius: 5px;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.me:last-of-type {
  border-bottom-right-radius: 30px;
}
<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>
24
Serg Chernata

このように、開始クラスと終了クラスが必要になります

li {
  border: 1px solid black;
  list-style-type: none;
  margin: 2px 0;
  padding: 2px 5px;
}
.him {
  float: left;
  border-radius: 0 10px 10px 0;
  clear: both;
}
.me {
  float: right;
  border-radius: 10px 0 0 10px;
  clear: both;
}
.him.start {
  border-top-left-radius: 10px;  
}
.him.end {
  border-bottom-left-radius: 10px;  
}
.me.start {
  border-top-right-radius: 10px;  
}
.me.end {
  border-bottom-right-radius: 10px;  
}
<ul>
 <li class="him start">By Other User</li>
 <li class="him">By Other User</li>
 <li class="him end">By Other User</li>
    
 <li class="me start">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me end">By this User, fourth message</li>

 <li class="him start">By Other User</li>
 <li class="him">By Other User</li>
 <li class="him end">By Other User</li>
    
 <li class="me start">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me end">By this User, fourth message</li>

</ul>
2
LGSon

これは純粋なcssソリューションですが、グループの最後のメッセージが送信されたときにchat__bubble--stopクラスを検出して適用できるかどうかにかかっています。残念ながら、疑似クラス:last-of-typeは使用できません。他の人が指摘したように、グループの最後のメッセージは必ずしも会話の最後ではありません。また、隣接する兄弟セレクター（+）も使用します。

.chat {
  list-style-type: none;
  width: 20em;
}

.chat__bubble {
  margin-bottom: 3px;
  padding: 5px 10px;
  clear: both;
  border-radius: 10px 10px 2px 2px ;
}

.chat__bubble--rcvd {
  background: #f2f2f2;
  color: black;
  float: left;
  border-bottom-right-radius: 10px;
}

.chat__bubble--sent {
  background: #0066ff;
  color: white;
  float: right;
  border-bottom-left-radius: 10px;
}

.chat__bubble--sent + .chat__bubble--sent {
  border-top-right-radius: 2px;
}

.chat__bubble--rcvd + .chat__bubble--rcvd {
  border-top-left-radius: 2px;
}

.chat__bubble--stop {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
<ul class="chat">
 <li class="chat__bubble chat__bubble--rcvd chat__bubble--stop">What are you up to?</li>
 <li class="chat__bubble chat__bubble--sent">Not much.</li>
 <li class="chat__bubble chat__bubble--sent">Just writing some CSS.</li>
 <li class="chat__bubble chat__bubble--sent">I just LOVE writing CSS.</li>
 <li class="chat__bubble chat__bubble--sent chat__bubble--stop">Do you?</li>
 <li class="chat__bubble chat__bubble--rcvd">Yeah!</li>
 <li class="chat__bubble chat__bubble--rcvd">It's super fun.</li>
 <li class="chat__bubble chat__bubble--rcvd chat__bubble--stop">... SUPER fun.</li>
</ul>
2
metalex9

テキストの吹き出しを作成する場合は、この記事を参考にしてください： https://www.templatemonster.com/blog/chat-bubbles-css-ui-tutorial/

開始バブルと終了バブルについては、JQueryを使用して、親コンテナーに基づいてCSSプロパティを識別および変更します。送信された画像が必要な場合は、それらをli内にラップし、フロートライトまたは相対オブジェクト（li）内の絶対位置を実行する必要があります。

<ul class="ulContainer">
  <li>test1</li>
  <li>test1</li>
  <li>test1</li>
</ul>

CSS：

.ulContainer li{
  width:200px;
  height:20px;
  background-color:#9abff9;
  list-style-type:none;
  margin:10px 0 10px 0;
  padding: 3px 3px 3px 5px;
  border-radius: 10px 2px 2px 10px;
}

以下のスクリプトを使用して、最初と最後のliを変更します。

$('.ulContainer li:first').css('border-top-right-radius','10px');
$('.ulContainer li:last').css('border-bottom-right-radius','10px');

これがJSFiddleです： https://jsfiddle.net/s60dgfw2/

コメントに基づいて更新：

これは、JQueryを使用せずに達成しようとしていることに最も近いと思います。 JQueryを介して.each（）ステートメントのグループ化からのみ取得できる高度なセレクターが必要です。または、リストに複数のcssクラスを追加します。

複数のCSSクラスでそれを行う方法については LGSonの応答 を参照してください。

または以下を参照してください：

https://jsfiddle.net/5dcto0td/

.fancyContainer{
  border: 1px solid #555;
  position:relative;
  width:300px;
  padding:5px;
  overflow:hidden;
}
.chatBox {
  width: 300px;
  list-style: none;
  margin: 0 0 0 -40px;
  position:0;
}

.chatBox li {
  margin: 5px 0 5px 0;
  padding: 3px 5px 3px 5px;
}

/*Set up initial chat element for .me*/
.chatBox .me {
  min-height: 20px;
  float:right;
  clear: both;
  background-color: #34a1ef;
  border-radius: 10px 2px 2px 10px;
}

/*Set up initial chat element for .him*/
.chatBox .him {
  min-height: 20px;
  float:left;
  clear: both;
  background-color: #ddd;
  border-radius: 2px 10px 10px 2px;
}
/*Set up grouped radius*/
.him + .me {
  border-top-right-radius:10px;
}
.me + .him {
  border-top-left-radius:10px;
}
.me + .me {
  border-bottom-right-radius:2px;
}
.him + .him {
  border-bottom-left-radius:2px;
}


/*Set up First and Last radius for .me*/
.chatBox > .me:first-child {
  border-top-right-radius:10px;
}
.chatBox > .me:last-child{
  border-bottom-right-radius:10px;
}

/*Set up First and Last radius for .him*/
.chatBox > .him:first-child{
  border-top-left-radius:10px;
}
.chatBox > .him:last-child{
  border-bottom-left-radius:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fancyContainer">
  <ul class="chatBox">
    <li class="him">Hello... This is a chatbox.</li>      
    <li class="me">Well well. I guess this is a chatbox.</li>
    <li class="me">I'll have to talk about this some other time.</li>
    <li class="me">No wait. I might change my mind</li>
    <li class="him">Nonesense good sir! We'll have this talk right now and here.</li>
    <li class="him">I Like...</li>
    <li class="him">popsicles.</li>
    <li class="me">I can't believe you've done this to me!</li>
  </ul>
</div>
1
MrAmazing