吹き出しデザイン

吹き出し

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

<style type="text/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;
}
}
</style>
吹き出し + 角付

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

<style type="text/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;
}
}
</style>
Ameblo Design
見出し
ボックス
CVボックス
リスト
ボタン
アプリーチ
カエレバ