吹き出しを使ったコメント欄のサンプル

吹き出しを使ったコメント欄のサンプル

ブログなどのコメント欄が吹き出し風になっているサイトをたまに見かけるとは思うですが、それをCSSで装飾する時のサンプルを作ってみました。

作り方が分からない人の為に解説付きで紹介したいと思います。

demo page

…ここからが続き

サンプル1-1の解説

サンプル1-1

XHTML

<div class="comment1-1">
<p class="imgL"><img src="image/css-lecture.png" alt="CSS Lecture" width="80" /><br />
<strong>MIYA</strong></p>

<div class="commentContents">
<p>コメントコメントコメントコメントコメントコメントコメント</p>
<p>コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</p>
<p class="data">2009年02月24日 09:50</p>
<!--/ .commentContents--></div>

<p class="img"><img src="image/balloon1.gif" alt="" width="31" /></p>
<!--/ .comment1-1--></div>

CSS

/* サンプル1-1
----------------------------------------------------------- */
div.comment1-1	{
	width: 550px;
	padding: 0 10px;
	margin-bottom: 20px;
	position: relative;
}
div.comment1-1 .imgL	{
	float: left;
	text-align: center;
}
div.comment1-1 .imgL img	{
	border: 2px solid #CCC;
	padding: 3px;
	margin-bottom: 5px;
}
div.comment1-1 .commentContents	{
	width: 380px;
	float: right;
	background: #EEE;
	border: 1px solid #CCC;
	padding: 12px 19px;
}
div.comment1-1 .commentContents	p	{
	margin-bottom: 1.2em;
}
div.comment1-1 p.img	{
	position: absolute;
	left: 110px;
	top: 20px;
}
div.comment1-1 p.data	{
	color: #999;
	text-align: right;
	margin-bottom:0;
}
div.comment1-1:after	{ height:0;	visibility: hidden;	content: ".";	display: block;	clear: both; }

サンプル1-1 ダウンロード

サンプル1-2の解説

サンプル1-2

XHTML

<div class="comment1-2">
<p class="imgL"><img src="image/css-lecture.png" alt="CSS Lecture" width="80" /><br />
<strong>MIYA</strong></p>

<div class="commentContents">
<div>
<p>コメントコメントコメントコメントコメントコメントコメント</p>
<p>コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</p>
<p class="data">2009年02月24日 09:50</p>
</div>
<!--/ .commentContents--></div>

<p class="img"><img src="image/balloon1.gif" alt="" width="31" /></p>
<!--/ .comment1-2--></div>

CSS

/* サンプル1-2
----------------------------------------------------------- */
div.comment1-2	{
	width: 550px;
	padding: 0 10px;
	margin-bottom: 20px;
	position: relative;
}
div.comment1-2 .imgL	{
	float: left;
	text-align: center;
}
div.comment1-2 .imgL img	{
	border: 2px solid #CCC;
	padding: 3px;
	margin-bottom: 5px;
}
div.comment1-2 .commentContents	{
	width: 420px;
	float: right;
	background: url(../images/comment_bottom.gif) no-repeat left bottom;
}
div.comment1-2 .commentContents p	{
	margin-bottom: 1.2em;
}
div.comment1-2 .commentContents	div	{
	background: url(../images/comment_top.gif) no-repeat;
	padding: 12px 20px;
}
div.comment1-2 p.img	{
	position: absolute;
	left: 110px;
	top: 20px;
}
div.comment1-2 p.data	{
	color: #999;
	text-align: right;
	margin-bottom:0;
}
div.comment1-2:after	{ height:0;	visibility: hidden;	content: ".";	display: block;	clear: both; }

サンプル1-2 ダウンロード

サンプル2-1の解説

サンプル2-1

XHTML

<div class="comment2-1">
<div class="commentContents">
<div>
<p>コメントコメントコメントコメントコメントコメントコメント</p>
<p>コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</p>
</div>
<!--/ .commentContents--></div>

<p class="data"><strong>MIYA</strong> <span>2009年02月24日 09:50</span></p>
<!--/ .comment2-1--></div>

CSS

/* サンプル2-1
----------------------------------------------------------- */
div.comment2-1	{
	width: 540px;
	padding: 0 15px;
	margin-bottom: 20px;
}
div.comment2-1 .commentContents	{
	background: url(../images/comment2_bottom.gif) no-repeat bottom;
	padding-bottom: 25px;
}
div.comment2-1 .commentContents div	{
	background: url(../images/comment2_top.gif) no-repeat;
	padding: 12px 20px 0;
}
div.comment2-1 .commentContents p	{
	margin-bottom: 1.2em;
}
div.comment2-1 p.img	{
	margin: -1px 0 0 20px;
}
div.comment2-1 p.data	{
	margin-left: 5px;
}
div.comment2-1 p.data span	{
	color: #999;
}

サンプル2-1 ダウンロード

サンプル2-2の解説

サンプル2-1

XHTML

<div class="comment2-2">
<div class="commentContents">
<div>
<p>コメントコメントコメントコメントコメントコメントコメント</p>
<p>コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</p>
</div>
<!--/ .commentContents--></div>

<p class="data"><strong>MIYA</strong> <span>2009年02月24日 09:50</span></p>
<!--/ .comment2-2--></div>

CSS

/* サンプル2-2
----------------------------------------------------------- */
div.comment2-2	{
	width: 540px;
	padding: 0 15px;
	margin-bottom: 20px;
}
div.comment2-2 .commentContents	{
	background: url(../images/comment3_bottom.gif) no-repeat bottom;
	padding-bottom: 25px;
}
div.comment2-2 .commentContents div	{
	background: url(../images/comment3_top.gif) no-repeat;
	padding: 12px 20px 0;
}
div.comment2-2 .commentContents p	{
	margin-bottom: 1.2em;
}
div.comment2-2 p.data	{
	margin-left: 5px;
}
div.comment2-2 p.data span	{
	color: #999;
}

サンプル2-2 ダウンロード

demo page

« Prev

Comments

siro

siro

はじめまして。
まさに探していたものそのものでした！
自身のホームページで使わせていただきたいのですが、ライセンスなどはどのようになっているのでしょうか？

2010年08月29日 17:34

MIYA

MIYA

じうさん

はじめまして＾＾
参考にして頂いてこちらも嬉しいです＾＾
今後とも参考になれるような記事を書けるように頑張りたいと思います！

2009年04月09日 02:12

じう

じう

はじめまして。
サンプル1-2を使わせていただいてます。ちなみにコメントではなくて、画像の人物が連絡事項をしゃべっているというふうなのですが、ぱっと目が行って大成功とひとりで悦に入っております(笑）。
どうもありがとうございました。

2009年04月08日 10:41

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。

※
※

(公開されません)
 
※
Captcha※

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article