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

Posted by
ぴろり
Posted at
2006/12/03 01:58
Trackbacks
関連記事 (0)
Comments
コメント (1)
Post Comment
コメントできます
Category
開発メモ カテゴリ
　はてなアイデア で見かけたコメント欄の表示方法が面白かったので真似っこしてみました。 マンガのように個々にフキダシを使って表示するという方法です。
この記事をはてなブックマークに追加する この記事のはてなブックマーク数 | この記事をlivedoorクリップに追加する この記事のlivedoorクリップ数 | この記事をYahooブックマークに追加する この記事のYahoo!ブックマーク数 | この記事をdel.icio.usに追加する

ソース

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

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

この記事を読んだ人はこんな記事も読んでいます ?

その他の関連する記事

この記事のアーカイブ

全ての記事 »
2006年
全てのカテゴリ »
電算室, 開発メモ
全てのタグ »
, ,
キーワード検索 »
, ,

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

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

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

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

Posted by
ぴろり
at
2006/12/03 13:32
ID
lTOR1kYs

こんな感じです。コメント欄で使うと効果的かも。

全てのコメントを見る (全 1 件)

コメントを投稿する

 (必須/公開)
 (必須/非公開)
 

コメントスパム防止のため投稿前に ランダムな数字 ? を入力してから投稿してください。 お手数ですがご協力のほど宜しくお願いいたします。(必須)