【HTML,CSS】チャット風UIを作成する方法
ここでは、チャット風のUIを作成する方法を解説します。
タブの作成は、既にWebサイトを準備していれば10分程度で終わるかと思います。
こういった方へ向けた記事です ①チャット風の記事を作成したい ②LINEみたいなやり取りを入れたい
目次 1.UI完成イメージ 2.UI作成方法
1.UI完成イメージ

2.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; }
誰かの参考になれば幸いです。