【2：HelloWorld】CSSで吹き出しを表現する

f:id:seintoseiya:20150325220024p:plain:w500
プロジェクトNo.2：http://seiyatanaka.com/works/002/

実質、スクラッチで作る1つ目のWebサイトです。
その名も「HelloWorld」！！！
プログラミングを触った人ならみんな知ってる登竜門の様な名前ですね。

今回はCSSだけで吹き出しを表現してみるというものですが、
どういう仕組みかというと・・・

【HTML】

<div class="person us"><span>HelloWorld</span></div>

このspan部分をCSSで吹き出し表現します。

【CSS】

マウスが上に被さった時(hover時)に表示する様にしたいので、疑似クラスの:hoverを使います。

hover前は表示を隠す

.person span{
	visibility: hidden;
}

hover時のカーソルタイプを変える

.person:hover {
	cursor:help;
}

hover時のメッセージと背景を描画

.person:hover span{
	display:block;
	visibility: visible;
	background:#444;
	border-radius:4px;
	color:#FFF;
	padding:8px 8px 0 8px;
	margin:2.8em 0 0 0;
	line-height:1.6;
	box-shadow: #666 0px 2px 3px;
	font-size:13px;
}

visibility: visible;にして表示設定を戻す事を忘れずに。
後、spanはインライン要素なのでブロック要素に変えて、marginで位置を調整。

:before疑似要素を使って三角形を表現

このままでは吹き出しの尖った部分を表現できてないので、
:before疑似要素を使ってこれを表現。
（:before擬似要素は、要素の直前に内容を挿入できる）

.person:hover span:before {
	border-bottom:9px #444 solid;
	border-left:9px transparent solid;
	border-right:9px transparent solid;
	width:0;
	height:0;
	content:"";
	display:block;
	margin-top:-15px;
}