ファイルのダウンロードリンクにアイコンをつける

download属性にCSSを適用する

a要素を使ったファイルのダウンロードリンクに、通常のリンクと差別化するためにアイコンを表示します。

ダウンロードリンクのみに記述するdownload属性をCSSのセレクタにすることで、class属性などの余計な追記をせずにアイコンを表示することができます。

HTML コード例

<p>こちらのPDFファイルをご確認ください。<br><a href="/files/test.pdf" download="test.pdf">ダウンロード</a></p>

CSS コード例

a[download] {
	padding: 7px 20px 7px 0;
	background: url(./images/icon_download.png) right center/15px auto no-repeat;
}

ファイルの拡張子ごとにアイコンを切り替える

CSSセレクタでは簡単な正規表現を使うことができ、属性の値によって適用するCSSを切り替えることができます。
この機能を利用して、次のようにファイルの拡張子にあわせたアイコンを表示します。

HTML コード例

<h2>ダウンロードリンクにアイコンをつける</h2>
<p>こちらのPDFファイルをご確認ください。<br><a href="/files/manual.pdf" download="manual.pdf">マニュアル.pdf (250 KB)</a></p>
<p>参考イメージはこちら。<br><a href="/files/sample_image.jpg" download="sample_image.jpg">イメージ.jpg (48 KB)</a></p>

CSS コード例

a[download] {
	padding: 7px 20px 7px 0;
	background: url(./images/icon_download.png) right center/18px auto no-repeat;
}
a[download$=".pdf"] {
	padding: 7px 25px 7px 0;
	background: url(./images/icon_pdf.png) right center/18px auto no-repeat;
}
a[download$=".jpg"] {
	padding: 7px 25px 7px 0;
	background: url(./images/icon_jpg.png) right center/18px auto no-repeat;
}

CSSセレクタの「download$」の「$」は、値の末尾が「="値"」で指定した内容で終わるものにCSSを適用する、という指定になります。

つまり、「download$=".pdf"」であれば、download属性の値が「.pdf」で終わるものに対してCSSを適用する指定となります。
続く「download$=".jpg"」はdownload属性の値が「.jpg」で終わるものにCSSを適用します。

今回は2種類ですが、同様の方で「.csv」「.mp4」など必要に応じて様々な拡張子に対応したアイコンを表示することができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。