この記事は、HTMLのタグについて、『なんとなくで使えている』方へにむけて一度タグの意味と種類を確認してみよう的な感じの記事です。

実際は感覚的にどういうタグかわかっていればコードは書けるけど、ある程度かけるようになったからこそ、一歩先の『正しい使い方』や『もっといい使い方』等理解を深めて行けたらなあと思っています。

なお、本記事の内容はHTMLクイックリファレンスを参考文献として、より具体的に実際のコードを見ながら解説していきます。

リンク

part4～③リンク～【Aタグ】ではHTMLタグの分類の『②リンク』のタグ<A>について解説しました。

<A>タグ内に記述したテキストや画像を出発点としてページ内やページ外へ遷移するリンク（到達点）を貼ることができるようになるタグでした。

今回の③リンクに分類される<MAP><AREA>は、併用することで一つの画像の中に複数のリンクを貼ることができます。

MAPタグ/AREAタグ

まずは、下記コードを参照していただきたい。おじさんの絵が飾られた画像には、二つのリンクが貼られています。

絵の飾られた右側をクリックすると【sustainホーム】へ遷移、その反対の左側をクリックすると【sustain制作実績】へ遷移します。

このように、<MAP><AREA>を使えば、一つの画像の中に複数のリンクを貼ることができます。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

記述方法

下記手順によって記述します。

• リンクを貼りたい画像<img>と<MAP>を紐づける
• <MAP>の中に、貼りたいリンクの数だけ<AREA>を記述する
• <AREA>にリンクを貼る画像の場所、形状を指定する。

リンクを貼りたい画像<img>と<MAP>を紐づける

<MAP>にはどの画像にリンクを貼るのか、逆に<img>には、どのイメージマップが適用されるのかをそれぞれ指定します。

<img>には『usemap属性』、<map>には『name属性』でそれぞれ同じを指定する。

<MAP>の中に、貼りたいリンクの数だけ<AREA>を記述する

<MAP>の中に<AREA>を記述した数だけ、リンクを指定することができます。例えば本記事の例のように、二つのリンクを貼りたい場合には、<AREA>を二つ記述し、それぞれにhref属性でリンク先を指定します。

<AREA>にリンクを貼る画像の場所、形状を指定する。

『shape』属性と、『coords』属性で、画像のどこにどのような形状のリンクを貼るのかを指定することができます。

本記事の例では、画像の右半分に四角形の遷移先①（sustainホーム）、左半分に遷移先②(sustain制作実績)を配置しています。

それぞれの属性について解説します。

①shape属性：形状の指定

shape属性では、リンクを貼るエリアの形状を指定することができる。指定できる値は下記のとおりです。

②coords属性：画像のどの範囲にリンクを貼るのか

coords属性では”x方向の始点、y方向の始点、x方向の終点、y方向の終点”を指定します。本記事のx方向の例を見てみると、300ｐｘの画像に対して左端から１５０pxを始点、左端から300ｐｘを終点とすることで、画像の右半分をエリアとしています。同様にy軸も視点を上から0pxの位置に、終点を上から200pxの位置に指定することで、画像の上端から下端までを範囲としています。

まとめ

本記事では、<MAP><AREA>の使用方法について解説しました。一つの画像の中に複数のリンクを貼ることをクライアントサイドイメージマップといいます。四角形以外にも丸や三角等様々な形状で指定できるのでぜひ使ってみてください。

次回は、分類➄画像・動画・埋め込みについて解説します。

ABOUT AUTHOR

シュウヘイ

フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。