- 2009 年 5 月 3 日 15:36
- Web
結構有名と思っていたのですが意外と知られていないWeb小ネタその1。
Web制作者の中では有名でWeb制作が本業じゃない人が知らないだけかも？
idea*ideaで紹介されていたのでもうご存じの方も多いと思います。そして、少し古い手法なのでもはや取り上げる必要性もないかもしれませんが…
自分の制作したサイトでは以前からこの施策を行っていたので実例を挙げて説明はできませんが、画像置換を用いたグローバルナビゲーションでリンクをクリックするとFirefoxで点線（アウトライン…outline:noneで消せる）が画面の外側まで伸びるという問題がありました。これは、リンクのテキストをtext-indentプロパティで画面外に飛ばしているから起こる現象です。ちなみにInternet Explorerでは正常に表示され、SafariやChromeではアウトラインが表示されません。
この解決方法はa属性のプロパティにoverflow:hiddenを加えることで解決します。
a {
display: block;
width: ○○px;
height: ○○px;
overflow: hidden;
text-indent: -9999em;
background: #fff url(img/img.jpg) 0 0 no-repeat;
}
overflowプロパティはボックスの挙動にかかわるプロパティです。
値をhiddenに設定することでボックスからはみ出る文字列を隠すので、リンク要素のクリックエリアにおさまったアウトラインになります。
overflowは他にも目から鱗な使い方が（もう結構広まってきているかな）できますが、それはまた次回以降に。
関連する投稿
コメント(閉):2
- kubox 2009 年 5 月 3 日
おお！
そうそう！
これ知りたかった！！
何回聞いても覚えてないから助かります！☆- londoner25 2009 年 5 月 3 日
お役に立てたようで幸いです。
これからもちょくちょくこのような小ネタを出していこうと思います。
