制作者の活動(PR)。

画像をアンカーにする場合。

CSSの基本的な小技として、画像をアンカーにする場合のスタイル上の問題点と対策です。

<img>要素(画像)を<a>要素の内容にした場合、当該画像には設定した訳では無いのに勝手に枠線が付けられます。

これは、<a>要素内の<img>要素に対して、予めその様なスタイルシートが設定されているからです。

そこで、これを解消しましょう。

具体的には、<a>要素の内容になっている<img>要素に対して枠線を表示させないスタイルを当てればいいのです。

このためのセレクタが下位セレクタ(子孫セレクタ)と呼ばれるものです。

「a:擬似クラス img」セレクタに対して、borderプロパティを解消すれば、枠線を消す事が出来ます。具体的にはCSSスタイル定義ファイルに以下のように書きます。

a:link img,
a:visited img,
a:active img,
a:hover img {
    border: 0;
    }

ネットスケープ 4.xでは<img>要素のborderプロパティが正常に機能しません。具体的には枠線を非表示にしようとしても変な箇所に枠線が描かれてしまいます。

そこで、枠線を制御する方法は諦めます。

ネットスケープ 4.xに限らず、枠線の色はborderプロパティで指定されない場合は、colorプロパティの値が採られます。

そこで、colorプロパティで枠線の色を背景に近い色にすることで枠を見えなくする事にしましょう。

尚、ネットスケープ 4.xでは擬似クラスが正しく機能しないので、セレクタに擬似クラスは必要ありません。

具体的には以下のように書きます。

a img {
    color: 背景色;
    }