end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転します

画像を使わないcssによる吹き出し

facebookから「〜さんがあなたの写っている写真にタグをつけました」のようなメッセージを受けたので、その写真を除いてみたら、fbのタグとは、はてブにあるようなタグ(keyword)ではなく、吹き出しのことを指すみたい。

はてなphotolifeには、このような機能はない気がしますが、確かに分かりやすい。

で、htmlというかスタイルシートによる吹き出しのは実装したことがありませんが、次のように書くと良いみたい。

ポイントは、2重のborderとnegativeマージン。

html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="common.css" rel="stylesheet">
</head>

<body>
<div class="container">

<img id="test_img" src="user.jpg">

<span class="pop_tag"><span class="pop_tag_body">
ここは吹き出し(コメント、タグ)です
</span></span>

</div><!--.container-->
</body>
</html>

css

body {
    padding: 1px;
    background-color: #F5F5F5;
}
/* http://terkel.jp/archives/2009/12/css-only-speech-bubbles/ */
.pop_tag {
    position: absolute;
    top: 60px;
    left: 50px;
    border-left: 10px solid #FFB119;
    border-top: 10px solid transparent;
    -border-top-color: white;
}
.pop_tag_body {
    float: left;
    padding: 5px 10px;
    margin: 0 0 0 -30px;
    border: 2px solid #FFB119;
    background: white;
    text-align: center;
    color: black;
    position: relative;
}


実際にタグの編集やポップアップまで実装しようかとも思いましたが、意外に面倒なので、今日はやめときます。