一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

CSSで吹き出しをつくってみた

今回は、「猫の画像にmouseoverした際、その画像の横に吹き出しコメントを出す」という簡単なサンプルをつくってみました。


こんなやつです↓
http://jsfiddle.net/d_animal141/C7Wg3/embedded/result/


ポイント(というかやりたかったこと)は


吹き出しをCSSで作る


というところです。


それでは早速サンプルのコードを!!

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		.cat{
			position:relative;
		}
		.cat img{
			width:480px;
			height:360px;
			cursor:pointer;
		}
		.fukidashi{
			display:none;
			width:120px;height:60px;
			position:absolute;
			top:90px;left:470px;
			padding:10px;
			border-radius:10px;
			background-color:rgba(0,0,0,0.8);
			line-height:60px;
			color:#fff;
			font-size:16px;
			text-align:center;
		}
		.fukidashi::before{
			display:block;
			content:"";
			width:0;height:0;
			position:absolute;
			top:20px;left:-30px;
			border-top:15px solid transparent;
			border-right:30px solid rgba(0,0,0,0.8);
			border-bottom:15px solid transparent;
		}

		</style>
	</head>
	<body>
		<div class="cat">
			<img src ="fukidashi_fadeIn.jpeg">
		</div>
		<div class="fukidashi">眠ー(-ω-*)zzz</div>

		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script>
			$(".cat img").mouseover(function(){
				$(".fukidashi").fadeIn("slow");
			}).mouseout(function(){
				$(".fukidashi").hide("fast");
			})
		</script>
	</body>
</html>


全体の作りとしては非常にシンプルで


あらかじめ作っておいた吹き出しのhtmlをCSSで非表示にしておき、jQueryで画像にmouseoverした際にそれを表示に切り替える


という流れになります。


今回は特に吹き出しをCSSで作る部分にフォーカスしてみていきたいと思います。


まず吹き出しの部分は以下の図↓のように吹き出し先端の△の部分とそれ以外のコンテンツ部分をつなぎあわせて作ります。


f:id:d_animal141:20130223143515p:plain



今回の場合だとCSSの.fukidashiの部分がコンテンツ部分、.fukidashi::beforeの部分が△の部分に当たります。これらをpositionの位置をうまいこと調整して吹き出しっぽくつなぎ合わせました。


で、注目したいのが△の部分(.fukidashi::before)

これはborderをうまいこといじって実現しているのですが、文章だけではわかりにくいので再び図を書いてみました。こんな感じ↓

f:id:d_animal141:20130223150539p:plain


まずグレーのborderを含むコンテンツのwidthとheightの値を0にすると、図の真ん中みたいな感じにborderの上下左右が配置されます。
んでその中で必要な部分を抜き出して、長さ(上下左右それぞれの△の高さに当たります)を調整し、不要な部分はtransparentで見えなくすれば△の出来上がりです!!


あとはこれをコンテンツ部分の擬似要素(beforeとかafter)に指定して、positionで良い感じに重なるようにすれば吹き出しの完成です。


また、今回はやりませんが、例えば吹き出しの中に白shadowを入れたいとかって話になると、afterとかに白い△をつくって、さらに良い感じに重ねて、z-indexで重なり順を指定すればできます。


最近はCSSだけで芸術作品みたいなの作る人もいるから、自分ももっとテクを磨いてかっこいいデザインを作れるようになりたいです!


小さなことからコツコツと。