うぇぶもよう

【HTML】aタグのdownload属性でファイルをダウンロードする方法｜効かない原因も解説

うぇぶもようの中の人

Webサイトに「PDFをダウンロード」「画像を保存」「CSVを取得」といったリンクを設置したい場合は、HTMLの<a>タグにdownload属性を追加します。

基本は1行で実装できますが、外部サイトのファイルでは動作しないことがあるほか、サーバーの設定によってはブラウザ内で開かれる場合もあります。

この記事では、download属性の基本から、PDF・画像・CSVの例、ファイル名の指定、効かないときの確認ポイント、JavaScriptで生成したファイルのダウンロードまでまとめて解説します。

この記事でわかること

  1. download属性の基本的な書き方
  2. 保存時のファイル名を指定する方法
  3. download属性が効かない原因
  4. JavaScriptでCSVなどを生成して保存する方法

1. aタグのdownload属性とは

downloadは、リンク先のリソースをページとして開くのではなく、ファイルとしてダウンロードするようブラウザに伝える属性です。

<a href="files/sample.pdf" download>PDFをダウンロード</a>

通常のリンクとの違いは、<a>タグにdownloadを追加するだけです。ユーザーがリンクをクリックすると、ブラウザの設定に応じてファイルが保存されます。

2. download属性の基本的な使い方

PDFをダウンロードする

<a href="/files/guide.pdf" download>資料PDFをダウンロード</a>

hrefにはダウンロード対象のファイルパスを指定します。先頭が/のパスは、サイトのドメイン直下を基準にした指定です。

画像をダウンロードする

<a href="/images/sample.jpg" download>画像をダウンロード</a>

画像への通常のリンクはクリックするとブラウザに表示されることがありますが、download属性を付けると保存用のリンクとして扱われます。

CSVやZIPをダウンロードする

<a href="/files/sample.csv" download>CSVをダウンロード</a>
<a href="/files/images.zip" download>画像一式をダウンロード</a>

CSV・ZIP・Word・Excelなども同じ書き方です。ファイルの種類ではなく、hrefで指定した保存対象とサーバーの応答によって動作が決まります。

3. ダウンロード時のファイル名を指定する

download属性に値を入れると、保存時に使うファイル名を指定できます。

<a href="/files/guide-2026.pdf" download="web制作ガイド.pdf">
  Web制作ガイドをダウンロード
</a>

この例では、サーバー上のファイル名がguide-2026.pdfでも、保存時の候補は「web制作ガイド.pdf」になります。拡張子も含めて指定すると、利用者に内容が伝わりやすくなります。

補足：実際のファイル名は、ブラウザの設定やサーバーが返すContent-Dispositionヘッダーによって変わる場合があります。属性で指定した名前が常に強制されるわけではありません。

4. 相対パスと絶対パスの書き方

同じサイト内のファイルであれば、相対パスまたはルート相対パスで指定できます。

<!-- 現在のHTMLファイルと同じ階層を基準にする -->
<a href="files/sample.pdf" download>ダウンロード</a>

<!-- ドメイン直下を基準にする -->
<a href="/files/sample.pdf" download>ダウンロード</a>

WordPressでは記事URLの階層が変わる可能性があるため、メディアの完全なURLを使うか、先頭が/のルート相対パスを使うとリンク切れを防ぎやすくなります。

5. download属性が効かない主な原因

外部ドメインのファイルを指定している

download属性は、原則として同一オリジンのURL、またはblob:・data:URLで利用できます。別ドメインのファイルを指定した場合は属性が無視され、通常のリンクとして開かれることがあります。

<!-- 同じドメイン：動作しやすい -->
<a href="https://webmoyou.com/files/sample.pdf" download>
  ダウンロード
</a>

<!-- 別ドメイン：download属性が無視される場合がある -->
<a href="https://example.com/sample.pdf" download>
  ダウンロード
</a>

外部サーバーのファイルを確実にダウンロードさせたい場合は、ファイルを自分のサーバーに置くか、外部サーバー側でContent-Disposition: attachmentを返す必要があります。

サーバーのレスポンスヘッダーが影響している

サーバーが返すContent-DispositionやContent-Typeによって、ファイルがダウンロードされるかブラウザ内で表示されるかが変わります。HTMLだけで制御できない場合は、サーバー側の設定を確認してください。

Content-Disposition: attachment; filename="guide.pdf"
Content-Type: application/pdf

リンク先がファイルではなくHTMLページになっている

会員認証ページやエラーページへリダイレクトされていると、期待したファイルは保存されません。hrefのURLを直接開き、ファイルが正しく返されているか確認しましょう。

JavaScriptによる自動クリックが制限されている

ユーザー操作なしで複数ファイルを自動ダウンロードさせる実装は、ブラウザにブロックされることがあります。基本は、ユーザー自身がわかりやすいリンクやボタンをクリックする設計にします。

6. JavaScriptで生成したCSVをダウンロードする

画面上のデータからCSVを生成する場合は、BlobとURL.createObjectURL()を使って一時的なURLを作ります。

<button type="button" id="download-csv">CSVをダウンロード</button>
const button = document.getElementById('download-csv');

button.addEventListener('click', () => {
  const csv = '名前,点数\n山田,90\n佐藤,85';
  const bom = '\uFEFF';
  const blob = new Blob([bom + csv], {
    type: 'text/csv;charset=utf-8'
  });

  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');

  link.href = url;
  link.download = 'result.csv';
  link.click();

  URL.revokeObjectURL(url);
});

日本語をExcelで開いたときの文字化けを減らすため、この例ではUTF-8のBOMを先頭に追加しています。利用後はURL.revokeObjectURL()で一時URLを解放します。

7. WordPressでダウンロードリンクを設置する方法

WordPressでは、メディアライブラリにファイルをアップロードし、そのファイルURLをhrefに設定します。カスタムHTMLブロックを追加し、次のように記述します。

<a class="download-button"
   href="https://example.com/wp-content/uploads/2026/07/guide.pdf"
   download="web制作ガイド.pdf">
  Web制作ガイドをダウンロード
</a>

example.comとファイルパスは、自分のサイトのURLに置き換えてください。PDFをメディアライブラリで開き、「ファイルのURL」をコピーすると間違いを防げます。

8. わかりやすく安全なダウンロードリンクにするポイント

<a href="/files/guide.pdf" download="web制作ガイド.pdf">
  Web制作ガイド（PDF・2.4MB）をダウンロード
</a>

まとめ

<a>タグにdownload属性を追加すると、同じサイト内のPDF・画像・CSVなどをダウンロードするリンクを簡単に作れます。保存時のファイル名を指定したい場合は、download="ファイル名.拡張子"と記述します。

うまく動かないときは、リンク先が外部ドメインではないか、ファイルURLが正しいか、サーバーのContent-Dispositionがどう設定されているかを確認しましょう。

まずは次の最小コードから試し、用途に合わせてファイル名やリンク文言を調整してください。

<a href="/files/sample.pdf" download="sample.pdf">
  PDFをダウンロード
</a>
モバイルバージョンを終了