和田憲幸のブログ

本スクリプトの根幹とも言うべき機能がIR（画像置き換え）という機能になります。IRとは何かって言うと、簡単に言えば「アンカーコンテキストなどをネガティブマージンで隠して、画像に置き換える」というものです。ネガティブマージンと聞いてネガティブなイメージを持つ方も多いでしょう（シャレじゃないよ）。

実際にCSSでネガティブマージンを使った場合、Googleからペナルティを食らう場合もありますからね。ただ私が過去制作したサイトではjsによるネガティブマージンはペナルティの対象となった事はありませんので問題無いと私は踏んでいます。もちろん逸脱した使い方をしているわけじゃありませんしね。

なぜIRが必要なのか

なぜIRが必要かと言うとナビゲーションなどを画像で表現するためです。imgタグを使う？ノンノン。imgタグは画像を表示するものだ！！と私は考えているためです。かといってCSSでネガティブマージンを使えば前述の通りペナルティを食らう可能性もあるし、何よりCSSで書くのがめんどくさい。だったらそれをJavascriptで補完してやればいいじゃん！というのが私の考え方です。

実際に見てもらいましょう

わかりやすいようにディレイをかけた表示
通常の表示
上記の2つの表示を見比べて下さい。ナビゲーションや見出し、ロゴなどがテキストで表示されてから画像に置き換えられているのがわかると思います。これはCSSやimgタグなどを使わずにJavascriptが勝手に画像に置き換えてるぞ～という事ですね。実に美しいHTMLとCSSとJavascriptの関係性だと私は自負していますが。

HTMLの役割、Javascriptの役割

過去に何度も書いてますが「JavascriptやCSSはHTMLを補助するための存在」というのが私の考え方です。つまり「JavascriptやCSSが必須であってはいけない」と言い換えることもできるかと。ユーザエクスペリエンスやユーザビリティ・アクセシビリティを高めるための存在がJavascriptやCSSであって、情報の本質はHTMLにこそあると。

もちろんWebアプリケーションなんかはその道理には当てはまりませんが、ことWebサイトに関して言えばHTMLという主演がいて、CSSやJavascriptがその主演をより際立たせる助演だと私は思うんですがね。