リンク先の拡張子に併せてアイコンを自動挿入する方法「Showing Hyperlink Cues with CSS」

かなり昔のエントリーですが、知らなかったのでメモ代わりにエントリーしたいと思います。今日紹介する「Showing Hyperlink Cues with CSS」はリンク先の拡張子に併せてリンクテキストの前にアイコンを表示させるというテクニックです。

基本的には何かプログラムを用いてと言うわけではなく、CSSで制御してアイコンを表示させるという物になっています。この方法に対応しているブラウザはIE7,FireFox,Safariとなっています。

詳しくは以下

例えばリンク先がPDFのテキストリンクの後ろにアイコンを表示させる場合について紹介したいと思います。HTML側にはまったくなにも細工する必要はなく下記のように記述します。

<a href="files/holidays.pdf">View Holidays</a>

これだけでは当然テキストリンクだけの表示になります。次にCSSに以下のような記述をします。

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}

これで拡張子の.pdfへのテキストリンクの後ろには下記のようにアイコンが表示されるようになります。

大体想像できる人もいるかもしれませんが、「Showing Hyperlink Cues with CSS」に解説してある画像がありましたので貼り付けておきます。

このほかにもサンプルや事例が「Showing Hyperlink」に書かれていますので、もっと試したい方はそちらをご覧ください。

Related Articles: