第10回　CSSだけで画像のすり替えを実行

前回と同じかよ！と思った方。よく見てほしい。タブの選択肢が1つ増えただけでなく、今回のバージョンでは「マウスオンでタブ画像の色も変わる」という効果を付け足している。CSSだけで画像のすり替えを行うという点がキモだ。

タブのすり替えは、手前に表示されているタブと、その下に回り込んでいるタブでは表現を微妙に変えている。手前バージョンは斜めからちょっと明かりが差し込んだような表現に、その下のバージョンは全体が光っているような感じに・・・を目指した。

 

Gnavのliタグを１つ増やして「French」の選択肢を作り。追加でtab3.htmlのファイルを作ったのが変更点である。余談だが、HTML4.01のようにスタイルと文書構造が一緒にできる記述方法の場合、今回のような改変をタグの追加だけで追えるのは難しい。スタイルを文書構造とはっきりわけているからこそ、たった1行の追加でページの修正ができるというものだ。

さて、与えたclassだが、このソースは（tab1.html）に対して付けたもの。だから（tab1.html）は現在アクティブとなっているわけなので、classはonを与える。onのclassはタブが手前に見えるスタイルのこと。蛇足ながら、tab2、tab3のHTMLについても以下に示しておこう。自分自身には常にonを与えている。

さて、次にマウスオンの際すり替えるための画像を見てみよう。classがonの際の画像は【図４】、classがoffの際の画像は【図５】だ。どちらも上下に違う画像がくっついた1つの画像である。上下は【図６】のような関係になっている。この画像をページにうまく反映させるCSSは以下の【ソース4】のとおりだ。

前回のソースとの相違点は、各liに対するa:hoverの指定部分、backgroundの箇所に-38pxと書き加えたところだ。えっ？　たったこれだけ・・。と拍子抜けするが、これだけである。

画像がCSSによる指定でページ上に表示されるとき基準となる点は、画像配置の揃えが左の時（デフォルトでは左）は画像全体の左上のはずだ。liの背景画像はこれより前の指定で以下のようにheightとpadding-topを足した分だけしか表示されないために、マウスカーソルに反応していない時に見えるのは画像の上半分だけになる。

これをa:hoverの指定で-38px、つまり【ソース5】のように上方向に画像全体を38pxひっぱりあげてやることで、マウスカーソルが触れたときに、【図7】のように画像がすり替わっているように見せられる、というわけなのだ【図7】。JavaScriptをつかうよりも数段簡単ではないだろうか。

最初にお詫びと訂正をしなければいけない。実は前回の「第9回　CSSでタブ型のナビゲーション」の完成ソースには間違いが含まれている。それは以下の箇所だ。

font: 14px Georgia, verdana, sans-serif;

※一部ツール任せで作成したため、おかしな指定が混入しました。申し訳ありません・・・

で、何が間違いなのかというと、sans-serifの指定を含んでおきながら、このソースにはserif体のフォントが含まれていることだ。作者の意図としてはGeorgiaを使いたかったし、それがちゃんと表示されているので間違いに気付かなかった。

sans-serifは「ひげなし書体」を意味する。日本語でいえばゴシック体のようにすっきりしたフォントのことだ。でもGeogiaは「ひげ書体」のserif体である。ここはどちらかに統一すべきで、意図通りに指定する正しい方法を取るならば

font: 14px Georgia, serif;

とすべきだったわけ。sans-serifとserifは日本語に対して使っても「明朝」「ゴシック」の解釈にフォントを分けてくれる。しかし、古いブラウザでは日本語にこの指定を使うと文字化けを起こすものもあるので注意しよう。