【HTML Living Standard】area要素の使い方
area要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
areaオブジェクトは、HTMLのイメージマップ内で、画像上のクリック可能な特定の領域を定義するために使用されるオブジェクトです。イメージマップとは、一枚の画像に複数の異なるリンクを設定できるようにする機能であり、主にmap要素とこのareaオブジェクトを組み合わせて実現されます。
areaオブジェクトは、常にmap要素の子要素として配置され、その親であるmap要素のname属性と、参照元の<img>要素のusemap属性が関連付けられることで機能します。このオブジェクトの主な役割は、画像上のどの部分がクリック可能であるかをブラウザに伝え、その領域に対する動作を定義することです。
具体的な定義には、shape属性を用いて領域の形状（例えば、矩形を表すrect、円を表すcircle、多角形を表すpolyなど）を指定します。そして、coords属性でその形状の具体的な座標値（ピクセル単位）を設定します。さらに、href属性を用いることで、その定義された領域をクリックした際のリンク先URLを指定することが可能です。アクセシビリティの観点から、alt属性を用いて領域の代替テキストを提供することは非常に重要であり、視覚障害のあるユーザーや画像が表示されない環境でも、その領域がどのような意味を持つかを理解できます。
areaオブジェクト自体は、ブラウザ上で直接的な視覚表示を行いません。しかし、定義された領域がユーザーの操作に応答することで、画像の一部をインタラクティブな要素へと変換する機能を提供します。これにより、例えば複雑な図形や地図画像上で特定の部品や地域をクリックすると、その詳細情報ページへ遷移するといった、画像に豊かなユーザーインタラクションを追加することが可能になります。
構文(syntax)
1<area shape="rect" coords="0,0,100,50" href="destination.html" alt="クリック可能な長方形領域">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML area要素で画像マップを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML area要素 サンプルコード</title> 7</head> 8<body> 9 <!-- 10 img要素のusemap属性で、map要素のname属性と関連付け、 11 画像上のクリック可能な領域を定義します。 12 サンプルでは、"dummy_image.jpg"という架空の画像パスを使用しています。 13 --> 14 <img src="dummy_image.jpg" alt="サンプル画像" usemap="#image-map-example" width="500" height="300"> 15 16 <!-- 17 map要素内で複数のarea要素を定義し、 18 画像上の異なる形状の領域にリンクを設定します。 19 shape属性で領域の形状（rect, circle, poly, default）を指定し、 20 coords属性でその形状に応じた座標を指定します。 21 --> 22 <map name="image-map-example"> 23 <!-- shape="rect": 四角形領域。coordsは「左上X,左上Y,右下X,右下Y」 --> 24 <area shape="rect" coords="0,0,100,100" href="rectangle-page.html" alt="四角形の領域"> 25 26 <!-- shape="circle": 円形領域。coordsは「中心X,中心Y,半径」 --> 27 <area shape="circle" coords="200,150,50" href="circle-page.html" alt="円形の領域"> 28 29 <!-- shape="poly": 多角形領域。coordsは「頂点1X,頂点1Y,頂点2X,頂点2Y,...,頂点NX,頂点NY」 --> 30 <area shape="poly" coords="350,50,450,150,300,150" href="polygon-page.html" alt="多角形の領域"> 31 32 <!-- shape="default": 上記のいずれの領域にも一致しない部分。coordsは不要 --> 33 <area shape="default" href="default-page.html" alt="その他の領域"> 34 </map> 35</body> 36</html>
area要素は、HTMLのmap要素と組み合わせて使用され、画像上の特定の領域をクリック可能にする「ホットスポット」を定義します。これにより、1つの画像上に複数のリンクを設定し、画像内のクリックされた部分に応じて異なるページへ移動させるインタラクティブな機能を実現できます。
この要素は、img要素のusemap属性とmap要素のname属性を関連付けることで機能します。area要素自体はコンテンツを持たず、開始タグと終了タグの間に何も記述しません。
area要素の主な属性には、領域の形状を指定するshape属性と、その形状に応じた座標を定義するcoords属性があります。shape属性には、四角形（rect）、円形（circle）、多角形（poly）、または上記のいずれにも当てはまらない領域（default）を指定できます。coords属性の値はshape属性に応じて異なり、例えばrectの場合は「左上X座標,左上Y座標,右下X座標,右下Y座標」のように、具体的な位置とサイズを指定します。
また、href属性でクリックされたときに移動するリンク先を指定し、alt属性でその領域の代替テキストを提供します。
area要素はHTMLの要素であり、プログラミング言語の関数のような「引数」や「戻り値」の概念は持っていません。そのため、これらの情報については特に指定する必要はありません。
area要素は、map要素とimg要素のusemap属性と連携し、画像内の特定の領域をクリック可能にします。shape属性で領域の形状（rect、circle、poly、default）を指定し、coords属性でその形状に合わせた座標を正確に記述することが重要です。shapeによってcoordsの指定形式が異なるため、特に注意が必要です。各area要素には必ずhref属性でリンク先を指定し、アクセシビリティのためにalt属性も忘れずに設定してください。サンプルコードの画像パスは実際のファイルパスに置き換える必要があります。
HTML area 色 を 変える
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML area要素のインタラクティブなハイライト表示</title> 7 <style> 8 /* 全体の配置と背景色 */ 9 body { 10 font-family: sans-serif; 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 min-height: 100vh; 15 margin: 0; 16 background-color: #f0f0f0; 17 } 18 19 /* 画像マップコンテナのスタイル */ 20 .image-map-container { 21 position: relative; /* 子要素の絶対配置の基準にする */ 22 display: inline-block; /* 画像のサイズに合わせてコンテナの幅を調整 */ 23 border: 1px solid #ccc; /* コンテナの境界線 */ 24 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */ 25 } 26 27 /* ハイライト表示用のオーバーレイコンテナ */ 28 .highlight-overlay { 29 position: absolute; 30 top: 0; 31 left: 0; 32 width: 100%; 33 height: 100%; 34 pointer-events: none; /* このオーバーレイがマウスイベントをブロックしないようにする */ 35 overflow: hidden; /* ハイライトがはみ出さないように */ 36 } 37 38 /* 個々のハイライト領域のスタイル */ 39 .highlight-area { 40 position: absolute; 41 background-color: rgba(0, 123, 255, 0.4); /* 半透明の青色でハイライト */ 42 border: 1px solid rgba(0, 123, 255, 0.8); /* 境界線 */ 43 box-sizing: border-box; /* paddingとborderをwidth/heightに含める */ 44 display: none; /* 初期状態では非表示 */ 45 } 46 </style> 47</head> 48<body> 49 <div class="image-map-container"> 50 <!-- クリック可能な領域を持つ画像 --> 51 <img src="https://via.placeholder.com/600x400/87CEEB/FFFFFF?text=Clickable+Image" 52 alt="クリック可能な画像（サンプル）" 53 usemap="#myimagemap" 54 id="myImage" 55 width="600" 56 height="400"> 57 58 <!-- 画像の上に重ねるハイライト表示用のコンテナ --> 59 <div class="highlight-overlay" id="highlightOverlay"></div> 60 61 <!-- 画像マップの定義 --> 62 <map name="myimagemap"> 63 <!-- 矩形（四角形）のクリック可能領域 --> 64 <area shape="rect" coords="50,50,200,150" href="#section1" alt="セクション1（四角）"> 65 <!-- 円形のクリック可能領域 --> 66 <area shape="circle" coords="300,200,70" href="#section2" alt="セクション2（円）"> 67 <!-- 多角形（ポリゴン）のクリック可能領域 --> 68 <area shape="poly" coords="400,250,550,250,500,350,450,350" href="#section3" alt="セクション3（多角形）"> 69 </map> 70 </div> 71 72 <script> 73 // DOM（文書オブジェクトモデル）の読み込みが完了したらスクリプトを実行 74 document.addEventListener('DOMContentLoaded', () => { 75 const img = document.getElementById('myImage'); 76 const highlightOverlay = document.getElementById('highlightOverlay'); 77 const areas = document.querySelectorAll('map[name="myimagemap"] area'); 78 79 // ハイライト表示に使うdiv要素を作成 80 const highlightElement = document.createElement('div'); 81 highlightElement.classList.add('highlight-area'); 82 highlightOverlay.appendChild(highlightElement); 83 84 // 各area要素にマウスイベントリスナーを設定 85 areas.forEach(area => { 86 // マウスがarea要素の上に乗った時の処理 87 area.addEventListener('mouseover', () => { 88 const shape = area.shape; // 領域の形状 (rect, circle, poly) 89 const coords = area.coords.split(',').map(Number); // 座標を数値配列に変換 90 91 highlightElement.style.display = 'block'; // ハイライト要素を表示 92 93 // 形状と座標に基づいてハイライト要素の位置とサイズを設定 94 switch (shape) { 95 case 'rect': // 矩形の場合 96 // coords: x1, y1, x2, y2 (左上と右下の座標) 97 highlightElement.style.left = `${coords[0]}px`; 98 highlightElement.style.top = `${coords[1]}px`; 99 highlightElement.style.width = `${coords[2] - coords[0]}px`; 100 highlightElement.style.height = `${coords[3] - coords[1]}px`; 101 highlightElement.style.borderRadius = '0'; // 矩形なので角丸なし 102 break; 103 case 'circle': // 円形の場合 104 // coords: cx, cy, r (中心のx座標, 中心y座標, 半径) 105 highlightElement.style.left = `${coords[0] - coords[2]}px`; // 中心から半径分左へ 106 highlightElement.style.top = `${coords[1] - coords[2]}px`; // 中心から半径分上へ 107 highlightElement.style.width = `${coords[2] * 2}px`; // 直径 108 highlightElement.style.height = `${coords[2] * 2}px`; // 直径 109 highlightElement.style.borderRadius = '50%'; // 円形にする 110 break; 111 case 'poly': // 多角形の場合 112 // coords: x1, y1, x2, y2, ..., xn, yn 113 // 多角形を正確にCSSだけで描画するのは困難なため、ここではその外接する矩形を表示します。 114 // より正確な描画にはSVGやCanvas要素を使用する必要がありますが、初心者向けに簡略化しています。 115 const xCoords = []; 116 const yCoords = []; 117 for (let i = 0; i < coords.length; i += 2) { 118 xCoords.push(coords[i]); 119 yCoords.push(coords[i + 1]); 120 } 121 const minX = Math.min(...xCoords); 122 const minY = Math.min(...yCoords); 123 const maxX = Math.max(...xCoords); 124 const maxY = Math.max(...yCoords); 125 126 highlightElement.style.left = `${minX}px`; 127 highlightElement.style.top = `${minY}px`; 128 highlightElement.style.width = `${maxX - minX}px`; 129 highlightElement.style.height = `${maxY - minY}px`; 130 highlightElement.style.borderRadius = '0'; // 多角形なので角丸なし 131 break; 132 } 133 }); 134 135 // マウスがarea要素から離れた時の処理 136 area.addEventListener('mouseout', () => { 137 highlightElement.style.display = 'none'; // ハイライト要素を非表示 138 }); 139 }); 140 }); 141 </script> 142</body> 143</html>
HTMLのarea要素は、map要素と組み合わせて使用され、ウェブページ上の画像（img要素）の一部を、あたかもボタンのようにクリック可能な領域として定義する役割を持ちます。この要素自体が画面に何かを描画したり、特定の値を引数として受け取ったり、処理結果を戻り値として返したりすることはありません。
提供されたサンプルコードでは、area要素を使って画像上に矩形（四角形）、円形、多角形の三つの異なるクリック可能領域が設定されています。shape属性で領域の形状を、coords属性でその形状の座標を指定し、href属性でクリック時のリンク先を定義します。
キーワードにある「色を変える」という動作は、area要素単独では実現できませんが、サンプルコードではJavaScriptとCSSを連携させることでこれを実現しています。具体的には、マウスカーソルがarea要素によって定義された領域の上に乗った際に、CSSでスタイルが定義された半透明のハイライト要素をその領域に重ねて表示し、視覚的に色が変わるように見せています。マウスカーソルが領域から外れると、このハイライトは非表示になります。このように、area要素自体は目に見えませんが、JavaScriptやCSSと組み合わせることで、ユーザーに対してインタラクティブな情報を提供できます。
area要素自体はクリック可能な領域を定義するものであり、CSSで直接背景色や枠線といった視覚的なスタイルを変更することはできません。サンプルコードでは、JavaScriptを用いてarea要素のマウスイベントを検知し、その形状と座標に合わせて別のdiv要素を画像の上に重ねて表示することで、疑似的にハイライト表示（色の変化）を実現しています。coords属性の座標は、関連付けられた<img>要素の左上を基準とします。多角形（poly）のハイライトは、CSSの描画限界から、サンプルコードでは外接する矩形で表示されている点にご留意ください。より正確な多角形描画にはSVGやCanvasの検討が必要です。画像がレスポンシブでサイズが変わる場合は、coordsの値も動的に計算し直す必要があります。