<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>チャットモック</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
body {
margin: 0;
}
/* bootstrapの謎の右の余白を消す */
#_wrap {
overflow: hidden;
background: #f7f7f7;
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
section {
width: 80%;
margin: 0 auto;
}
aside {
width: 60%;
}
/* スマホ用 */
@media screen and (max-width: 768px) {
section {
width: 95%;
}
aside {
display: none;
}
}
@media screen and (max-width: 992px) {
aside {
display: none;
}
}
.line-bc {
padding: 20px 10px;
max-width: 868px;
margin: 15px auto;
font-size: 14px;
background: #88b3f7;
}
/* 吹き出し左 */
.balloon1 {
position: relative;
padding: 10px;
border-radius: 10px;
background-color: #000;
color: #fff;
max-width: 250px;
font-size: 15px;
word-wrap: break-word;
margin-left: 10px;
}
/* 三角アイコン左 */
.balloon1::before {
content: '';
display: inline-block;
position: absolute;
top: 3px;
left: -19px;
border: 8px solid transparent;
border-right: 18px solid #000;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
/* 吹き出し右 */
.balloon2 {
position: relative;
padding: 10px;
border-radius: 10px;
background-color: #30e852;
max-width: 250px;
font-size: 15px;
word-wrap: break-word;
margin-right: 20px;
}
/* 三角アイコン右 */
.balloon2::before {
content: '';
position: absolute;
top: 3px;
right: -19px;
border: 8px solid transparent;
border-left: 18px solid #30e852;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
</style>
</head>
<body>
<div id="app">
<div id="_wrap">
<!-- header -->
<header>
<div class="row">
<div class="col-12 clearfix">
<div class="float-left">
<h1 style="font-size: 20px">リアルタイムチャット</h1>
</div>
<div class="float-right">
<button type="button" class="btn btn-success">ログイン</button>
</div>
</div>
</div>
<p>接続ユーザ数: 10</p>
<hr />
</header>
<!-- header -->
<!-- main -->
<main>
<div class="row">
<!-- article -->
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
<!-- section -->
<section>
<!-- 入力エリア -->
<label>
<span class="btn btn-info">
画像アップロード
<input type="file" style="display: none" accept="image/*" />
</span>
</label>
<hr />
<div class="form-group text-center">
<input
maxlength="15"
placeholder="ハンネ"
size="30"
value="名無し"
/>
</div>
<div class="form-group">
<textarea
style="max-width: 400px; margin: 0 auto"
class="form-control"
id="textarea"
placeholder="メッセージ 150文字以内"
maxlength="150"
rows="3"
></textarea>
<div class="text-center">
<button class="btn btn-primary">投稿</button>
</div>
</div>
<!-- 入力エリア -->
<hr />
<!-- 投稿一覧 -->
<p>最新50件</p>
<div class="line-bc">
<!-- 右吹き出し -->
<div>
<div class="clearfix">
<div class="float-right">
<div style="font-size: 12px; color: #fff">uname</div>
<div style="font-size: 12px; color: #fff">uid</div>
</div>
</div>
<div class="clearfix">
<div class="balloon2 float-right">こんにちは</div>
</div>
<div class="clearfix">
<div class="float-right">
<time style="font-size: 12px">
2020-12-19 09:26:35
</time>
</div>
</div>
</div>
<!-- 右吹き出し -->
<!-- 改行 -->
<br />
<!-- 左吹き出し -->
<div>
<div style="font-size: 12px; color: #fff">uname</div>
<div style="font-size: 12px; color: #fff">uid</div>
<div class="clearfix">
<div class="balloon1 float-left">
<a
href="https://chat-line.netlify.app/"
target="_blank"
rel="noopener noreferrer"
>https://chat-line.netlify.app/</a
>
</div>
</div>
<div className="clearfix">
<time style="font-size: 12px"> 2020-12-19 09:26:35 </time>
</div>
</div>
</div>
<!-- 左吹き出し -->
</section>
<!-- section -->
</article>
<!-- article -->
<!-- aside -->
<aside class="col-xs-0 col-sm-0 col-md-0 col-lg-3 col-xl-3">
<div class="card" style="width: 90%; height: 1000px">
広告スペース
</div>
</aside>
<!-- aside -->
</div>
</main>
<!-- main -->
</div>
</div>
</body>
</html>