Webサイト上で画像やPDFなどのファイルを直接ダウンロードさせたいとき、
JavaScriptを使わなくても、実はHTMLの <a> タグだけで簡単に実現できます。
それが download 属性です！
この記事では、download属性の使い方と、知っておくべき注意点をわかりやすく解説します。
もくじ
download属性とは？
<a>タグに download 属性を追加することで、リンク先のファイルをブラウザで開かずに直接ダウンロードさせることができます。
<a href="example.pdf" download>PDFをダウンロード</a>クリックすると、example.pdf がダウンロードされます！
ファイル名を指定するには？
download="好きなファイル名" と書くことで、保存されるファイル名を任意に指定することも可能です。
<a href="sample.pdf" download="資料.pdf">資料をダウンロード</a>👉 ユーザーのダウンロードフォルダには 資料.pdf という名前で保存されます！
よく使うシーン
- PDFやWordなどの資料ダウンロード
- 画像素材やZIPファイルの配布
- 音声や動画ファイルのダウンロード（mp3 / mp4 など）
注意点
1. 同一ドメインのみ有効
download 属性は、**同一オリジン（同じサイト内）**のリンクにしか機能しません。
<a href="https://example.com/file.pdf" download>OK</a> ← ✅
<a href="https://google.com/file.pdf" download>NG</a> ← ❌外部リンクでは download 属性は無視され、通常通りそのまま開かれます。
2. Content-Disposition ヘッダーが優先される
サーバー側が「このファイルは inline 表示だよ」と指示していると、download 属性を使っても強制的にダウンロードにはならない場合があります。
3. セキュリティ上、ユーザーの許可が必要な場合あり
一部のブラウザでは「自動ダウンロード」や「JSでクリック発火」などに対して警告が出ることがあります。
→ 自然なクリック操作を前提にしましょう。
まとめ
| 内容 | 説明 |
|---|---|
| 属性名 | download |
| 効果 | ファイルを開かずに直接ダウンロード |
| ファイル名指定 | download="任意の名前" |
| 制限 | 同一ドメインのみ動作、外部リンクには非対応 |
| 応用 | PDF・画像・音声などの配布に便利！ |
HTMLだけで簡単にダウンロードリンクが作れるので、
サイトに資料配布・素材提供機能を加えたい時にとっても便利です！
ぜひ活用してみてくださいね
