[使えるCSSテクニックVol.2] CSSを使ったわかりやすいテキストリンク

使えるCSSテクニック Vol.02

2008.11.25

第 8 回目は「CSS を使ったわかりやすいテキストリンク」です。

CSS を使って、リンク先の内容がユーザにわかりやすいようにしてみましょう。

サンプルの XHTML はこちら

<p>詳しくは<a href="http://c-brains.jp/about">会社概要</a>をご覧ください。</p>
<p>詳しくは<a href="http://c-brains.jp/about" target="_blank">会社概要</a>をご覧ください。</p>
<p>詳しくは<a href="hoge.pdf">会社概要</a>をご覧ください。</p>
<p>詳しくは<a href="hoge.xls">会社概要</a>をご覧ください。</p>

1 行目は外部リンク、2 行目は別の WINDOW で開く外部リンク、3 行目はドキュメントルート内に置かれた PDF ファイルへのリンク、4 行目はドキュメントルート内に置かれた Excel ファイルへのリンク、となっています。

CSS でわかりやすくしたサンプルはこちら

詳しくは会社概要をご覧ください。

上記の CSS がこちらです。

a {
      margin-right: 3px;
      padding: 2px;
      padding-right: 20px;
}

a[href^="http://"] {
      background: url(ic_window.gif) no-repeat 100% 50%;
}
a[target="_blank"] {
      background: url(ic_blank.gif) no-repeat 100% 50%;
}
a[href$=".pdf"] {
      background: url(ic_pdf.gif) no-repeat 100% 50%;
}
a[href$=".xls"] {
      background: url(ic_xls.gif) no-repeat 100% 50%;
}

CSS の属性セレクタを使い、a 要素の内容によって表示（背景画像）を変えています。「href^="hoge"」は、「href 属性の属性値の行頭が hoge にマッチした場合」で、「href$="hoge"」は「href 属性の属性値の末尾が hoge にマッチした場合」という指定になります。

title 属性などを駆使すれば、もっと複雑な表現も可能になりますね。

なお、例によって IE6 は属性セレクタに対応していないため、そのままでは意図したとおりの表示にはなりません。解決策としては、Google Code で配布されている IE7.js もしくは IE8.js を導入することで、IE6 でも同じように表示することができます。