VIDEO LESSON

HTMLのmapタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:27動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の五十三本目は、マップタグです。
0:08マップは、一枚の画像の中に複数のクリックできる場所を作るためのタグです。
0:13普通の画像リンクは、画像全体が一つのリンクになりますが、マップを使えば、
0:18画像の左側と右側で別々のページへ移動させることができます。
0:22今回は、画像とマップとエリアという三つの部品の組み合わせ、形と座標の指定方法、
0:27表示サイズが変わったときの注意点まで、順に学んでいきましょう。
0:33一枚の絵をそのまま案内板として使える点が、この仕組みの面白いところです。
0:38まず、どんな場面で使うのかを整理します。
0:41代表例は、会場の案内図や建物の見取り図です。
0:45入り口、受付、会議室といった場所ごとにクリックできると、利用者は目的の案内ページへ直接進めます。
0:53ほかにも、地図の画像で地域ごとにリンクを分けたり、商品写真の中で部品ごとに説明ページへ案内したりする使い方があります。
1:03逆に、写真一枚をそのまま一つのリンクにしたいだけなら、マップは不要で、通常のリンクで十分です。
1:11一枚の画像の中に、行き先の違う場所が複数あるかどうかが、使うかどうかの判断ポイントです。
1:18利用者が迷わず目的の場所へ進めることが、案内図にリンクを付ける大きな目的です。
1:25基本の形を確認します。
1:27イメージマップは三つの部品でできています。
1:31一つ目は、画像を表示するアイエムジー要素です。
1:35二つ目は、クリック領域をまとめるマップ要素です。
1:39三つ目は、領域一つひとつを表すエリア要素で、マップの中に置きます。
1:45画面の例では、アイエムジーにユーズマップ属性で使うマップを指定し、マップの中にエリアを一つ入れています。
1:54開始タグと終了タグを明示して書くのが基本です。
1:58まずはこの三点セットの形を覚えましょう。
2:02部品の役割を分けて考えると、コードが読みやすくなります。
2:07この三つの名前と役割を先に押さえておくと、この後の形や座標の話も理解しやすくなります。
2:14次に、画像とマップをつなぐ仕組みを押さえます。
2:17カギは名前の一致です。
2:19画像側ではユーズマップ属性に、シャープを付けた名前を書き、マップ側ではネーム属性に、
2:23シャープなしで同じ名前を書きます。
2:26たとえば、ユーズマップがシャープ、ベニューなら、ネームもベニューにします。
2:31一文字でも違うと、ブラウザーは対応を見つけられず、クリックしても何も起きません。
2:36名前は文書の中で重ならないように付けることも大切です。
2:40動かないときは、まずこの二つの名前がそろっているかを確かめましょう。
2:44シャープを付ける側と付けない側を間違えやすいので、書きながら声に出して確認すると安心です。
2:50エリアの形は、シェイプ属性で選びます。
2:53種類は四つです。
2:55レクトは四角形、サークルは円形、ポリは多角形で、建物の形に沿った複雑な輪郭にも対応できます。
3:04デフォルトは画像全体を表します。
3:07会場案内図なら、部屋は四角形なのでレクト、丸いオブジェならサークル、というように、
3:12実際の見た目に合った形を選ぶのがコツです。
3:18形によって、次のコーズ属性に書く数字の個数や意味が変わるので、形と座標はセットで覚えましょう。
3:27迷ったら、まず扱いやすい四角形から試すのがおすすめです。
3:32形を先に決めてから座標を測ると、作業の手戻りが少なくなります。
3:38コーズ属性には、領域の位置と大きさを数字で書きます。
3:44単位はピクセルで、画像の左上を起点に数えます。
3:49四角形のレクトでは、左上の横、左上の縦、右下の横、右下の縦、という順に四つの数字を書きます。
4:00円のサークルでは、中心の横、中心の縦、半径の三つです。
4:06多角形のポリでは、頂点の横と縦を順番に並べます。
4:12数字の順番を間違えると、意図と違う場所がクリック領域になるので、図を見ながら一つずつ確認しましょう。
4:23座標は画像そのものの大きさを基準に考える点も大切です。
4:29画像編集ソフトでマウスを合わせながら座標を読み取ると、指定がぐっと楽になります。
4:38記事の活用事例を読み解きます。
4:41画面の例は、幅四百、高さ二百の会場案内図で、左半分をクリックすると教材案内のページへ移動する設定です。
4:49コーズのゼロ、ゼロ、二百、二百は、左上から横二百、縦二百までの四角形を意味し、
4:54ちょうど画像の左半分に当たります。
4:59エリアにはエイチアールイーエフで移動先を、オルトで教材案内という説明を書いています。
5:06オルトは、画像が見えない環境や読み上げ利用時に行き先を伝えるため、リンクのあるエリアには必ず書きましょう。
5:15小さな例ですが、基本がすべて入っています。
5:18まずはこの例をそのまま写して動かし、数字を変えると領域がどう変わるかを試してみましょう。
5:25エリアは、マップの中に複数並べられます。
5:29画面の例では、同じ案内図に四角形と円形の二つのエリアを用意し、それぞれ違うページへ移動できるようにしています。
5:38利用者は、受付の四角を押せば受付案内へ、丸いホールの部分を押せばホール案内へ進めます。
5:45このように場所ごとに行き先を分けられるのが、イメージマップの一番の強みです。
5:51ただし、エリア同士が重なると、前に書いた方が優先される場合があります。
5:57重なりを作らない配置を心がけ、作ったあとはすべての領域を実際にクリックして確かめましょう。
6:05数が増えるほど、オルトの説明文を具体的に書くことが大切になります。
6:10つまずきやすい注意点を確認します。
6:13最大の落とし穴は、表示サイズの変更です。
6:16コーズの座標は画像のピクセル基準で固定されるため、シーエスエスで画像を縮小したり拡大したりすると、
6:22見た目とクリック位置がずれてしまいます。
6:27記事でも、サイズ変更で座標がずれないか確認するよう案内されています。
6:33対策として、画像は指定した大きさのまま表示する、どうしても大きさを変えるならジャバスクリプトで座標を計算し直す、
6:39あるいはエスブイジーで図を描く方法も検討しましょう。
6:46公開前に、実際の表示で押して確かめることが欠かせません。
6:50スマートフォンで見る人が多いページほど、このずれの問題は早めに確かめておきましょう。
6:57ブラウザー互換性を確認します。
7:00記事が参照するエムディーエヌの記録では、マップ要素本体は、クロームが一以降、
7:05エッジが十二以降、ファイアフォックスが一以降で補足条件あり、サファリが一以降と、
7:11主要ブラウザーで古くから広く対応しています。
7:16ネーム属性も同じく全ブラウザーで対応しています。
7:20安心して使える要素ですが、座標のずれは互換性とは別の問題です。
7:25作ったあとは、タブキーで各エリアへ移動してエンターで開けるか、三百二十ピクセル程度の細い画面でも操作できるかをあわせて確認してください。
7:37古い要素だからこそ、基本を押さえれば長く安定して使い続けられます。
7:42最後にまとめです。
7:44マップタグは、一枚の画像の中に複数のクリック領域をまとめるための要素でした。
7:50ポイントは三つです。
7:51一つ目、画像のユーズマップとマップのネームを、シャープの有無に注意して一致させること。
7:58二つ目、エリアのシェイプで形を、コーズで座標を決め、オルトで行き先を説明すること。
8:05三つ目、表示サイズを変えると座標がずれるので、通常のテキストリンクも併せて用意すると安心なことです。
8:13練習として、案内図の左と右で行き先の違うマップを作ってみてください。
8:19お疲れさまでした。
8:20小さな案内図からでよいので、実際に手を動かして座標の感覚をつかんでみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

mapタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。画像上のクリック領域をまとめ、img の usemap と名前で対応付けます。

解説記事・サンプルコードを読む：HTMLのmapタグとは？属性・使い方・ブラウザー互換性と活用例 →