第29回 text-indentで画像を置き換えた時の輪郭線テーブルレイアウトを卒業しよう
text-indentで画像を置き換えた時の輪郭線
本来文字になっている部分を背景画像に置き換えて表示するテクニックがあります。
これを実現する方法はいくつかありますが、代表的なものではtext-indentプロパティを使って文字を本来の位置からずらしてブラウザーの画面外へ飛ばしてしまう方法があります。
例えばこんな感じです。
#nav li a {
display: block;
text-indent: -9999px;
width: 200px;
height: 40px;
background-image: url(../btn_home.png);
}
これで実現することができます。
ですが、上記のように対象がa要素でマークアップされている場合、Firefoxでは「フォーカスがあたった際に画面外につづく点線が表示される」という問題が発生します。
こんなイメージです。
そもそもこの画像置き換えの手法に是非があるのはさておき、一般的によく使われているため、気になる人にとっては気になる部分だと思います。
この問題の対処方法はいくつかパターンが考えられます。
#nav li a {
outline: none;
}
outlineプロパティは、ボタンやチェックボックスなどにフォーカスがあたっている際に表示される輪郭線を指定します。画面外に続いている点線は、この輪郭線です。
- CSSの使い方を実用サンプルで学ぶ
-
XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。
- XHTML & CSS 実践講座
これをnone、または0にすることで非表示にします。
しかし、この輪郭線は、特にキーボードをつかってページ内のリンクを移動する際などに、今どこがフォーカスされているかを視覚的にわかりやすくする目的をもっています。
そのため、アクセシビリティやユーザビリティという観点から考えると完全に消してしまうのはあまりよくありません。
そこで、別の方法を考えます。
#nav li a {
overflow: hidden;
}
overflow プロパティは、ボックス内に収まりきらない部分をどのように扱うかを指定します。text-indentにネガティブな値を指定して画面外へ文字を飛ばし てしまう手法は、本来のa要素の範囲外に文字を「はみださせている」わけなので、これをhidden、つまり隠してしまうことで、輪郭線が表示されなくなります。
これで輪郭線を消すことなく、画面外に飛び出す問題を解決することができます。
以下オマケです。
Mac版のIEでは、overflowの扱いにバグがあり、値がvisible以外だと表示が消えてしまうことがあります。そこで、バックスラッシュハックをつかって、Mac版IEではコメント扱いにする方法もあります。
#nav li a {
/*\*/
overflow: hidden;
/**/
}
ただ、Mac版IEってもうスルーでもよくない…？と思うのですが…
では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ