吹き出しデザイン

吹き出し

SAMPLE

COLOR :

画像URL取得

HTML

<div class="speechBox">
<!--★右のチャットはここから-->
<div class="comRight">
<div class="speechCom">
<p>ここに右のチャット文1</p>
</div>	
<div class="speechImg_con">
<div class="speechName">名前</div>
<div class="speechImg" style="background-image: url(アイコンの画像URL)"></div>
</div>
</div>
<!--★ここまで-->

<!--☆左のチャットはここから-->
<div class="comLeft">
<div class="speechImg_con">
<div class="speechName">名前</div>
<div class="speechImg" style="background-image: url(アイコンの画像URL)"></div>
</div>
<div class="speechCom">
<p>ここに左のチャット文1</p>
</div>
</div>
<!--☆ここまで-->

<!--★右のチャットはここから-->
<div class="comRight">
<div class="speechCom">
<p>ここに右のチャット文2</p>
</div>
<div class="speechImg_con">
<div class="speechName">名前</div>
<div class="speechImg" style="background-image: url(アイコンの画像URL)"></div>
</div>
</div>
<!--★ここまで-->

<!--☆左のチャットはここから-->
<div class="comLeft">
<div class="speechImg_con">
<div class="speechName">名前</div>
<div class="speechImg" style="background-image: url(アイコンの画像URL)"></div>
</div>
<div class="speechCom">
<p>ここに左のチャット文2</p>
</div>
</div>
<!--☆ここまで-->
</div>

CSS

.speechBox {
max-width: 800px;
margin: auto;
margin-bottom: 20px;
display: block !important;
}

.speechBox .comLeft {
width: 60%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex !important;
margin-right: auto;
margin-top: 20px;
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}

.speechBox .comRight {
width: 60%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex !important;
margin-left: auto;
margin-top: 20px;
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}

.speechBox .speechImg_con {
margin: 0 10px;
margin-bottom: 0;

}

.speechBox .speechImg {
width: 60px;
height: 60px;
border-radius: 50%;
margin: auto;
background-size: cover;
background-position: center center;
border: 3px solid #9A9A9A;

}

.speechBox .speechCom {
margin: auto;
padding: 25px;
border: 3px solid #9A9A9A;
background: #FFF;
position: relative;
}

.speechBox .comLeft .speechCom {
border-radius: 20px 20px 20px 0;
margin-left: 0;
}

.speechBox .comRight .speechCom {
border-radius: 20px 20px 0 20px;
margin-right: 0;
}

.speechBox .comRight .speechCom .speechImg_con {
margin-right: 0;
}

.speechBox .comLeft .speechCom .speechImg_con {
margin-left: 0;
}

.speechBox .speechCom p {
font-size: 15px !important;
line-height: 1.6em !important;
text-align: justify !important;
margin: 0 !important;
padding: 0 !important;
}

.speechBox .speechName {
color: #909090;
margin-top: 5px;
text-align: center;
line-height: 1.2em;
padding: 7px 5px;
font-size: 12px;
}

@media(max-width:550px) {
.speechBox .comLeft,
.speechBox .comRight {
width: 90%;
}

.speechBox .speechImg {
width: 40px;
height: 40px;
}

.speechBox .speechName {
font-size: 10px;
padding: 0;
padding-bottom: 5px;
}

.speechBox .speechImg_con {
margin: 0 5px;
margin-bottom: 0;
}

.speechBox .speechCom {
padding: 15px;
}

.speechBox .speechCom p {
font-size: 14px !important;
}
}
吹き出し + 角付

SAMPLE

COLOR :

画像URL取得

HTML

<div class="speechBox">
<!--★右のチャットはここから-->
<div class="comRight">
<div class="speechCom">
<p>ここに右のチャット文1</p>
</div>	
<div class="speechImg_con">
<div class="speechName">名前</div>
<div class="speechImg" style="background-image: url(アイコンの画像URL)"></div>
</div>
</div>
<!--★ここまで-->

<!--☆左のチャットはここから-->
<div class="comLeft">
<div class="speechImg_con">
<div class="speechName">名前</div>
<div class="speechImg" style="background-image: url(アイコンの画像URL)"></div>
</div>
<div class="speechCom">
<p>ここに左のチャット文1</p>
</div>
</div>
<!--☆ここまで-->

<!--★右のチャットはここから-->
<div class="comRight">
<div class="speechCom">
<p>ここに右のチャット文2</p>
</div>
<div class="speechImg_con">
<div class="speechName">名前</div>
<div class="speechImg" style="background-image: url(アイコンの画像URL)"></div>
</div>
</div>
<!--★ここまで-->

<!--☆左のチャットはここから-->
<div class="comLeft">
<div class="speechImg_con">
<div class="speechName">名前</div>
<div class="speechImg" style="background-image: url(アイコンの画像URL)"></div>
</div>
<div class="speechCom">
<p>ここに左のチャット文2</p>
</div>
</div>
<!--☆ここまで-->
</div>

CSS

.speechBox {
max-width: 800px;
margin: auto;
margin-bottom: 20px;
display: block !important;
}

.speechBox .comLeft {
width: 70%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex !important;
margin-right: auto;
margin-top: 20px;
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}

.speechBox .comRight {
width: 70%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex !important;
margin-left: auto;
margin-top: 20px;
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}

.speechBox .speechImg_con {
margin: 0 10px;
margin-bottom: 0;
}

.speechBox .speechImg {
width: 60px;
height: 60px;
border-radius: 50%;
margin: auto;
background-size: cover;
background-position: center center;
border: 3px solid #9A9A9A;
}

.speechBox .speechCom {
margin: auto;
padding: 25px;
border: 3px solid #9A9A9A;
background: #FFF;
position: relative;
}

.speechBox .comLeft .speechCom {
border-radius: 20px 20px 20px 0;
margin-left: 0;
}

.speechBox .comRight .speechCom {
border-radius: 20px 20px 0 20px;
margin-right: 0;
}

.speechBox .comRight .speechCom .speechImg_con {
margin-right: 0;
}

.speechBox .comLeft .speechCom .speechImg_con {
margin-left: 0;
}

.speechBox .speechCom p {
font-size: 15px !important;
line-height: 1.6em !important;
text-align: justify !important;
margin: 0 !important;
padding: 0 !important;
}

.speechBox .speechName {
color: #909090;
margin-top: 5px;
text-align: center;
line-height: 1.2em;
padding: 7px 5px;
font-size: 12px;
}

.speechCom:before,
.speechCom:after {
content: "";
position: absolute;
bottom: 0;
margin: auto;
}

.speechBox .comLeft .speechCom {
margin-left: 15px;
}

.speechBox .comLeft .speechCom:before,
.speechBox .comLeft .speechCom:after {
left: -18px;
}

.speechBox .comLeft .speechCom:before {
border-style: solid;
border-color: transparent transparent #9A9A9A transparent;
border-width: 0 0 20px 15px;
bottom: -3px;
}

.speechBox .comLeft .speechCom:after {
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 0 0 17px 12px;
z-index: 10;
left: -12px;
}

.speechBox .comRight .speechCom {
margin-right: 15px;
}

.speechBox .comRight .speechCom:before,
.speechBox .comRight .speechCom:after {
right: -18px;
}

.speechBox .comRight .speechCom:before {
border-style: solid;
border-color: transparent transparent #9A9A9A transparent;
border-width: 0 15px 20px 0;
bottom: -3px;
}

.speechBox .comRight .speechCom:after {
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 0 12px 17px 0;
z-index: 10;
right: -12px;
}

@media(max-width:550px) {
.speechBox .comLeft,
.speechBox .comRight {
width: 90%;
}

.speechBox .speechImg {
width: 40px;
height: 40px;
}

.speechBox .speechName {
font-size: 10px;
padding: 0;
padding-bottom: 5px;
}

.speechBox .speechImg_con {
margin: 0 5px;
margin-bottom: 0;
}

.speechBox .speechCom {
padding: 15px;
}

.speechBox .speechCom p {
font-size: 14px !important;
}

.speechBox .comLeft .speechCom {
margin-left: 15px;
}

.speechBox .comLeft .speechCom:before,
.speechBox .comLeft .speechCom:after {
left: -13px;
}

.speechBox .comLeft .speechCom:before {
border-width: 0 0 15px 10px;
bottom: -3px;
}

.speechBox .comLeft .speechCom:after {
border-width: 0 0 12px 7px;
z-index: 10;
left: -7px;
}

.speechBox .comRight .speechCom {
margin-right: 15px;
}

.speechBox .comRight .speechCom:before,
.speechBox .comRight .speechCom:after {
right: -13px;
}

.speechBox .comRight .speechCom:before {
border-width: 0 10px 15px 0;
bottom: -3px;
}

.speechBox .comRight .speechCom:after {
border-width: 0 7px 12px 0;
z-index: 10;
right: -7px;
}
}
JIN Design
見出し
ボックス
CVボックス
リスト
ボタン
シェアボタン
アプリーチ
カエレバ
リンカー