Web Frontier

例えば、ひとつのページのコンテンツが多くなった時には、 区切りに「トップへ」という表示があると便利です。 このページだと右下の方にある画像ボタンです。 しかし、これは普通なら、次のように記述するのではないでしょうか。

<a href="index.html"><img src="top.gif"
   width="50" height="16" src="トップへ">&nbsp;</a>

"&nbsp"はタグ内は空白の文字列はあまり良くないので回避策です。 しかし、これでは全体のページに対してimgタグを埋め込まなくてはなりません。 画像のパスやサイズが変わった時にすべてのページに対して置換処理が必要で非常に面倒です。 そこで、次のようにスタイルシートで一括管理できるようにしましょう。 今回利用する画像は&以下のようなquot;top.gif"で、幅50ピクセル、高さ16ピクセルものもとします。

.top
{
   display: block;
   width: 50px;
   height: 16px;
   background-image: url('top.gif');
   background-repeat: no-repeat;
   text-indent: -4096px;
}

<a href="#top" class="top">top</a>

このようにします。アンカー名は"#top"としました。 ポイントは"display: block;"でブロック要素にします。 これにしないと、クリックできないので注意して下さい。

またアクセシビリティ上、タグ内に文字を書かないのは良くないので、 スタイルシート部分の最後"text-indent: -4096px;"で、 HTMLタグ内では意味をなす文字列を記述させ、実際の表示では画面上から消すようにします。 このテクニックは覚えておくと色々と役に立つでしょう。 別にtext-indent: -9999px;でも構いません。 試しにこの"text-indent: -4096px;"を省略して書いてみると違いが良く分かると思います。 このようにしておけば、画像が変わった時でも、 変更する箇所は上記CSS部分一カ所で済むため、非常に経済的ですね。