[CSS] フキダシ風領域を作る

Posted by
ぴろり
Posted at
2006/12/03 01:58
Trackbacks
関連記事 (0)
Comments
コメント (1)
Post Comment
コメントできます
Category
開発メモ カテゴリ

 はてなアイデアで見かけたコメント欄の表示方法が面白かったので真似っこしてみました。マンガのように個々にフキダシを使って表示するという方法です。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

ソース

 仕組みはいたって簡単で、フキダシ部分の画像を用意し、これをhead部分の背景画像に指定します。この時、フキダシ画像文のpaddingを指定するのを忘れずに。そしてbody部分では、borderプロパティで左右と下側に枠線を設定します。上側の枠線はheadの背景画像に指定したフキダシが担ってくれるので指定しません。フキダシ画像や背景色を変更すれば、違った感じのフキダシを簡単に作ることができます。

<style>
.bottomBlow {
}
/*** 下フキダシ ***/
.bottomBlow .head {
  /* フキダシ画像 */
  background-image: url('fukidashi-u.gif');
  /* 繰り返し表示しない */
  background-repeat: no-repeat;
  /* 下にピッタリくっつける */
  background-position: 0% 100%;
  /* フキダシ画像分の大きさだけ余白をつける */
  padding-bottom: 8px;
}
.bottomBlow .body {
  /* とりあえず周辺に枠を付ける */
  border: solid 1px #ccc;
  /* フキダシ画像のある上に枠線は不要 */
  border-top: none;
  /* フキダシ中の余白 */
  padding: 4px;
}
</style>

<div class="bottomBlow">
  <div class="head">
    上にヘッダ、下にフキダシ
  </div>
  <div class="body">
    ここに本文ここに本文<br/>
    ここに本文ここに本文ここに本文ここに本文ここに本文ここに本文<br/>
  </div>
</div>

IEはPNG画像の透過属性に対応していません。GIF画像なら大丈夫です。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事のアーカイブ

全ての記事 »
2006年
全てのカテゴリ »
電算室 » 開発メモ
全てのタグ »
, ,

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

寄せられたコメント (全 1 件中、最新 5 件まで表示しています)

Posted by
ぴろりぴろり
at
2006/12/03 13:32
ID
lTOR1kYs
こんな感じです。コメント欄で使うと効果的かも。

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。