ＣＳＳ応用編
-3 CSS TIP リンクボタン
リンクはテキストで
今までは 画像ソフトでボタンを作成しそこにリンクを設定するというスタイルが一般的でした。もちろん現在でも その手法に問題はありません。
ですが、たとえばマウスオーバー時に画像が変わる、いわゆるロールオーバースタイルを施した時、その画像変化プログラムがHTMLに記述され下図の様なソースができます。（Fireworks作成 DreamWeaver生成の一例）
CSSを利用することでこの(X)HTMLソースを簡潔にできます。
同じ表示効果、つまり「見た目」を表すのに ソースの簡潔さの違いは明らかです。
画像は読み込まずにHTML記述のみを読み込むコンピューターにとって、どちらが情報収集しやすいかも明らかです。
つまり、SEO上にも大きな効果を発揮できるというわけです。
CSS設定方法
準備として ノーマル時に表示させたい画像と、マウスオーバー時に表示させたい変化画像と、2枚の画像を用意します。
結局は画像を作らなければならないのか、と思いますますが、すべてのリンク文字でそれぞれ別の変化を起こさせたいのでなければ（通常そのようなリンクボタンは作成されないでしょう）、その2枚の画像を使いまわせば済むわけですから、作業はかなり簡略化されます。
HTML文書で リンクさせたい文字にクラス名を指定し（例では クラス名：rollover) 下図のようにCSSを設定します。
これはほんの一例で、いろいろなバリエーションが考えられると思います。
このように、作成サイドの作業簡略化と同時に、コンピューターに優しい記述となるのでSEO上のメリットは多大です。
ただ、SEOのためのサイト制作にならないよう、誰のためのサイトか、何の目的のサイトか、そういう基本から外れることのないよう常に心がけていかねばなりません…と、参考文献には書き添えられています（苦笑）。
こういう技巧にのみ走ることのないよう 当方も自戒していきたいと思います。
