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

HTMLのarea要素におけるdownload属性の使い方を解説

HTMLの<area>要素に用意されているdownload属性は、ハイパーリンクがクリックされたときにダウンロードされるファイルの名前を指定するための属性です。通常、リンクをクリックするとリンク先のページがブラウザ上で開かれますが、この属性を設定することで、クリックした瞬間にファイルとして保存させる動作を実現できます。イメージマップの特定の領域からファイルをダウンロードさせたい場合に特に便利です。

download属性の基本構文

download属性の基本的な書き方は以下のとおりです。

<area download="file">

「file」の部分には、ダウンロード時に付けたいファイル名を指定します。ここで設定した名前が、実際に保存されるファイルの名前になります。

実装例：イメージマップでdownload属性を使う

それでは、<area>要素のdownload属性を実際に使ったサンプルコードを見てみましょう。画像内の複数の領域（多角形・長方形・円形）それぞれに、異なるチュートリアルページへのリンクとdownload属性を設定しています。

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
   href = "/perl/index.htm" alt = "Perl Tutorial" download="perl" />
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
   href = "/html/index.htm" target = "_blank" download="html" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
   href = "/php/index.htm" target = "_blank" download="php" />
</map>
</body>
</html>

実行結果

HTMLのarea要素におけるdownload属性の使い方を解説

この状態で、たとえば画像内の「PERL」の領域をクリックすると、ページが開くのではなく、次のようにファイルがダウンロードされます。

HTMLのarea要素におけるdownload属性の使い方を解説

ポイント解説

上記の例では、Perlチュートリアルの領域に対して、<area>要素のdownload属性を使ってダウンロード機能を有効にしています。

<area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
href = "/perl/index.htm" alt = "Perl Tutorial" download="perl" />

ここではdownload属性に「perl」という値を設定しています。この値は、ダウンロードされるファイルの名前としてもそのまま利用されます。

download="perl"

つまり、ユーザーがこの領域をクリックすると、「perl」という名前でファイルが保存される仕組みです。同様に、HTMLやPHPの領域にもそれぞれ「html」「php」というファイル名が設定されており、領域ごとに異なるダウンロード動作を柔軟に制御できる点が、<area>要素のdownload属性の大きな特徴といえます。

  1. HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ

  2. HTMLのstart属性とは？順序付きリストの開始番号を指定する方法

    HTMLのstart属性は、順序付きリスト（<ol>要素）において、最初のリスト項目に付与される番号（開始値）を指定するための属性です。通常、順序付きリストは「1」から自動的に採番されますが、start属性を使うことで、任意の番号からリストを開始させることができます。 構文 start属性の基本的な構文は以下のとおりです。 <ol start="number"></ol> start属性の値には正の整数を指定します。例えば「5」を指定すれば、リストは「5、6、7…」というように採番されます。 使用例 それでは、HTMLのstart属性を使