webデザイナの学習・Tipsなど

本・ツール・webサービス等のレビュー

リンク集

スペシャルコンテンツ

REDLINEって何?

CSSでポップアップネタ

(2007年4月5日追記)
このサンプルは一部のブラウザにしか使えません。
>>改正版のサンプルをこちらに置いているので、そちらを参考にしてください。
ブックマークしてくだった方、すいませーん・・・。

サンプル01:元ネタのCSS examples - centred pageさんと同じパターン

ここにマウスを乗せるとポコっと。サンプル1
spanでマークアップされたテキストが出てきます。


CSSソース

<style type="text/css">
<!--
.popup01 a{position:relative;}
.popup01 a span{
	position:absolute;
	top:-55px;
	left:0px;
	width:200px;
	padding:5px;
	visibility:hidden;
	background:#f5f5f5;
	border:2px solid #999;
	color:#333;
	}
.popup01 a:hover{visibility:visible}
.popup01 a:hover span{visibility:visible;}
-->
</style>

xhtmlソース

<p class="popup01"><a href="#">ここにマウスを乗せるとポコっと。<span><strong>サンプル1</strong><br />spanでマークアップされたテキストが出てきます。</span></a>
</p>

ソースの最後の「visibility:visible;」はIEさんの挙動不審対策とのこと。
これがないとIEさんでポップアップされない。

サンプル02:応用編01
ちょっと見た目をかわいくしてみる。

応用編は画像でやってみます。→ 内容量が決まってるなら画像でも大丈夫。サンプル2
spanでマークアップされたテキストが出てきます。


CSSソース

<style type="text/css">
<!--
.popup02 a{position:relative;}
.popup02 a span{
	position:absolute;
	top:-100px;
	left:-20px;
	width:202px;
	height:99px;
	padding:5px;
	visibility:hidden;
	background:url(xxx.gif) no-repeat;
	color:#333;
}
.popup02 a:hover{visibility:visible}
.popup02 a:hover span{visibility:visible;}
-->
</style>

xhtmlソース

<p class="popup02">応用編は画像でやってみます。→<a href="#">
内容量が決まってるなら画像でも大丈夫。<span><strong>サンプル2</strong><br />
spanでマークアップされたテキストが出てきます。</span></a></p>

サンプル02:応用編02

当然ながらテキストリンクだけでなく、画像にも設定できるのでサイト内のミニアイコンとかメニューとかにも使えそう。↓こんな感じ。(アイコン、デカすぎやけど。)

サンプルサンプル3
アイコンの説明なんかにも
使えそうな予感。
サンプルサンプル3
CSSオンリーだからjs無効でも無敵。
サンプルサンプル3
当然span内での
改行も
反映される。

なんかこの画像アイコン版をやってたらIEと他ブラウザでrelativeの基準点が違うんかなんか分からんが、ポップアップの位置がズレたので、IE6用css、モダンブラウザ向けハック、IE7用ハックで更に上書きと3段階で指定。(追記:位置をbottomから指定すればわざわざブラウザ毎に記述をわけなくても問題なかった。)内容はサンプル02のソースと一緒で配置位置を値を画像に合わせて書き換えるだけ。

応用編の画像背景を使う場合は文字サイズ可変サイトの場合、デカくしたら背景画像からはみ出して、ちょっと痛い。ので絶対読めるという安心サイズなら文字サイズ固定もありかと。またポップアップ画像自体をそれぞれのアイコンやボタンに合わせて全部画像化しても使える。その際spanはtext-indentで外へ出てもらう形にすればいい。

>>Redline Magazine::cssでポップアップネタの記事へ