こんばんはハカセです。 需要があるのか無いのかよく分からないものを提供する、でお馴染みの「ハカセの研究室」。今回はCSSのクラスを指定するだけで会話形式のコンテンツが出来る、吹き出し付きのCSSを作ってみました。

暑いのでお酒を飲みながらコードを書いていますので、おかしな所があるかもしれませんがどうかご容赦を。親しみやすいコンテンツを作る時にきっと役に立つはずです。好きな様にカスタマイズしてお使い下さい。

CSSのクラスを指定するだけでお手軽に実現可能！

早速コピペだ！会話形式の吹き出し付きCSSS

ソースはこんな感じでdivにクラスを指定して、pの中に会話の内容を書いています。

<div class="hakase">
	<p>会話形式のブログってあんまり見ないな。</p>
</div>
<div class="jyosyu">
	<p>多分更新が面倒なんじゃないですかね。</p>
</div>

CSSはこんな感じです。吹き出しの三角形を作るために長くなってますが、詳しい方はどうぞ短く書きなおして下さい。

.hakase {
	padding-left:100px;
	background:url(images/hakase_icon80.png) no-repeat left top;
}
.jyosyu {
	background:url(images/jyosyu_icon80.png) no-repeat right top;
}
.hakase , .jyosyu { width:600px; margin-bottom:30px; min-height:80px;}
.hakase p , .jyosyu p {
	position: relative;
	background: #fff;
	border: 3px solid #404040;
	padding:10px;
	width:450px;
	min-height:50px;
	border-radius: 5px;
	-webkit-border-radius: 5px;    
	-moz-border-radius: 5px;
}
.hakase p:after, .hakase p:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.jyosyu p:after, .jyosyu p:before {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.hakase p:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 10px;
	top: 20px;
	margin-top: -10px;
}
.hakase p:before {
	border-color: rgba(64, 64, 64, 0);
	border-right-color: #404040;
	border-width: 14px;
	top: 20px;
	margin-top: -14px;
}
.jyosyu p:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #fff;
	border-width: 10px;
	top: 20px;
	margin-top: -10px;
}
.jyosyu p:before {
	border-color: rgba(64, 64, 64, 0);
	border-left-color: #404040;
	border-width: 14px;
	top: 20px;
	margin-top: -14px;
}

まとめ的な何か

思いつきで作ったものの、楽天ショップのセールページなど「親しみやすさ」や「わかり易さ」が重要な場面では意外と使えるのでは無いでしょうか。

お客さんを楽しませたり買い物がしやすいページを作るために工夫できる事は、これ以外にもまだまだたくさんあるはずです。一つやったらそれで満足では無く、常に新しい取り組みをし続ける事は色んな方面に良い影響を与えるはずです。

ただし、やった事は必ず、良かったのか悪かったのか、何が良かったのか悪かったのかを検証して、次の取り組みに活かして下さい。闇雲な手当たり次第のアウトプットは上手く行く時は良いですが、失敗した時には疲弊しか産みません。
結果を残す人は失敗からより多くの事を学ぶのです。

今日もオチはありませんがこれで終わりとします。
それではまた。