CSSで外部リンクだけに画像をつける

2008/02/21 22:30

この方法はすごく便利だと思ったのでメモがてらに。。。

CSSソース

a[rel="external"] {
	padding-right:20px;
	margin-right:3px;
	background:url(img/icon_link.gif) no-repeat right center;
}

外部リンクのa要素のみに、rel=”external”を指定しておけば外部リンクだけに画像が表示されます。
ちなみに、このサイトでも外部リンクには右端に画像がついてます。

「margin-right:3px;」
このmargin-rightは右に要素があった場合にキツキツになってしまうのを防ぐためです。

こういうちょっとした事でもユーザビリティにつながると思います。

参考にさせていただいたサイト
WWW WATCH

Category : CSS , Web Design
Tags : , ,

© 2008-2008 DN*BLOG. All Rights Reserved.