FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

PDFなど、CSSのみで拡張子によって自動でアイコンを表示する

   

WordやExcelなどをサイトにアップして、アイコンをつけることは多いと思います。

<a href=”word.pdf” class=”iconWord”>PDFファイル</a>など、いちいちクラスをつけるのは面倒です。

そんな時は、属性セレクタで指定して自動でアイコンを表示させると便利です。

SPONSORED LINK

拡張子によって、アイコンを変更したい場合

拡張子がPDFの場合です。
属性セレクタで、拡張子.pdfを指定します。

実行結果

下記のようにPDFアイコンがつきます。

拡張子によって、表示するアイコンを変更することができるので便利です。
WordやExcelなど、いろんな拡張子ごとに設定すれば管理も楽になります。

参考

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

 - CSS