2016/02/29 Web Design

【CSS】会話表現や引用に使える吹き出しデザイン 3個

【CSS】会話表現や引用に使える吹き出しデザイン 3個

どうも、今回は会話表現や引用に使える吹き出しデザインをCSSで作成していきたいと思います。特に難しいことはやりませんがCSSのbeforeとafterの概念だけは知らないと理解できないと思います。ですので、before,afterを知らない方は下記の記事を読んでからこの記事を読むとより理解が深まります。

CSS 擬似クラス・擬似要素の使い方とまとめ

ではさっそく紹介していきます。

目次

  • 吹き出し1（横形式）
  • 吹き出し2（縦形式）
  • 吹き出し3（縦形式）

吹き出し1

質問者の写真
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
解答者の写真
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
HTML
<div class="question_Box">
	<div class="question_image">
		<img src="画像URL" alt="" width="90" height="90"/>
	</div>
	<div class="arrow_question">
    	あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
	</div>
</div>
<div class="question_Box">
	<div class="answer_image">
		<img src="画像URL" alt="" width="90" height="90" />
	</div>
	<div class="arrow_answer">
    	あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
	</div>
</div>
CSS
.arrow_answer,.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 30px 25px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;
      line-height: 1.2em;
}
.arrow_question {
    float: right;
    margin-right: 20px;
  line-height: 1.2em;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 30%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8; }
.arrow_question:before { border-right-color: #c8c8c8; }
.question_image { float: left; }
.answer_image {
    float: right;
    margin-right: 20px;
}
.answer_image img,
.question_image img {     border-radius: 50%;
    width: 80px; }
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}

吹き出しを横に表示したベーシックな会話タイプに使える吹き出しデザインになります。写真はborder-radiusで丸く表示しているので正方形サイズの写真を使用しないとアスペクト比が崩れて歪んでしまいます。

吹き出し2

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

質問者の写真Mr.Bean

HTML
<div class="fukidashi-wrapper">
	<div class="fukidashi-box">
 		あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
    </div>
	<p class="fukidashi-author-wrapper">
		<img src="画像URL" alt="" width="90" height="90"/>
		<span class="fukidashi-name">Mr.Bean</span>
	</p>
</div>
CSS
.fukidashi-wrapper {
    padding: 30px;
    position: relative;
    margin-bottom:30px;
	z-index: 1;
}  
.fukidashi-box {
  	position: relative;
  	background: #f8f8f8;
  	margin-bottom: 20px;
  	border-radius: 50px;
  	padding: 20px 35px;
  	line-height: 1.5em;
}
.fukidashi-box:after {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    z-index: -1;
    background: #fff;
    bottom: -28px;
    left: 68px;
}
.fukidashi-box:before {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    z-index: -1;
    background: #f8f8f8;
    bottom: -20px;
    left: 50px;
}
.fukidashi-author-wrapper{
  	display: inline-block;
    position: absolute;
    bottom: -24px;
    left: 15%;
    margin: 0;
}
.fukidashi-wrapper .fukidashi-author-wrapper img{
  	border-radius: 50%;
  	width: 40px;
  	margin: 0;
}
.fukidashi-name{
  	vertical-align: middle;
  	display: inline-block;
  	padding: 0 10px 20px;
}

こちらは吹き出しを上に表示したタイプになります。会話でも使用できますが何か人物の引用でセリフなんかを表示するときに使えると思います。今度試しに使ってみようと思います。

吹き出し3

質問者の写真Mr.Bean
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
Mr.Bean質問者の写真
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
HTML
<div class="fukidashi-3-box">
	<div class="author-info">
		<img src="画像URL" alt="" width="90" height="90"/>
		<span>Mr.Bean</span>
	</div>
	<div id="balloon-1-top">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
	</div>
</div>
<div class="fukidashi-3-box-right">
	<div class="author-info">
		<span>Mr.Bean</span>
		<img src="画像URL" alt="質問者の写真" width="90" height="90"/>
	</div>
	<div id="balloon-2-top">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
	</div>
</div>
CSS
.fukidashi-3-box,
.fukidashi-2-box-right{margin:30px auto;} 
.fukidashi-3-box-right{text-align:right;}
.author-info{margin-bottom: 10px;}
.fukidashi-3-box-right .author-info{text-align: right;}
.fukidashi-3-box .author-info img,
.fukidashi-3-box-right .author-info img{
  border-radius: 50%;
  width: 50px;
  margin: 0;
}
.fukidashi-3-box .author-info span,
.fukidashi-3-box-right .author-info span{
  line-height: 50px;
  vertical-align: top;
  padding: 10px;
}
#balloon-1-top {
  border-radius: 15px;
  color: #999;
  position: relative;
  display: inline-block;
  padding: 20px;
  width: auto;
  min-width: 200px;
  line-height: 1.6;
  text-align: left;
  border: 1px solid #AAA;
  z-index: 0;
  max-width: 400px;
}
#balloon-1-top:before {
  content: "";
  position: absolute;
  top: -9px;
  left: 14%;
  margin-left: -9px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent #fff transparent;
  z-index: 0;
}
#balloon-1-top:after {
  content: "";
  position: absolute;
  top: -10px;
  left: 14%;
  margin-left: -10px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #AAA transparent;
  z-index: -1;
}
#balloon-2-top {
  border-radius: 15px;
  color: #999;
  position: relative;
  display: inline-block;
  padding: 20px;
  width: auto;
  min-width: 200px;
  line-height: 1.6;
  text-align: right;
  border: 1px solid #AAA;
  z-index: 0;
  max-width: 400px;
}
#balloon-2-top:before {
  content: "";
  position: absolute;
  top: -9px;
  right:14.2%;
  margin-left: -9px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent #fff transparent;
  z-index: 0;
}
#balloon-2-top:after {
  content: "";
  position: absolute;
  top: -10px;
  right: 14%;
  margin-left: -10px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #AAA transparent;
  z-index: -1;
}

こちらは下に吹き出しを表示させてるタイプになります。会話形式に使用でき、レスポンシブに対応するときも吹き出しの横幅だけ変わるだけなので一番楽な吹き出しだと思います。

以上、シンプルで使い易い吹き出しデザインをご紹介しました。基本的にコピペでOKですがダメだった場合ご自分でCSSを調整していただく必要がございます。

関連する記事