シンプルなのチャットUIの例です。HTMLとCSSを組み合わせて、このようなUIを作成することができます。
<div class="chat-container">
<div class="chat-header">
<div class="profile-image">
<img src="https://via.placeholder.com/50x50" alt="profile-image">
</div>
<div class="profile-name">
<h3>Chat</h3>
</div>
</div>
<div class="chat-history">
<div class="message">
<div class="message-sender">
<h4>You</h4>
</div>
<div class="message-content">
<p>Hello, how are you?</p>
</div>
</div>
<div class="message">
<div class="message-sender">
<h4>Chat</h4>
</div>
<div class="message-content">
<p>Hi, I'm doing great! How about you?</p>
</div>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message...">
<button>Send</button>
</div>
</div>
.chat-container {
background-color: #f2f2f2;
border-radius: 10px;
height: 500px;
width: 400px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
overflow-y: scroll;
}
.chat-header {
background-color: #0084ff;
color: white;
display: flex;
align-items: center;
padding: 10px;
border-radius: 10px 10px 0 0;
}
.profile-image img {
border-radius: 50%;
height: 50px;
width: 50px;
}
.profile-name h3 {
margin: 0;
margin-left: 10px;
}
.chat-history {
padding: 10px;
}
.message {
display: flex;
margin-bottom: 10px;
}
.message-sender h4 {
margin: 0;
margin-right: 10px;
font-size: 14px;
font-weight: bold;
}
.message-content {
background-color: white;
padding: 10px;
border-radius: 10px;
}
.chat-input {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-top: 1px solid #ddd;
}
.chat-input input[type="text"] {
flex: 1;
padding: 10px;
border: none;
border-radius: 10px;
}
.chat-input button {
background-color: #0084ff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 10px;
margin-left: 10px;
cursor: pointer;
}
.chat-input button:hover {
background-color: #0066cc;
}