HTML & CSS

レシピ

エフィクト

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

ファイルのダウンロードリンクにアイコンをつける方法について解説します。

この記事のポイント

  • download属性をもつa要素にアイコンを表示する
  • 拡張子によって表示するアイコンを切り替える

目次

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」など必要に応じて様々な拡張子に対応したアイコンを表示することができます。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。