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

HTMLでイメージマップの領域形状を設定する方法（shape属性の使い方）

HTMLでは、<area>要素にshape属性を指定することで、クリック可能な領域（リンク領域）の形状を定義できます。shape属性は、イメージマップを作成する際に重要な役割を果たし、画像上のどの部分がリンクとして機能するかを決定します。

shape属性で指定できる値

shape属性には、以下の値を設定できます。

  • rect（矩形）― 四角形の領域を定義します。省略した場合の既定値です。
  • circle（円形）― 円形の領域を定義します。
  • poly（多角形）― 3つ以上の座標を組み合わせた多角形の領域を定義します。
  • default ― 画像全体を領域として定義します。

なお、shape属性はcoords属性と組み合わせて使用します。coords属性には、領域の具体的な座標（ピクセル値）を指定します。例えば、円形の場合は「中心のX座標、中心のY座標、半径」の順で記述します。

shape属性の実装例

次のコードは、shape属性を使って円形のクリック領域を設定する例です。画像の一部を円形のリンク領域として定義し、クリックすると指定したページへ移動します。

<!DOCTYPE html>
<html>
<head>
<title>HTML shape属性の例</title>
</head>
<body>
<img src="/images/html.gif" alt="HTMLマップ" border="0" usemap="#html"/>

<!-- イメージマップの定義 -->
<map name="html">
<area shape="circle" coords="154,150,59" href="about/about_team.htm" alt="チーム" target="_self" />
</map>
</body>
</html>

コードの解説

  • <img>要素のusemap属性に「#html」を指定することで、画像とマップを関連付けています。
  • <map>要素のname属性の値が、usemapで指定した名前と一致する必要があります。
  • <area>要素では、shape="circle"により円形の領域を定義し、coords="154,150,59"で中心座標(154,150)、半径59ピクセルの円を指定しています。
  • alt属性には、領域の代替テキストを設定します。アクセシビリティの観点から必ず指定しましょう。

このようにshape属性を活用すれば、1枚の画像の中に複数のリンク領域を持たせたインタラクティブなイメージマップを簡単に作成できます。

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

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

  2. HTMLのbrタグとは？改行の設定方法を実例付きで解説

    HTMLの<br>タグは、テキスト内に強制的な改行（ラインブレーク）を挿入するためのタグです。段落タグである<p>とは異なり、<br>タグを使うことで、新しい段落を作らずに1行分だけ改行できます。終了タグが不要な空要素（void要素）である点も特徴です。この記事では、<br>タグの基本的な使い方を、実際のコード例と表示結果をもとにわかりやすく解説します。コード例：brタグで改行を設定する以下は、HTMLで<br>タグを使用して改行を設定するサンプルコードです。<!DOCTYPE html> <html> <