【CSS】 PDFのリンクに自動でアイコンを付けよう

リンク先がPDFファイルというのは、実際にはどれぐらい多い事象だったりするのか分かりかねるのですが、以前仕事をしたところでは大量にあったりしました。しかもかなりお堅い系だったのでリンク先がわかるようにアイコンを付けるのが決まりになっていたんですね。となると当然、いちいちhtmlでアイコン部分をくっつけるのも面倒ですし、aタグを書いた状態で自動的にアイコンがついてくれるようなCSSだったんです。

アイコンを自動的につけるには…

現在の案件で小規模ながらPDFアイコンがつくページのコーディングをすることになったので、自動アイコンについて考えてみました。まずはリンクの後ろにアイコンが付くということで

:after……要素の直後にスタイルを適用する
content……コンテンツを挿入する

この組み合わせかなとは考えました。ためしてみましょう。そのためにはアイコンを用意しておきたいところです。ということでアドビの公式ページから。

Icons and web logo guidelines

ここのAdobe PDF file iconの部分にweb用のアイコンがあります。これを使っていきましょう。
まず、htmlは単純なものを用意しておきます。それに対して自動的にアイコンが装着されるのが目的です。

【html】
<a href="aaa.pdf">PFD file</a>

これに対してcssは

【css】
a:after {
    content:" ";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/Adobe_PDF_file_icon_24x24.png) no-repeat;
}

イメージに近い感じで表示ができましたね。ただ、これだと他のaタグにもアイコンがついてしまってます。

なので、リンク先がpdfファイルのみに限定してアイコンが付く形にしてあげたいところ。

リンク先が.pdf（pdfファイル）のみにするには

css3のセレクタを色々とみてみると良さそうなのがありました。以下、HTMLクイックリファレンスより引用させていただきます。

E[foo$=”bar”] …… foo属性の値がbarで終わるE要素

E[foo$=”bar”]は、属性セレクタの一種で、 foo属性の値がbarで終わる（後方一致する）E要素にスタイルを適用する際に使用します。

今回の自動アイコン化に対応させて書いてみると

a[href$=".pdf"]

つまり「aタグのhrefの中身が.pdfで終わる」もののみ該当というセレクタですね。これを使えば.pdfのリンク先のみアイコンを付ける処理ができます。実際に先ほどのcssを改良してみましょう。

【css】
a[href$=".pdf"]:after {
    content:" ";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/Adobe_PDF_file_icon_24x24.png) no-repeat;
}

これで実際にみてみると