HTMLのareaタグについて
定義と使用説明
areaタグは、イメージマップ内のクリック可能な領域を定義するために使用されます。このタグは、mapタグと共に使用され、特定の座標を指定することで、画像内の異なる領域をリンクやスクリプトに結びつけることができます。
ブラウザのサポート状況
ほとんどのモダンなウェブブラウザ（例：Chrome、Firefox、Safari、Edgeなど）がareaタグをサポートしています。以下の表は主要ブラウザでのサポート状況をまとめたものです。
| ブラウザ | サポート |
|---|---|
| Chrome | 完全サポート |
| Firefox | 完全サポート |
| Safari | 完全サポート |
| Edge | 完全サポート |
| Internet Explorer | 完全サポート |
対応タグの属性とイベント
areaタグには、いくつかの属性とイベントがあります。これらを理解することで、より多くの操作が可能になります。
主要属性
coords: 領域の座標を定義します。shape: 領域の形状を指定します（例：rect、circle、poly）。href: 領域がクリックされた時に移動するリンク先を指定します。alt: 代替テキストを定義します。target: リンクが開かれるターゲットウィンドウやフレームを指定します。
主要イベント
onclick: 領域がクリックされた時に発生します。onmouseover: マウスポインタが領域に重なった時に発生します。onmouseout: マウスポインタが領域から離れた時に発生します。
コード例
以下はareaタグの使用例です。この例では、イメージマップを使って画像内の異なる領域にリンクを設置しています。
<img src="example-image.jpg" usemap="#example-map" alt="Example Image">
<map name="example-map">
<area shape="rect" coords="34,44,270,350" href="https://example.com/link1" alt="Link 1">
<area shape="circ" coords="337,300,44" href="https://example.com/link2" alt="Link 2">
<area shape="poly" coords="45,45,345,45,345,450,45,450" href="https://example.com/link3" alt="Link 3">
</map>関連QA
-
Q:
areaタグの主な用途は何ですか？A:
areaタグはイメージマップ内のクリック可能な領域を定義するために使用されます。 -
Q:
coords属性は何のために使用されますか？A:
coords属性は、クリック可能な領域の座標を指定します。 -
Q:
shape属性にはどのような値を設定できますか？A:
shape属性には、rect（矩形）、circle（円形）、poly（多角形）などの値を設定できます。