Bloc Notes

『オトコのキモチ2 : ちょっとCSS(4) - 要素を隠す』では、バナーに画像を使用した際、アクセシビリティを確保しつつ、CSSでバナー画像のサイト名の箇所にリンクを設定する方法が掲載されています。

オトコのキモチ2さんでは、リンクの位置決めをmarginで行い、それによりバナー画像からはみ出してしまう部分をoverflowを使用することで解決されています。

それよりも、potisonを使用したほうがもう少しスマートだと思いますので、紹介します。

このブログ（2007年1月現在のスタイル）で使用しているものです。

CSS

#banner {
width: 750px;
height: 240px;
background: #fff url(banner.jpg) no-repeat top left;
}

#banner-header {
padding: 0;
margin: 0;
text-indent: -9999px;
}

#banner a {
display: block;
position: relative;
top: 160px;
left: 12px;
width: 225px;
height: 40px;
border: 0;
padding: 0;
margin: 0;
text-decoration: none;
outline-width: 0;
}

#banner-description {
position: absolute;
top: 195px;
left: 12px;
text-align: left;
color: #888;
}

Firefoxでは、非表示または表示区域外に弾き飛ばしたテキストにリンクが設定してあると、リンクをクリックした際、リンク部分に点線が表示されてしまいます。

そこで、outline-width: 0;にて、それを回避しています。