【HTML】aタグのdownload属性で簡単！ファイルダウンロードボタンの実装方法
2026/01/07
Webサイトを制作していると、「特定のファイルをユーザーにダウンロードさせたい」という場面がよくあります。実はこれ、HTMLのaタグに一つの属性を加えるだけで簡単に実装できるんです。
今回は、その具体的な手順と書き方を解説します。
動画で確認したい方はこちら↓ 事前準備：フォルダとファイルの構成
まずは、ダウンロードさせたいファイルを整理しましょう。今回は例として、PDFファイルをダウンロードさせる設定にしてみます。
- index.html: メインのHTMLファイル
- pdfフォルダ: ダウンロード用ファイルを格納
- test.pdf: 実際にダウンロードさせるファイル
このように、ファイルを専用のフォルダに分けておくと管理がしやすくなります。
実装：aタグと「download属性」の使い方
通常、aタグはページ遷移に使いますが、download属性を記述することで、ブラウザに「このファイルは開かずにダウンロードしてね」と指示を出すことができます。
基本のコード
HTML
<a href="pdf/test.pdf" download="test.pdf">ダウンロードする</a>
属性の解説
- href属性：ダウンロードさせたいファイルへのパスを指定します。
- download属性：これが重要です。この属性を書くことでダウンロード機能が有効になります。また、download=”ファイル名.pdf” のように値を指定すると、保存時のファイル名を指定することも可能です。
パスの指定方法（相対パスと絶対パス）
ファイルの指定方法は2種類あります。
- 相対パス：自分のサーバー内にあるファイルを指定する場合（例：pdf/test.pdf）
- 絶対パス：すでにWeb上に公開されているURLを指定する場合（例：https://example.com/file.pdf）
基本的には自分のサイト内のファイルを指定することが多いですが、外部サーバーにあるファイルを指定しても問題なく動作します。
実際の動作確認
ブラウザを開いて確認してみましょう。
- HTMLで記述した「ダウンロードする」というリンクが表示されています。
- リンクをクリックするとダウンロードするファイルが表示されます。
- 右上のダウンロードをクリックすると、ブラウザがダウンロードを開始します。
- （ブラウザの設定によっては）プレビュー画面が開くことがありますが、そこから保存ボタンを押して完了です。
まとめ
HTMLのaタグに download 属性を追加するだけで、簡単にダウンロードリンクが作成できます。
- hrefにファイルの場所を書く
- download属性を添える
この2点をセットで覚えておきましょう！PDF以外にも、画像ファイルやテキストファイルなど、様々な形式で応用可能です。ぜひ自分のサイトでも試してみてくださいね。