【HTML,CSS】チャット風UIを作成する方法
ここでは、チャット風のUIを作成する方法を解説します。
タブの作成は、既にWebサイトを準備していれば10分程度で終わるかと思います。
こういった方へ向けた記事です ①チャット風の記事を作成したい ②LINEみたいなやり取りを入れたい
目次 １．UI完成イメージ ２．UI作成方法
１．UI完成イメージ
２．UI作成方法
下記を参考にしてください。大事な箇所は赤い文字にしてあります。（※スマホだと赤くなっていないかもしれませんのでPC推奨）
<!DOCTYPE html>
<html>
<head>
<meta charset="ja">
<title>CSS Chat</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<ul class="messages">
<li class="left-side">
<div class="pic">
<img src="アイコンの絶対パス" alt="">
</div>
<div class="txt">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</div>
</li>
<li class="right-side">
<div class="pic">
<img src="アイコンの絶対パス" alt="">
</div>
<div class="txt">
どもどもども。
</div>
</li>
<li class="left-side">
<div class="pic">
<img src="アイコンの絶対パス" alt="">
</div>
<div class="txt">
あああああ。
</div>
</li>
</ul>
</div>
</body>
</html>
CSS（styles.css）
body {
margin: 0;
background: skyblue;
}
.container {
padding: 32px;
}
.messages {
margin: 0;
padding: 0;
list-style: none;
}
.messages li {
display: flex;
}
.messages li + li {
margin-top: 32px;
}
li.right-side {
flex-direction: row-reverse;
}
.pic {
width: 80px;
text-align: center;
}
.pic img {
width: 48px;
height:48px;
border-radius: 50%;
}
.txt {
background: #fff;
border-radius: 8px;
padding: 16px;
max-width: 60%;
line-height: 1.8;
position: relative; /* 相対位置 */
}
.txt::before {
content: '';
width: 0;
height: 0;
border: 8px solid transparent;
position: absolute; /* 絶対位置 */
}
/* 吹き出しの三角を作成する */
.left-side .txt::before {
top: 12px;
left: -16px;
border-right-color: #fff;
}
/* 吹き出しの三角を作成する */
.right-side .txt::before {
top: 12px;
right: -16px;
border-left-color: #fff;
}
誰かの参考になれば幸いです。
