5/23HTML2021年5月23日Webページ上に「ファイルをダウンロードできるリンクを設置したい」という場面があるかと思います。製品のマニュアルが記載されたPDFや、画像などのアセットを配布したいときなどによく使われますね。いったダウンロードリンクを作成するには、aタグのdownload属性を使用するだけで簡単に実装できます!今回の記事では、aタグのdownload属性の記述方法download属性を使用する際の注意点これらについて説明していきますので、ダウンロードするリンクを作成したい方はぜひ参考にしてみてください。目次aタグのdownload属性の記述方法まずはダウンロードリンクの書き方をみていきましょう。以下がダウンロードリンクの完成版のコードです。download="sample.pdf">クリックでダウンロード</a>作成する上でのポイントは、以下の2つです。href属性にダウンロードさせたいファイルへのパスを記入download属性にファイル名を記入それぞれ説明していきますね。href属性にファイルへのパスを記入するhref属性には、ダウンロードさせたいファイルのパスを入力します。パスの指定方法は、相対パスでも絶対パスでもどちらでも構いません。download属性にダウンロード時のファイル名を指定する続いてdownload属性には、ダウンロードした時のファイルの名前を指定します。download属性が空の場合は、ファイルが持つ名前がそのまま反映されます。download="example.pdf">クリックでダウンロード</a>上記の例のように、本来のファイル名を指定することもできますし、ダウンロード時にファイル名を変更したい場合は任意の名前を指定することもできます。例1では元のファイル名もダウンロード時の名前もsample.pdfなので、sample.pdfとしてダウンロードされます。例2では、元のファイル名はsample.pdfですが、download属性にはexample.pdfを指定しているので、ダウンロード時にはexample.pdfとして保存されます。download>クリックでダウンロード</a>上記の例のように、download属性の値を空にする、もしくは値を指定しない場合は、ファイルが持つ本来の名前でダウンロードされます。この場合ファイル名はsample.pdfなので、そのままの名前が保持されますね。aタグのdownload属性を使用する上での注意点aタグのdownload属性を使用するにあたって、いくつか注意すべき点を説明しておきます。同一オリジンのURL以外ではダウンロードできないdownload属性でダウンロード可能なのは、同一オリジンの場合のみです。そのため、外部のサイトのファイルをダウンロードさせることはできません。data:の各スキームでのみ動作します。MDNダウンロードリンクを設置する場合は、必ず自身のサイトのリソースを使用しましょう。IEなど一部未対応のブラウザがあるdownload属性の現在のブラウザ対応状況は、以下の通りです。https://caniuse.com/?search=download見ていただければわかる通り、IEや古いバージョンのブラウザでは対応していませんね。これら未対応のブラウザでは、ダウンロードの代わりにページ遷移でファイルを開くという仕様になっています。ファイル形式が画像やPDFファイルなら、右クリックから手動でダウンロード可能です。IEでもdownloadを機能させたい場合は、今のところJavaScriptを併用するしかなさそうですね。それに関してはこちらの記事で紹介されているので、ぜひ参考にしてみてください。【まとめ】aタグのdownload属性でファイルのダウンロードリンクを作成可能!以上、aタグのdownload属性を使用して、ダウンロードリンクを実装する方法を紹介しました。自身のサイトでPDFや画像などのアセットを配布したいときは、ぜひこの方法を使用してみてください!記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。