WebサイトやWebシステムでチャットのレイアウトを作りたいときのための、HTML+CSS(SCSS)を使った実装方法をご紹介します。
INDEX
チャットのレイアウト
デモはこちらです。
See the Pen [CSS]チャットのレイアウト by asamifuruta (@asamih5) on CodePen.
HTML
<div class="chat">
<p class="chat_title">〇〇さんとのチャットルーム</p>
<div class="chat_inner">
<div class="frame_wrap">
<div class="arrow_frame arrow_frame_left">
<p>こんにちは</p>
</div>
<span class="chat_date">2022/6/18<br>11:00</span>
</div>
<div class="frame_wrap right">
<div class="arrow_frame arrow_frame_right">
<p>こんにちは!</p>
</div>
<span class="chat_date">2022/6/18<br>11:00</span>
</div>
<div class="frame_wrap">
<div class="arrow_frame arrow_frame_left">
<p>これはダミーテキストです</p>
</div>
<span class="chat_date">2022/6/18<br>11:00</span>
</div>
<div class="frame_wrap right">
<div class="arrow_frame arrow_frame_right">
<p>これは長文のダミーテキストです。画面の幅に合わせて文章を折り返して表示します。これは長文のダミーテキストです。画面の幅に合わせて文章を折り返して表示します。</p>
</div>
<span class="chat_date">2022/6/18<br>11:00</span>
</div>
</div>
<form action="" class="chat_textarea_wrap">
<textarea name="" id="" class="chat_textarea"></textarea>
<a class="button" href="javascript:;" data-bs-toggle="modal" data-bs-target="#chatModal">送信</a>
</form>
</div>
CSS(SCSS)
p {
margin: 0;
}
.chat {
border: solid 1px #344767;
}
.chat_title {
background-color: #344767;
color: #fff;
padding: 0.75rem 1rem;
font-weight: 700;
}
.chat_inner {
padding: 0.5rem 1.5rem;
}
.frame_wrap {
display: flex;
align-items: flex-end;
margin: 1rem;
}
.frame_wrap.right {
flex-direction: row-reverse;
}
/* 吹き出し */
.arrow_frame {
position: relative;
padding: 1rem 1.5rem;
border-radius: 5px;
&_left {
background: #f6f6f6;
/* 吹き出しの矢印 */
&::after {
border: solid transparent;
content: "";
height: 0;
width: 0;
pointer-events: none;
position: absolute;
border-color: rgba(246, 246, 246, 0);
border-top-width: 0;
border-bottom-width: 20px;
border-right-width: 20px;
margin-top: 0;
border-right-color: #f6f6f6;
left: -16px;
top: 0;
}
}
&_right {
background-color: #f1fafc;
&::after {
border: solid transparent;
content: "";
height: 0;
width: 0;
pointer-events: none;
position: absolute;
border-color: rgba(246, 246, 246, 0);
border-top-width: 0px;
border-bottom-width: 20px;
border-left-width: 20px;
margin-top: 0;
border-left-color: #f1fafc;
right: -16px;
top: 0;
}
}
}
.chat_date {
font-size: 12px;
padding: 4px;
color: #787878;
}
.chat_textarea_wrap {
padding: 0 1.5rem 1rem;
display: flex;
align-items: flex-end;
gap: 0.75rem;
}
.chat_textarea {
border: solid 1px #cccccc;
border-radius: 5px;
width: 100%;
min-height: 40px;
height: 40px;
padding: 0.5rem;
box-sizing: border-box;
}
.button {
background-color: #344767;
color: #fff;
text-decoration: none;
min-width: 52px;
height: 40px;
line-height: 40px;
display: inline-block;
font-weight: 700;
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
font-size: 0.75rem;
border-radius: 0.5rem;
transition: all 0.15s ease-in;
}
メモ
Webサイトでよく見かける、会話風のデザインなどにも活用してみてください。