REDLINE MAGAZINE | CSSでunderlineをカスタム

CSSでunderlineをカスタム

A List Apart「CSS Design: Custom Underlines」という記事で紹介されていたTips。記事自体は随分前に書かれたものだが、使えそう感が漂っているので試してみる。

上記サイトで紹介されていたのはこんなソース

CSSソース
a {
text-decoration: none;　/* まずデフォルトのラインを消す */
background: url(underline.gif) repeat-x 100% 100%;　/* underline用画像を背景として指定し、リピートとポジションを設定 */
padding-bottom: 4px;　/* テキストとライン間を調節 */
white-space: nowrap;　/* リンクテキストが途中で折り返さないように指定 */
}

※hover時にだけラインを出現させる場合
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

至ってシンプルで使いやすい。

即実験
>>RedLine Magazine::underlineをカスタマイズのサンプル

aタグにclassでも指定してライン画像を使い分けてもいろいろ使えそうだし、A List Apartで紹介されてたサンプルみたいにhover時の差替え画像にアニメgifを使ってもユーザーにとって分かりやすそう。ただ、やっぱりユーザーはリンク＝普通のunderlineに慣れてるからその辺りには十分考慮したデザインにはすべきなんじゃないかと思う。

で、これ、リンクだけじゃなくてstrongとかで強調したい部分に適応させても面白いなーと。strongに色やボーダーをつけるってのもアリだと思うけど、ちょこっと画像で強調したい時に。

2007年02月22日 13:22 | Red | パーマリンク