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

HTMLで画像マップの領域を定義する方法｜areaタグの属性と使い方を解説

HTMLで画像マップ（イメージマップ）のクリック可能な領域を定義するには、<area>タグを使用します。<area>タグは<map>タグの中に記述し、1枚の画像の特定部分ごとに異なるリンクを設定することができます。

<area>タグで使える主な属性

属性値説明
altテキスト領域の代替テキストを指定します。
coordsshape="rect" の場合：coords="left, top, right, bottom"
shape="circ" の場合：coords="centerx, centery, radius"
shape="poly" の場合：coords="x1, y1, x2, y2, …, xn, yn"		shape属性に対応した座標を指定し、画像マップの領域を定義します。
download
（HTML5）		ファイル名ハイパーリンクがクリックされたときに、リンク先をダウンロードさせることを指定します。
hrefURLリンク先のページのURL、またはアンカー名を指定します。
hreflang
（HTML5）		言語コードリンク先URLの言語を指定します。
media
（HTML5）		メディアクエリリンク先URLが最適化されているメディアやデバイスを指定します。
nohreftrue / falseその領域を画像マップから除外します。
rel
（HTML5）		alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag		現在のドキュメントとリンク先URLとの関係性を指定します。
shaperect / rectangle
circ / circle
poly / polygon		画像マップの領域の形状を指定します。
target_blank
_parent
_self
_top		リンク先URLをどこで開くかを指定します。
_blank：新しいウィンドウで開く
_self：クリックされたのと同じフレームで開く
_parent：親フレームセットで開く
_top：ウィンドウ全体で開く
type
（HTML5）		MIMEタイプリンク先URLのMIMEタイプ（Multipurpose Internet Mail Extensions）を指定します。

使用例

次のコードを実行すると、<area>タグによる画像マップの動作を確認できます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML area Tag</title>
    </head>
    <body>
        <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" target="_blank"/>

            <area shape="rect" coords="22,83,126,125" alt="HTML Tutorial"
                href="/html/index.htm" target="_blank"/>

            <area shape="circle" coords="73,168,32" alt="PHP Tutorial"
                href="/php/index.htm" target="_blank"/>
        </map>
    </body>
</html>

この例では、1枚の画像に対して3種類の形状の領域を定義しています。五角形（poly）の領域はPerlチュートリアルへ、矩形（rect）の領域はHTMLチュートリアルへ、円形（circle）の領域はPHPチュートリアルへそれぞれリンクされており、いずれも新しいウィンドウ（target="_blank"）で開きます。このように<area>タグとcoords属性を組み合わせることで、画像の好きな位置を自由にクリック可能なリンク領域として設定できます。

  1. HTMLのareaタグとは？イメージマップの設定方法と主要属性を徹底解説

    HTMLのareaタグは、イメージマップ（image map）の中にクリック可能な領域（エリア）を設定するための要素です。1枚の画像の中に複数のリンク領域を定義できるため、地図や図解などインタラクティブなコンテンツを作成する際に活用されます。 areaタグは必ず<map>タグの子要素として記述し、画像側ではusemap属性で対応するmap要素の名前を指定します。 areaタグで使える主な属性 属性値説明 altテキストエリアの代替テキストを指定します。アクセシビリティの観点から設定が推奨されます。 coordsshape=rect の場合：left, top, right,

  2. HTMLの<area>要素におけるtarget属性の使い方を解説

    HTMLの<area>要素におけるtarget属性とは<area>要素のtarget属性を使うと、クリックされたリンク先のドキュメントをどこに表示するかを指定できます。たとえば、新しいウィンドウ（タブ）で開く、同じフレーム内で開く、親フレームで開く、といった表示方法を柔軟に制御することが可能です。target属性の構文target属性の基本的な構文は以下の通りです。<area target=_blank|_self|_parent|_top|フレーム名>それぞれの値の意味は次のようになっています。_blank：リンク先のドキュメントを新しいウィンドウまたは新