拡張子に応じてアイコンを表示する
CSS3の属性セレクタを使用することで、
リンク先の拡張子に応じてアイコンを表示するができます。
（PDFファイルならPDFのアイコン、Execlのxlsファイルならxlsのアイコン、といったように。）
<ul class="ico"> <li><a href="https://cssoboegaki.netkatuyou.com/test.pdf">PDFのファイル</a></li> <li><a href="https://cssoboegaki.netkatuyou.com/test.xls">Excelのファイル</a></li> <li><a href="https://cssoboegaki.netkatuyou.com/test.doc">Wordのファイル</a></li> </ul>
.ico li a {
background-repeat:no-repeat;
background-position: right center;
padding:0px 22px 0px 0px;
}
.ico li a[href$=".pdf"] {
background-image: url("images/icon_pdf.gif")
}
.ico li a[href$=".xls"] {
background-image: url("images/icon_xls.gif")
}
.ico li a[href$=".doc"] {
background-image: url("images/icon_doc.gif")
}
a[href$=””]で拡張子の指定をします。
この記事で使用しているアイコン画像は下記サイトよりアイコン画像のほか、
CSSファイル等がダウンロードできます。
※なお、IE6以下では対応していないのでその点はご注意を。
