パターン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解除の意味合いもありますが）

基本設計

行番号を振るための処理は、基本的にsyntaxhighlithter.jsとほとんど同じ。というか、syntaxhighlighter.jsを参考にして作りました。

処理の流れとしては、

1. まずページ内に<pre><code>とマークアップされている部分を取得します。
2. それら個々を<ol><li>番号順リストのマークアップに変換します。それら個々を<ol><li>番号順リストのマークアップに変換したものと、そのままのもの（プレーンテキスト）、それぞれ二つづつを生成します。プレーンテキストの方はデフォルトで非表示にします
3. 奇数行と偶数行のli要素それぞれに別のclass属性値を設定します。
4. 変換後のコードとプレーンテキストとを切り替えるヘッダー部分を生成します。
5. 最後にdiv要素で包みます（後でスタイルを整える都合）。最後にこれらをdiv要素内に書き出し、元の<pre><code>部分と差し替えます。

<pre><code>function sample() {
alert("sample");
}</code></pre>

これが

<div class="LNW">
<div class="header" style="display:none">
<a href="#" class="ctrl1">with line number</a>
<span class="ctrl2">plain text</span>
</div>
<div class="header">
<span class="ctrl1">with line number</span>
<a href="#" class="ctrl2">plain text</a>
</div>
<ol>
<li class="odd">function&nbsp;sample()&nbsp;{</li>
<li class="even">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="odd">}</li>
</ol>
<pre style="display:none"><code>function sample() {
alert("sample");
}</code></pre>
</div>

こうなります。

改行をどうやって拾うか

取得したDOM要素のinnerHTMLプロパティから拾えれば全く問題なかったんです。innerHTMLから改行を拾う処理はこんな感じ。

var str = codeElement.innerHTML;
str = str.replace(/\r?\n/g, "\r");

で、splitメソッドで分割して、li要素に突っ込んでいけばOKと思っていました。

var line = str.split("\r");
var i,l,li;
for(i=0,l=line.length; i<l; i++) {
li = document.createElement("li");
li.innerHTML = line[i];
}

ところが、、WinIEがどうやっても改行を拾ってくれません。innerHTMLにした瞬間に全部改行が消えてしまう・・・！

そこで、取得した要素のコード部分をテキストノードとして拾い、そのnodeValueから拾ったら、うまくいきました。ただしこのやり方だと、テキストノード以外のノード（要素ノードとか）が混じっていると処理が複雑になりすぎてしまう・・・。ここで壁にぶち当たります。

「今の自分にはこりゃ作れない」という気になってきたので気分を切り替え、そういう仕様と割り切っていっそのことタグを使用不可にすればいいじゃんと考えました。取得したDOM要素内には常にテキストノードだけが入っている状態なら良いわけですから。

Safariのヘンなところ発見

コードの一行目に含まれているのが改行のみの場合、Safariがその改行を拾ってくれません。一行目が改行だけってシチュエーションがまずないので、これもスルーしています。

次のようになるべきコードが

  <ol>
<li class="odd"></li>
<li class="even">function&nbsp;sample()&nbsp;{</li>
<li class="odd">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="even">}</li>
</ol>

Safariでは次のようになります。

  <ol>
<li class="odd">function&nbsp;sample()&nbsp;{</li>
<li class="even">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="odd">}</li>
</ol>

ブラウザ振り分け処理

WinIEだけ別処理にしたいので振り分けます。確かWinIEだけ実装している、document.allオブジェクトを利用してみました。が、Operaもひっかかってきた（Operaもdocument.allを実装していた）ので、Operaだけが実装しているwindow.operaオブジェクトをさらに利用します。

if(document.all && !window.opera) {
WinIE用の処理
} else {
その他のブラウザ用の処理
}

ホントはもっとスマートなやり方があると思います・・・。

半角スペースの変換問題

いっぽう、WinIE以外のブラウザではinnerHTMLから改行が拾えるからタグ使えるんじゃね？と思っていたら、別の問題にぶち当たりました。次に問題となったのは半角スペースです。

まず前提として、コードのインデントなどに使われる半角スペースを拾い、&nbsp;へと変換する処理を行っています。タグに属性値をセットしている場合、この処理で属性名前の半角スペースを拾われてしまい、ヘンテコな状態に変換されてしまいました。

sample text
<a href="sample.html">sample text</a>
sample text

これが

sample text
&nbsp;&nbsp;<a&nbsp;href="sample.html">sample&nbsp;text</a>
&nbsp;&nbsp;sample&nbsp;text

こうなっちゃいました。
というわけで、結局タグは使えない仕様で行くことに決定。

CSSでも…

CSSを書く段階になってもWinIEに苦しめられます。

横に長いコードを詰め込んだときにスクロールバーを出すためにoverflow:autoを設定するわけですが、スクロールバーが出た状態のWinIEがとてもヘン。それから、ol要素にoverflow設定をするとIE6で幅がヘンなことに。syntaxhighlighter.jsを参考に、全体をdiv要素で包み、そちらにoverflow設定をするこにしました。

また、横スクロールバーが出た際にWinIEは、スクロールバーの高さ分をそのボックスの高さに含めてしまう模様。そしてそのせいで、横スクロールバーが出ると同時に、縦スクロールバーも出てしまう・・・。

横長なコードのくせに1行か2行しかない場合が最悪で、コードが横スクロールバーに隠れてしまい、ロクに見ることができなくなってしまいます。これはお話にならない！というわけでWinIEだけハックで下paddingを設定し、スクロールバー分の高さを稼ぎました。これによって縦スクロールバーが出なくなり、コードの閲覧性は上がりました。が、スクロールバーが出た時に下marginが狭くなるという副作用が・・・。もうここでお手上げとなりました。

* {
margin: 0;
padding: 0;
zoom: 1;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding: 0;
zoom:1;
}

li {zoom: normal;}

XHTMLのコード

<p><img src="/img/2007/09/16_example_img.gif" alt="画像" width="120" height="90" class="photo" /> 段落1テキスト段落1テキスト段落1テキスト段落1テキスト段落1テキスト段落1テキスト段落1テキスト段落1テキスト段落1テキスト</p>
<p>段落2テキスト段落2テキスト段落2テキスト段落2テキスト段落2テキスト段落2テキスト段落2テキスト段落2テキスト段落2テキスト</p>