謎解きウェブ

なぜなにどうして。

ZEBRA EFFECT

text:

CSSとJavaScriptを使ったちょっとだけうれしい小技。JavaScriptによるDOM操作で特定のidに含まれる、特定の「偶数番目の」HTMLタグに、特定のクラスを適用します。上図はこのブログのアーカイブページの画面キャプチャですが、HTMLソースにいちいちクラスを割り当てなくても、このようなゼブラ柄を動的につくれるというお話です。名付けてZEBRA EFFECT。

  • リスト1項目め
  • リスト2項目め
  • リスト3項目め
  • リスト4項目め
  • リスト5項目め
<ul id="zebraListing">
<li>リスト1項目め</li>
<li>リスト2項目め</li>
<li>リスト3項目め</li>
<li>リスト4項目め</li>
<li>リスト5項目め</li>
</ul>

たとえば上記のような見え方・ソースのリストがあったとします。このリストの偶数番目の項目に背景色を設定したい（ゼブラ柄にしたい）という場合、すぐに思いつくのはリストタグ（<li>）に対しクラスを書き込んでしまうという方法です。ちょうどこのような具合に。

  • リスト1項目め
  • リスト2項目め
  • リスト3項目め
  • リスト4項目め
  • リスト5項目め
<style type="text/css">
.zebra { background:#FFE1E1; }
</style>
<ul id="zebraListing">
<li>リスト1項目め</li>
<li class="zebra">リスト2項目め</li>
<li>リスト3項目め</li>
<li class="zebra">リスト4項目め</li>
<li>リスト5項目め</li>
</ul>

単純かつ確実ですね。しかし、これが何百項目にもわたる長いリストであった場合どうでしょうか？もちろんこの方法で間違いではないのですが、かなりの骨折りですし「ボタンの掛け違え」のような状況になったら目もあてられません。

また、もしもこれがCGI等のプログラムによる吐き出しのリストだったらなおややこしいです。ソースを直接さわることができないので、プログラムを書き換える必要がありますが、それが出来なければお手上げになります。

そこで既存のソースを活かしたまま、上記のように1つおきにクラスを適用する方法のご紹介です。冒頭でもお話ししたとおり、JavaScriptを利用して「動的」に行います。使用するスクリプトは以下の通り。

// ZEBRA EFECT
//
// 特定のid（idName）に含まれる、
// 特定の「偶数番目」のHTMLタグ（tagName）に、
// 特定のクラス（addClassName）を適用する

function zebra(idName,tagName,addClassName) {
if (!document.getElementById(idName)) { return false; }

var zebraRows = document.getElementById(idName).getElementsByTagName(tagName);

for (var i=0; i<zebraRows.length; i++) {
if (i%2) {
zebraRows[i].className = addClassName;
}
}
}

これを、冒頭で挙げた例に対し使用するには

<body onload="zebra('zebraListing','li','zebra')">
...
<ul id="zebraListing">
<li>リスト1項目め</li>
<li>リスト2項目め</li>
<li>リスト3項目め</li>
<li>リスト4項目め</li>
<li>リスト5項目め</li>
</ul>
...
</body>

のようにすればOKです。これはページ読み込みと同時にZEBRA EFFECTを実行するものですが、もちろんJavaScript中でwindow.onloadで実行していただいてもかまいません。実行するタイミングに関してはあたりまえですが各種イベントハンドラで制御できますので、下記サンプルのようにボタンで実行することも可能です。

  • リスト1項目め
  • リスト2項目め: この行にはクラス適用
  • リスト3項目め
  • リスト4項目め: この行にはクラス適用
  • リスト5項目め
  • リスト6項目め: この行にはクラス適用
  • リスト7項目め
  • リスト8項目め: この行にはクラス適用
  • リスト9項目め
  • リスト10項目め: この行にはクラス適用

勘のいい方ならお分かりになると思いますが、ZEBRA EFECTをかけられるHTMLタグはなにも上記のようにリスト（<li>）だけではありません。テーブルの行（<tr>）や定義リスト（<dd>）などHTMLタグなら何でもOKなので、いろいろと汎用性はあると思います。もちろん適用するクラスの内容（スタイル）も背景色である必要は無いので、例えばリスト項目のマーカーを交互に変えたりだとか、リンク色を交互に変えたり、などアイデア次第でいろいろ出来てしまうと思います。

またJavaScriptが書ける方であれば、たとえば特定のタグが5回登場するたびに〜など応用が利くと思いますので、面白い使い方があれば逆に教わりたいくらいですねえ。というわけで、デザイナー目線で有用なスクリプトサンプルでした。

動作確認済みブラウザ
  • Macintosh
    Safari 2.0 / Firefox 1.5 / Netscape 7.1 / Opera 9 / Internet Explorer 5.2
  • Windows
    Internet Explorer 6 / Firefox 1.5 / Netscape 7.1 / Opera 9
↑ Page Top