【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;
}

誰かの参考になれば幸いです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中