うわさのCSSでのLightBoxを解説してみる(その１)

ホッテントリで話題になっている
SEO業者ですら感動する驚異のCSSテクニック
なのですが,自分自身がピンとこなかったので自分のメモのためにさらなる詳細解説をしてみる.

まずJavaScriptで同様の事を行いたい場合,onMouseOver()イベントハンドラを使ってDOMツリーを書き換えるが,CSSには:hoverという擬似クラスがあって,そのタグにマウスオーバした時のスタイルを記述しておくことで同様のことができる.

[IE7,FireFoxなどの場合]
オリジナルのHTML(http://www.cssplay.co.uk/menu/lightbox.html)のグリグリ動くメニュー部分のドキュメント構造は下記のとおりになっている.

<div class="menu2">　(1)
<ul>　　(2)
　<li>　(3)
　　<a class="hide" href="#Portraits">Portraits</a>　(4)
　　　<ul>　　　　(5)
　　　　<li>　(6)
　　　　　<a href="lbox/portrait1.jpg">　(7)
　　　　　　<img src="lbox/portrait1a.jpg" alt="" title="" />　(8)
　　　　　</a>

シナリオは下記のとおり.

デフォルトでは(5)以下を非表示にしておく(style="display: none;")
(4)をマウスオーバしたときに(6)と(8)のスタイル変更で枠とサムネイルを作って表示
さらに(7)をマウスオーバしたときにさらに大きな画像を表示.

具体的には
http://www.cssplay.co.uk/menu/css/lightbox.css
での該当部分のStyleはこうなっている.

デフォルトで画像を隠しておく.

/* make the dropdown ul invisible */
「menu2クラス(1)の直後のul(2)の直後のli(3)の後のul(5)を隠す」
.menu2 ul li ul {
display: none;
}

ポップアップのサブメニューの大きい枠のスタイル

/* make the sub menu ul li the full width with padding and border. */
「menu2クラス(1)の直後のul(2)の直後のli(3)にhoverした時に,その後に続くulの後のli(6)の形を作成」
.menu2 ul li:hover ul li {
width:464px;
height:365px;
border:20px solid #b3ab79;
background:#eee;
color:#000;
position:relative;
padding:40px 60px;
}

サムネイルのサイズを決定

/* style the initial image size 100px x 75px no border and 5pixel padding */
「menu2クラス(1)の直後のul(2)の直後のli(3)にhoverした時に,その後に続くul→li→a→imgタグ(8)のサイズを決定」
.menu2 ul li:hover ul li a img {
width:100px; height:75px;
border:0; margin:5px;
}

サムネイルよりやや大きめにクリックできるように(?)

/* style the size, background color, border and margin of the submenu links */
「menu2クラス(1)の直後のul(2)の直後のli(3)にhoverした時に,その後に続くul→li→aタグ(7)のスタイルを決定」
.menu2 ul li:hover ul li a {
float:left;
width:110px;
height:85px;
background:#eee;
border:1px solid #888;
margin:1px;
}

サムネイルのポジション調整

/* style position of the links on hover */
「menu2クラス(1)の直後のul(2)の直後のli(3)にhoverした時に,その後に続くul→li→aタグ(7)のポジションスタイルを決定」
.menu2 ul li:hover ul li a:hover {
position:relative;
}

サムネイルにマウスオーバ時の大きいサイズの画像の表示スタイル

/* style the 2x size image on hover with an absolute position to place it centrally over the original image */
「menu2クラス(1)の直後のul(2)の直後のli(3)にhoverしてかつその後に続くul→li→aタグ(7)がhoverした時のimgのスタイル」
.menu2 ul li:hover li a:hover img {
width:200px; height:150px;
position:absolute;
left:-50px; top:-38px;
border:0;
border:1px solid #888;
padding:5px;
background:#ccc;
}

これでFirefox,IE7は期待通りの動きをすることができる.

(つづく)