HTMLのareaタグとは？イメージマップの設定方法と主要属性を徹底解説
HTMLのareaタグは、イメージマップ（image map）の中にクリック可能な領域（エリア）を設定するための要素です。1枚の画像の中に複数のリンク領域を定義できるため、地図や図解などインタラクティブなコンテンツを作成する際に活用されます。
areaタグは必ず<map>タグの子要素として記述し、画像側ではusemap属性で対応するmap要素の名前を指定します。
areaタグで使える主な属性
| 属性 | 値 | 説明 |
|---|---|---|
| alt | テキスト | エリアの代替テキストを指定します。アクセシビリティの観点から設定が推奨されます。 |
| coords | shape="rect" の場合："left, top, right, bottom" shape="circ" の場合："centerx, centery, radius" shape="poly" の場合："x1, y1, x2, y2, ..., xn, yn" | shape属性に対応した座標を指定し、イメージマップ上のリンク領域を定義します。 |
| download | ファイル名 | ユーザーがハイパーリンクをクリックした際に、対象ファイルをダウンロードさせるように指定します。 |
| href | URL | リンク先のページURL、またはアンカーの名前を指定します。 |
| hreflang | 言語コード | リンク先URLの言語を指定します。 |
| media | メディアクエリ | リンク先URLが最適化されているメディアやデバイスを指定します。 |
| nohref | true / false | その領域をイメージマップから除外します（※HTML5では廃止された属性です）。 |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | 現在のドキュメントとリンク先URLとの関係性を指定します。 |
| shape | rect rectangle circ circle poly polygon | イメージマップにおける領域の形状を指定します。 |
| target | _blank _parent _self _top | リンク先URLを開く場所を指定します。 _blank：新しいウィンドウ（タブ）で開く _self：クリックされたのと同じフレームで開く _parent：親フレームセットで開く _top：ウィンドウ全体で開く |
| type | MIMEタイプ | リンク先URLのMIMEタイプ（Multipurpose Internet Mail Extensions）を指定します。 |
areaタグの実装例
それでは、実際に<area>タグを使ったサンプルコードを見てみましょう。
<!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" 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種類の形状（多角形・長方形・円形）のリンク領域を設定しています。それぞれの領域をクリックすると、対応するチュートリアルページが新しいウィンドウで開きます。
実行結果
ポイントまとめ
- coords属性の値は、shape属性で指定した形状によって書き方が異なる点に注意しましょう。
- alt属性は必ず設定し、スクリーンリーダー利用者にも内容が伝わるようにしましょう。
- 座標は画像の左上を原点（0, 0）としたピクセル単位で指定します。
-
HTMLのembedタグとは？使い方と主な属性をわかりやすく解説
<embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル
-
HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説
HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"