【HTML】ダウンロードボタンの作り方！download属性の設定やCSSデザイン

Webサイト上で、PDF資料や画像素材、ソフトウェアなどを配布する際、「ここをクリックしてダウンロード」というボタンは欠かせません。

実は、HTMLでファイルをダウンロードさせる機能は、特別なプログラミング言語を使わなくても、標準のタグだけで簡単に実装することができます。

「画像をクリックしたら拡大表示ではなく、保存させたい」
「ダウンロード時のファイル名を分かりやすいものに変えたい」
「クリックしたくなるようなボタンのデザインにしたい」

上記のようなことを実現できるよう、この記事では、HTMLの <a> タグ（アンカータグ）と download 属性を使ったダウンロードボタンの作り方から、コピペで使えるCSSデザイン、そして属性が効かない場合の対処法まで、現在のWeb標準に合わせて詳しく解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

HTMLでダウンロードボタンを作る基本手順
1. download属性の基本的な書き方
2. 保存するファイル名を指定する方法
画像やPDFを確実にダウンロードさせるテクニック
1. 画像（JPG/PNG）のダウンロードボタン
2. PDFファイルのダウンロードボタン
コピペOK！CSSで作るおしゃれなダウンロードボタンのデザイン
1. シンプルで使いやすい立体ボタン
2. アイコン付きのダウンロードボタン
download属性が効かない？原因と対処法
HTML/CSSのスキルを活かして年収を上げる方法

HTMLでダウンロードボタンを作る基本手順

ファイルをダウンロードさせるためのリンクやボタンを作るには、基本的にはリンクを作成する <a> タグを使用します。

通常、<a> タグでファイルにリンクすると、ブラウザは「そのファイルを開こう」とします。

例えば、画像やPDFであればブラウザ上で表示され、Zipファイルであればダウンロードが始まります。

これを「どんなファイルでも強制的にダウンロードさせる」ようにするには、download 属性を使用します。

download属性の基本的な書き方

使い方は非常にシンプルです。
<a> タグに download という属性を追加するだけです。

<!-- 基本的なダウンロードリンク -->
<a href="path/to/file.pdf" download>
    資料をダウンロードする
</a>

ソースコードの解説

href="path/to/file.pdf"：ダウンロードさせたいファイルの場所（パス）を指定します。
download：この属性を記述することで、ブラウザに対して「このリンク先は表示するのではなく、ダウンロード（保存）してください」と指示を送ります。

保存するファイル名を指定する方法

サーバー上のファイル名が 20260101_v2.pdf のような管理用コードになっていても、ユーザーがダウンロードする際には 会社案内2026.pdf のような分かりやすい名前に変えたい場合があります。

その場合は、download 属性に値を設定します。

<!-- 保存ファイル名を指定する -->
<a href="files/20260101_v2.pdf" download="会社案内2026.pdf">
    会社案内をダウンロード
</a>

ソースコードの解説

download="会社案内2026.pdf"：ここに指定したファイル名でユーザーの端末に保存されます。拡張子（.pdfなど）も含めて記述するのが一般的です。これにより、ユーザーはファイルの内容を推測しやすくなり、利便性が向上します。

画像やPDFを確実にダウンロードさせるテクニック

画像（.jpg, .png）やPDFファイルは、ブラウザが標準で表示機能を持っているため、単にリンクを貼っただけでは画面遷移して表示されてしまいます。

これを防ぎ、ボタンを押した瞬間にダウンロードを開始させるには、やはり download 属性が必須です。

画像（JPG/PNG）のダウンロードボタン

<p>以下のボタンから高解像度の画像を保存できます。</p>

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

href に画像ファイルのパスを指定し、download 属性を付与しています。

これにより、クリック時にブラウザで画像が開かれることなく、すぐに「名前を付けて保存」の挙動（または自動保存）が行われます。

PDFファイルのダウンロードボタン

<a href="documents/manual.pdf" download="操作マニュアル.pdf">
    PDFマニュアル（1.5MB）
</a>

PDFも同様です。
特にビジネスサイトではPDF資料の配布が多いため、この書き方は頻出します。

ユーザーにとって親切な設計にするために、ボタンのラベルには「ファイル形式（PDF）」や「ファイルサイズ」を併記しておくと良いでしょう。

コピペOK！CSSで作るおしゃれなダウンロードボタンのデザイン

<a> タグのままだと単なるテキストリンクに見えてしまい、クリックされにくい場合があります。

その場合は、CSSを使って、思わず押したくなる「ボタンらしいデザイン」に装飾しましょう。

アイコンを使ったデザインも紹介します。

シンプルで使いやすい立体ボタン

影をつけて立体感を出し、クリックできることを明確に伝えます。

<!-- HTML -->
<a href="file.zip" download class="btn-download">
    ダウンロード
</a>

<!-- CSS -->
<style>
.btn-download {
    display: inline-block;
    padding: 12px 40px;
    background-color: #27ae60; /* 緑色 */
    color: #fff;
    text-decoration: none; /* 下線を消す */
    border-radius: 5px;    /* 角丸 */
    box-shadow: 0 4px 0 #219150; /* 立体的な影 */
    font-weight: bold;
    transition: 0.2s;
}

.btn-download:hover {
    transform: translateY(2px); /* 押したように下へ動く */
    box-shadow: 0 2px 0 #219150; /* 影を薄くする */
}
</style>

<a> タグはインライン要素なので、display: inline-block を指定して幅や余白（padding）を持てるようにしています。

box-shadow で下の影を作り、:hover（マウスを乗せた時）に transform: translateY で位置を下げることで、ボタンを押し込んだようなアニメーションを表現しています。

アイコン付きのダウンロードボタン

「ダウンロード」という文字だけでなく、下矢印などのアイコンがあると直感的に分かりやすくなります。

ここではCSSだけでアイコンを表現する例を紹介します。

<!-- HTML -->
<a href="catalog.pdf" download class="btn-icon">
    <span class="icon">▼</span> カタログをDL
</a>

<!-- CSS -->
<style>
.btn-icon {
    display: inline-flex; /* アイコンと文字を横並び */
    align-items: center;
    padding: 12px 24px;
    background-color: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 50px; /* 丸みのあるボタン */
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-icon:hover {
    background-color: #2980b9;
}

.btn-icon .icon {
    margin-right: 10px; /* 文字との間隔 */
    font-size: 0.8em;
}
</style>

display: inline-flex と align-items: center を使うことで、アイコンとテキストを垂直方向の中央にきれいに配置しています。

アイコン部分は画像を使わずテキスト（▼）で代用していますが、Font AwesomeなどのアイコンフォントやSVG画像を使うと、より本格的なデザインになります。

download属性が効かない？原因と対処法

実装したはずなのに「クリックしてもダウンロードされず、ブラウザで開いてしまう」「ファイル名が変わらない」というトラブルが起きることがあります。

これには主に、ブラウザのセキュリティ制限が関係しています。

原因：同一オリジンポリシー（クロスドメイン）の制限

現在の主要なブラウザ（Chrome、Edge、Safari、Firefoxなど）では、セキュリティ上の理由から、「異なるドメイン（クロスオリジン）のファイルには download 属性が効かない」という仕様になっています。

OK（同じドメイン）：サイト example.com から example.com/file.pdf へのリンク。 → download 属性は有効です。
NG（異なるドメイン）：サイト example.com から other-site.com/file.pdf へのリンク。 → download 属性は無視され、通常のリンクとして機能します（ブラウザで開く）。