Acid2とは、ブラウザがW3CのHTML4、CSS1、PNGなどの標準に対しどれほど準拠しているかをチェックすることができるテストです（※CSSについては現行CSS2.1に後継されています）。

下のリンク先ページで即ブラウザのテスト結果が分かります。ブラウザがテストの提示するソースコードの標準に準拠していれば、下のスクリーンショットのようなスマイリー君がレンダリングされます。ソースコードに対して間違った解釈をするとスマイリー君の顔は崩れ、ひどい場合には、赤色に表示される背景の中に顔のパーツが浮いていたりスクロールバーが現れたりと不気味な世界を演出してくれます。

Acid2でブラウザをテスト！

このスマイリー君がどのようなソースから構築されているのかはAcid2: The Guided Tourにて確認できます。Acidと名付けられている通り、重箱の隅をつついたような辛辣な項目が随所に見受けられます。

Acid3とは、Acid2でテストしたHTMLやCSSに加えてDOMやECMAScript ― JavaScriptなどに関わる標準 ― およびSVGのうちアニメーション機能などをテスト項目としているブラウザのベンチマーク的なテストです。XMLおよびスクリプトによる動的な振る舞いをも念頭に入れたところが主なポイントです(草稿段階のHTML5やCSS3などの一部も取り上げられています)。

Acid2同様、下のリンク先ページで即ブラウザのテスト結果が分かります。ブラウザがテストの提示するソースコードの標準に準拠していれば、下のスクリーンショットのようにレンダリングされます。100点を満点とした点数が表示されることとカラーリングされるはずの各ボックスに結果の程度が現れます。

Acid3でブラウザをテスト！（別窓表示してください）

以上に上げたテストのブラウザごとの結果はSOURCEFORGE.JPさんで紹介されています。その結果から必然的に導き出される問題も端的にまとめられているので、ここにそのまま引用させていただきました。まだ特集として連載されるのでウェブサイトのデザインに係わっている方には有用な情報になるかと思われます。

第1回　最新Webブラウザ、Web標準への対応度は？ /
最新Webブラウザに向けたWebサイト開発テクニック /

さて、これらの結果から、他のWebブラウザと比べIEは標準規格への対応が遅れている、ということが分かると思うが、このことはどのような問題となるだろうか。まず考えられるのが、「標準規格で用意されているリッチな機能がIEで非対応のため、利用できない」ということが挙げられる。たとえばCSS 2.1では、指定したテキストの前後に画像などの要素を表示する機能が備えられているが、これはIE 6では対応していない。そのため、Webサイトを構築する際に、IEを考慮してIE向けの特別な対処が必要となることも多い。IEは大きなシェアを持つため、無視できないのが現状だ。さらに、未だに標準への準拠度の低いIE 6を利用しているユーザーが多いのも頭を抱える1つの要因となる。

(c)SOURCEFORGE.JP

問題はやはりIEです。後発のGoogle Chromeがほぼ難なく発進していることと比較すれば、もはや対応が遅れているというより対応に無関心であると言わざるを得ないでしょう。いまだにIE6ユーザーが多い（バージョンアップをしっかり促していない)ということがそのことを如実に証明しています。

今『IE用に別のスタイルシートを用意する』といった意見がまことしやかに語られています。しかしながら、ただ他のブラウザと分離すればいいというわけではなく、IEの場合、各バージョン毎に違った指示を与えなければいけないといった問題があります（IE5に関していえばさらにMac用とWin用とで振る舞いが違うケースがある）。

IE8がCSS2.1で全く問題がなければこうした無駄も少なくて済むはずなのですが、まだまだ疑わしいところがありそうです。個人で楽しむだけのレベルならば放置しても問題がないでしょうが、クライアントを抱えたウェブサイトの制作者となると、ブラウザ側の問題を制作者側の問題に転嫁される蓋然性も高いことと思われます。

否、もはやこれらは問題ではなく既成事実として捉えている（こんなの慣れっこ）といったところなのかな？

jQuery系のJavaScriptを選んだのは、

などから、どうもIEではjQuery系のJavaScriptを使う場合はjQuery系一本でいかないと具合が悪いのではないかと思われたからです。実際、jQuery系一本にしてみたところ挙動不審が収まったので全くの的外れではないように思われます。

jQueryが悪いのか、それともIEが悪いのか？私は専門家ではないので分かりませんが、FirefoxをはじめとしたSafari、Operaなどのモダンブラウザや新鋭Google Chromeなどでは問題なくページ表示されていたので、やはりIEのスクリプトに対する融通性が悪いのだと思われます。

jQuery idTabsでは色々なヴァリエーションのタブメニューが紹介されています。そのうちの一つ、タブがスクエアでページ部がフェードインするタイプのものをここで取り上げます。

jQuery idTabsのサンプル

HEADセクション内

jquery.idTabs.jsのダウンロードページ：
http://www.sunsean.com/idTabs/#t3
jquery.jsのダウンロードページ：
http://docs.jquery.com/Downloading_jQuery

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>

BODYセクション内

<div id="squaretab" class="pack">
  <ul>
    <li><a href="#b-1" class="selected">1</a></li>
    <li><a href="#b-2">2</a></li>
    <li><a href="#b-3">3</a></li>
    <li><a href="#b-4">4</a></li>
  </ul>
  <div>
    <p id="b-1">コンテンツ1</p>
    <p id="b-2">コンテンツ2</p>
    <p id="b-3">コンテンツ3</p>
    <p id="b-4">コンテンツ4</p>
  </div>
</div> 

<script type="text/javascript">
  $("#squaretab").idTabs(function(id,list,set){
    $("a",set).removeClass("selected")
    .filter("[@href='"+id+"']",set).addClass("selected");
    for(i in list)
      $(list[i]).hide();
    $(id).fadeIn();
    return false;
  });
</script>

※起動部分のスクリプトの置き場所はメニューの直下がベターだと思います。

サンプルは以下の通りに設定しています。

#squaretab {
        width: 460px;
}

#squaretab ul {
        float: left;
        display: block;
        width: 60px;
        height: 60px;
        overflow: hidden;
        list-style: none;
        background: #3399cc;
}

#squaretab ul li {
        float: left;
}

#squaretab ul li a {
        display: block;
        width: 30px;
        height: 30px;
        color: #ffffff;
        text-align: center;
        line-height: 2.2;
        text-decoration: none;
}

#squaretab ul li a:hover {
        color: #336699;
        background: #ffffff;
}

#squaretab ul li a.selected {
        color: #ffffff;
        background: #336699;
}

#squaretab div {
        float: right;
        width: 400px;
        height: 60px;
        color: #ffffff;
        background: #3399cc;
}

#squaretab p {
        padding: 10px 35px;
}

.pack:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

/* Hides from IE-mac \*/
* html .pack {
        height: 1%;
}
/* End hide from IE-mac */

*:first-child+html .pack {
        min-height: 1px;
}

下のサンプルはロイターのジャンルごとのニュース更新情報を表示しています。ニュースに限らず、サイトをCMSとして利用する場合など、ユーザー情報の表示（おそらくできると思うのですが・・・）に便利なスクリプトだと思われます。

ページのヘッドセクションに挿入するコードは3つです。そのうちの一つはGoogleのAJAX Feed APIを利用します。GoogleのAJAX Feed APIを利用するためにはGoogleのAPI keyが必要です（API keyはドメイン毎に取得しなければいけません）。API keyを含んだURIにてAJAX Feed APIを呼び出すことになります。

残りの二つのJavaScriptであるgfeedfetcher.jsとgajaxscroller.jsはgAjax RSS Pausing ScrollerのStep2にてindicator.gifとともにダウンロードできるようになっています。尚、著作権表示を要求されているので注意が必要です。

下のスクリプトコードをHTML上の表示したい場所に記述します。コード内の1行目でidとclassを指定することによりCSSでのスタイリングが可能となります。

<script type="text/javascript">

var newsfeed=new gfeedpausescroller("rss-roll-4", "rss-roll-4class", 8000, "_new")
newsfeed.addFeed("テクノロジー", "http://feeds.reuters.com/reuters/JPTechnologyNews")
newsfeed.addFeed("マーケット", "http://feeds.reuters.com/reuters/JPMarketNews")
newsfeed.addFeed("ビジネス", "http://feeds.reuters.com/reuters/JPBusinessNews")
newsfeed.displayoptions("datetime snippet")
newsfeed.setentrycontainer("p")
newsfeed.filterfeed( 15, "label")
newsfeed.entries_per_page(3)
newsfeed.init() 

</script>

上記のスクリプト中の赤字の部分が設定値になります。パラメーターの設定内容は以下の通りです。

このガジェットは、今のところテストバージョンなのですが、サイトへの訪問者がサーバーから404 HTTP ステータスエラー（ページが存在しない）を返された場合に、単なるエラーの報告にとどまらず代替的なサイト情報を付加してくれます。具体的には以下のような機能があります。

ウェブマスターツールでは、カスタムの404ページを用意してこのガジェットを組み込むことにより、404ページを返された訪問者が他サイトへ移動してしまうことを防ぐ可能性を示唆しています。Googleがこういったサービスを提供しているということは、よほど顕著なデータがあるということですね。

設定はとても簡単でAdSense広告などと同様、スクリプトのコードを404ページの任意の位置に貼り付けるだけです。スタイルシートの活用によりリンク色や各種サイズなどを変更することができます。

WordPressでは新たに404ページを用意しなくても、ループ内に<?php else: ?>を追加して条件と一致しない時のソースコードを書き込むだけで、サイトデザインと同様の404ページを作ることができます。このサイトの404ページは以下の画像のとおりです。ウェブマスターツールでは、さらに「最もポピュラーなページ」などのリンクをページ内に追加することを推奨しています。

マウスをタブ内のリンクに乗せるとタブが上に飛び上がります。選択されたページはトップ位置に固定されるので現在位置が一目で分かることになります。CSSのロールオーバーテクニックに背景画像の位置変化を与えることによってこのような動きを表現できるようになります。

参照ページからコードをダウンロードして使用する分には問題ないようなのですが、コードや画像の公開は規約に抵触するおそれがあるのでここでは公開できません（即興で作ったのでお粗末ですがサンプルの画像は自作です）。よって基本的な考え方の解説だけにとどめたいと思います。

参照ページ：Animated horizontal tabs

普通の横並びナビゲーションと同様、リストタグでマークアップし、float:left;により横並びを実現させます。ポイントは、1. ラウンドコーナーを表現するために<span>要素を用いて一つのタブ内に2つの背景画像を指定できるようにすること2. 現在位置に他のタブと違う位置を指定するためにclass属性を挿入していることです。

参照ページのとおり使用する背景画像は二つの画像です。左用と右用に分かれており、上下のパートは連結しています。左側の画像は#animatedtabs aの背景で左上から表示させ、右側の画像は#animatedtabs a spanの背景で右上から表示させます。#animatedtabs aセレクタで左側画像の幅分のpadding値を指定し、背景画像がジョイントされて一つの画像に見えるようにします。マウスがリンクの上に乗った場合、およびそのページが選択されている場合は、画像の半分以下の部分（画像では上から125pxの部分）を位置指定したうえで表示させます。

CSSテクニックのポイントは、1. position:relative;で背景画像をずらす基点を作り、2. 下padding値の設定でタブが上下するように見せることです。ただし、display:block;として<span>内をインライン要素からブロックレベル要素に変えてやらないと、テキストレベルがベースとなってしまう（たぶん・・・）ため上下左右ともずれて表示されてしまいます。