html areaラベル

 

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

  1. Q: areaタグの主な用途は何ですか？

    A: areaタグはイメージマップ内のクリック可能な領域を定義するために使用されます。

  2. Q: coords属性は何のために使用されますか？

    A: coords属性は、クリック可能な領域の座標を指定します。

  3. Q: shape属性にはどのような値を設定できますか？

    A: shape属性には、rect（矩形）、circle（円形）、poly（多角形）などの値を設定できます。