使い方

(X)HTMLは「見出し＋リスト（内容）＋それらを包むDIV」っていう構造になっていればOKです。内容部分はリストじゃなくても可。デモだと下記のようになっています。

<div class="genre">
<h3 class="header"><span>A</span></h3>
<div class="body">
<ul>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
</ul>
</div>
</div>

必要なJSファイルを読み込んだ後、
$(対象の見出しを指定するセレクタ).iphoneH();
をドキュメントロード後に呼び出すように記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphoneh.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h3.header').iphoneH();
});
</script>

理屈を言えば、親DIVを基準に、見出しをposition:absoluteにしてtopの値をscrollイベントでいじっています。

見出しや内容部分は適当にスタイリングしましょう。デモだと元ネタが分かりやすいようにiPodアプリ風にまんまスタイリングしました。見出し部分に透過pngを使っていますが、IE6対策でどうのこうのとかはやっていません。

他のデザインに当てはめたときに正常に動くかはよく分からないです。多分その辺に突っ込みどころはたくさんあると思いますが（以下略

パターン1

完成イメージ

デモ

img要素を使ったCSSロールオーバー＋α デモ1

XHTML

<ul id="globalNav">
<li><a href="#"><img src="/img/nav1.gif" alt="ナビ1" /></a></li>
<li><a href="#"><img src="/img/nav2.gif" alt="ナビ2" /></a></li>
<li><a href="#"><img src="/img/nav3.gif" alt="ナビ3" /></a></li>
<li><a href="#"><img src="/img/nav4.gif" alt="ナビ4" /></a></li>
<li><a href="#"><img src="/img/nav5.gif" alt="ナビ5" /></a></li>
</ul>

CSS

#globalNav {
height: 30px; /* ナビ画像の高さ */
background: url(nav_active.gif) no-repeat 0 0;
overflow: hidden;
}
#globalNav li {
float: left;
width: 90px;
}
#globalNav li a {
display: block;
*zoom: 1; /* ie6,7 */
}
#globalNav li a:hover,
#globalNav li a:active {
text-indent: -9999px;
}

全てのナビがロールオーバーした状態の画像を用意し、#globalNavの背景に設定します。

li要素に明示的な幅指定を行っておき、その子であるa要素にdisplay:block;を設定。
a:hover時にtext-indent:-9999px;を設定することでimg要素を画面外に飛ばし、背景画像を見せることでロールオーバーさせています。

この手法の欠点は、各ボタンを格納するli要素に明示的に幅を指定しないと意図した表示にならないという点。仮に、各ボタンの横幅が異なっている場合、各li要素にclassとかidを振って別々の幅を指定してやらないといけないということになります。

パターン2

各ボタンの横幅が異なっているけれど、各li要素にclassやidを書きたくない場合・・・このシチュエーションって結構経験していて悩んでいたのですが、どうにか実現することができたのがこのパターンです。

XHTMLはパターン1と同じとして。

完成イメージ

デモ

img要素を使ったCSSロールオーバー＋α デモ2

XHTML

<ul id="globalNav">
<li><a href="#"><img src="nav_products.gif" alt="ナビ1" width="82" height="18" /></a></li>
<li><a href="#"><img src="nav_gallery.gif" alt="ナビ2" width="64" height="18" /></a></li>
<li><a href="#"><img src="nav_blog.gif" alt="ナビ3" width="39" height="18" /></a></li>
<li><a href="#"><img src="nav_about.gif" alt="ナビ4" width="56" height="18" /></a></li>
<li><a href="#"><img src="nav_contact.gif" alt="ナビ5" width="71" height="18" /></a></li>
</ul>

CSS

#globalNav {
height: 18px; /* ナビ画像の高さ */
overflow: hidden;
background: url(nav_active.gif) no-repeat 0 0;
font-size: 10px;
}
#globalNav li {
float: left;
margin-right: 20px;
*zoom: 1; /* ie6,7 */
}
#globalNav a {
display: -moz-inline-box;
display: inline-block;
*zoom: 1; /* ie6,7 */
vertical-align: bottom;
}
#globalNav a:hover,
#globalNav a:active {
padding-top: 9999px;
}

li要素には幅指定を行いません。そして、右のボタンとの余白をmargin-rightで設定しますが、全てのボタンでこれが同一になるように画像のスライスを調節します。一番右のmarginが領域を飛び出してしまうケースもあると思いますが、その辺は適当にうまくやります。

a要素はdisplay:inline-block;になるようにします。 そしてinline-blockなのでvertical-alignの調整も行っておきましょう。 inline-blockについてはCSS Nite in Ginza, Vol.27での小山田さんのセッション（のスライド）が参考になります。

また、img要素にwidth、height属性をそれぞれ明示的に指定をする必要があります。これはFirefox2で正しく表示するために必要です。

そしてa:hoverのpadding-topに大きな値を指定して、含んでいるimg要素を追い出すようにしてやれば、完了です。追い出した部分を非表示にするために、#globalNavにheightの明示的な指定とoverflow:hidden;の指定が必要なのでお忘れなく。（この2つはfloat解除の意味合いもありますが）

コンテキストとは

直訳すれば「文脈」です。ここではテンプレートにおける前後の文脈のことをそう呼びます。自然言語における人間の会話や文章にも前後の文脈というものが存在しますから、会話を例に挙げます。

MTのテンプレートでは現在のコンテキストに適合しないMTタグを使おうとすると、エラーが出るようになっています。

人間の会話において、文脈に沿っていない話題や発言をすると会話が成立しなくなるのと同じです。

コンテキストの種類と、テンプレートとの関係

MTのコンテキストは大別すると「ブログ記事」・「ブログ記事リスト（アーカイブ）」・「ウェブページ」の3つです。そしてこれはテンプレート一覧の「アーカイブテンプレート」の種類でもあります。これらのテンプレートは、最初から該当のコンテキストを持っており、「ブログ記事」アーカイブは最初から「ブログ記事」コンテキストを持っています。

「ブログ記事リスト」では「日付別」・「ユーザー別」・「カテゴリ別」という、大別して3つの分類を「アーカイブマッピング」で与えることができます。このテンプレートに該当するコンテキストが与えられるだけでなく、この指定を元にページファイルが生成されます。

例えば「カテゴリ」アーカイブマッピングを選択したテンプレートでは、最初から「ブログ記事リスト」コンテキストと、「カテゴリ」コンテキストを持ちます。

コンテキストの指定方法

任意のコンテキストを作り出すために使用するのがMTEntriesや、MTArchives、MTPagesなどのブロックタグです。これらのタグで囲んだ部分はそのタグが表すコンテキストが設定され、指定の回数分繰り返されます。例えば以下の例は、「最新5件の記事のタイトル」を出力します。

<mt:Entries lastn="5">
<p><$mt:EntryTitle$></p>
</mt:Entries>

<mt:Entries>に囲まれた部分が5回繰り返されますが、その内容は「ブログ記事」コンテキストの最新5件であることを<mt:Entries lastn="5">が表しています。

このように、任意のコンテキストを作り出すMTタグは数多く存在しており、その全てはブロックタグです。ブロックタグで囲んだ内容はそのタグの属するコンテキストになる、と覚えておけばよいでしょう。

コンテキストは入れ子にできる

ブロックタグを入れ子にしたり、特定のアーカイブテンプレート内にブロックタグを記述することによって、コンテキストを入れ子にすることができます。入れ子にしたコンテキストでは、特に指定をしない限り、親のコンテキスト内で対象を絞り込んだものとなります。

例えば以下は記事ごとに、記事本文に続いてコメント一覧を表示するための記述です。

<mt:Entries lastn="5">
<div class="entry">
<h3><$mt:EntryTitle$></h3>
<div class="entry-body">
<$mt:EntryBody$>
</div>
<div class="comments">
<h4>記事へのコメント</h4>
<ul>
<mt:Comments>
<li>
<$mt:CommentAuthor$>さんのコメント：<br />
<$mt:CommentBody$>
</li>
</mt:Comments>
</ul>
</div>
</div>
</mt:Entries>

<mt:Entries>に<mt:Comments>を入れ子にすることによって、「特定のエントリーへのコメント」に絞り込んで出力させています。なお、特にコンテキストの指定がない状態で<mt:Comments>タグを使用すると、そのブログに対して投稿されたコメント全てが対象となります。

ライブラリ不要

jQuery

FancyZoom(jQuery)

必要ライブラリ：

jQuery

対応形式：

画像、インライン（Flashなど含む）

対象指定：

jQueryセレクタ

ライセンス：

不明

備考：

ウィンドウのシャドウ部分などの透過pngパーツが、IE6では透過gifで代用されており見た目が落ちる。

Prototype.js + script.aculo.us

FancyZoom

必要ライブラリ：

Prototype.js、script.aculo.us

対応形式：

インライン

対象指定：

href属性

ライセンス：

不明

備考：

対象のインラインコンテンツのIDをhref属性で指定できる・・・だけ？ウィンドウのシャドウ部分などの透過pngパーツが、IE6では透過gifで代用されており見た目が落ちる。

Lightbox2

必要ライブラリ：

Prototype.js、script.aculo.us

対応形式：

画像、画像ギャラリー

対象指定：

rel属性、title属性

ライセンス：

CCライセンス 表示 2.5 一般

備考：

元祖Lightbox。オプション設定などはないが、使い方は単純明快。

MooTools

SexyLightBox

必要ライブラリ：

MooTools

対応形式：

画像、画像ギャラリー

対象指定：

スクリプト、class属性、rel属性、title属性

ライセンス：

MITライセンス

備考：

画面上部からビヨーンと登場するという、変わったアニメーションが特徴的。公式サイトの字が読めない。.meというドメインがモンテネグロのドメインなので、モンテネグロのサイト・・・？

YUI

その他