HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでダウンロードリンクを作成する方法をわかりやすく解説

HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。

コード例

以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。

<!DOCTYPE html>
<html>
<body>
<h1>Download Link example</h1>
<a href="https://i.picsum.photos/id/225/800/800.jpg" download>
<img src="https://i.picsum.photos/id/225/800/800.jpg" style="width: 300px;height: 300px;">
</a>
<h2>Click on the image above to download it</h2>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が表示されます。画像をクリックすると、自動的にダウンロードが開始されます。

HTMLでダウンロードリンクを作成する方法をわかりやすく解説

ポイント解説

  • download属性：値を指定しない場合は、元のファイル名のまま保存されます。download="任意のファイル名.jpg"のように値を設定すると、保存時のファイル名を変更できます。
  • 同一オリジンの制限：download属性による強制ダウンロードは、基本的に同一ドメイン内のリソースに対してのみ有効です。外部サイトのファイルの場合、ブラウザによっては通常のナビゲーションとして扱われることがあります。
  1. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト

  2. HTMLでファイルアップロードボタンを作成する方法をわかりやすく解説

    HTMLでファイルアップロードボタンを作成するには、<input>要素のtype属性に「file」を指定します。これにより、ユーザーが自分のPCやスマートフォンからファイルを選択してアップロードできるボタンが簡単に設置できます。 コード例 <!DOCTYPE html> <html> <head> <title>ファイルアップロードボタンの例</title> </head> <body> <h1>ファイルアップロードボタンの例</h1> <p>「ファイルを選択」ボ