HTMLにはmapというタグがあります。
イメージマップを作るときに使われるタグですが、HTMLの初心者の方は
・mapタグはどのように使われるのか？
と疑問を抱く方がいるでしょう。
今回は、初心者の方にも役立つ
・mapタグを使うのに必要なこと
について説明していきます。
HTMLを学んでいて、mapタグについて知らなかった方は、この記事に目を通すことで意味や詳しい使い方など知識を深められます。
mapタグについて知りたい方は、ぜひ参考にしてください。
目次
mapタグ
mapタグの読み方
mapタグは、「マップ」と読みます。
mapという言葉の通り、HTMLのイメージマップの作成に関わっているタグです。
mapタグはイメージマップを作る要素の一つ
mapタグは、
に使われます。
イメージマップとは、
上記のような画像上にある写真やイラストなどに対して、ハイパーリンクの設定をした画像のことを言います。
複雑な形でも範囲設定が可能なため、デザインにこだわったサイトなどで利用されています。
イメージマップを作るには、他の要素も必要になります。mapタグは、マップ全体の範囲を示す役割を持っており、<map>〜</map>の中にマップの中身となる要素をコーディングしていきます。
mapタグを使うとき、<map>〜</map>以外に書かないといけない必須な文字列があります。イメージマップを作るのに欠かせないポイントです。
この記事内で、コーディングしたイメージマップを交えて詳しく説明をしていきます。
mapタグで利用できる属性
mapタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| name | name属性は、他の要素に対して名前を指定するために使います。指定する要素によって役割が変わってきます。 |
| style | タグ内にCSSのプロパティを直接HTMLに書き、スタイル設定の適用ができる属性です。手軽に見た目の調整が可能な属性ですが、使いすぎるとサイトの管理など、作業にかかる時間が増してしまいます。 |
| id | CSSやJavascriptで調整したい部分にid属性を設定します。しかし、文書内で同様の名前は一つしか設定できません。 |
| class | id属性でできる、「CSSやJavascriptで調整したい部分」にclass属性でも設定が可能です。さらに、文書内で名前を複数回使えます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
mapタグの基本的な使い方
mapタグを使ったイメージマップ
mapタグの使い方が理解できるように、イメージマップ作成をコーディングした内容に対して説明していきます。
See the Pen
mapタグ イメージマップ by 吉井大輝 (@DaiW)
on CodePen.
mapタグ以外にイメージマップ作るのに必要なタグは、主に「img」と「area」の2つです。
imgタグは、画像ファイルを表示するために使われるタグです。
|
1 |
<img src="https://drive.google.com/uc?export=view&id=1quAjzYxgbtslU0nOLURA3TQVio63sbcE" alt="サンプル" usemap="#imagemap" width="200px" height="113px"> |
上記のような書き方で、用意した画像ファイルを表示させます。
次に、areaタグを使い画像の中にある、四角形や円形といった形に合わせて
|
1 2 |
<area href="#" shape="rect" alt="桜" coords="18,28,95,85"> <area href="#" shape="circle" alt="チューリップ" coords="142,58,29"> |
「coords」で座標を指定するなど、ハイパーリンク先の指定や領域を設定します。
画像の形に応じて、areaタグ内の値も変えなければいけません。areaタグのコードをmapタグで囲って、イメージマップができます。
イメージマップでmapタグの中には、imgタグは書かず<map>の上部または</map>の下部にコーディングします。
mapタグには必須のname属性！
mapタグを使う際、name属性も付与する必要があります。
|
1 |
<map name="imagemap"></map> |
のように、nameに対して「” “」の間に文字列を入れます。
mapタグを書く際には、name属性も忘れずにいましょう。
他にもmapタグが同一の文書内にある場合、mapタグ同士のname属性の文字列が同じになってはいけません。
usemap属性を書くときに気を付けること？
イメージマップのimgタグでは、usemap属性とalt属性を使います。
alt属性は、画像の代わりになるテキスト情報に使われます。画像が表示されないときの補助説明や、音声読み上げ機能を使用した場合にはテキスト情報を読み上げてくれます。
一方usemapは、対象のmapタグを指定するために必要な属性です。usemap属性を書くときに気を付けるポイントが2つあります。
それは
・mapタグのname属性と同じ文字列にする
・文字列の前に「#」を入れる
ことです。
imgタグに書き忘れるとイメージマップが出来上がりません。コードを確認するとき、しっかりチェックしましょう。
豆情報
imgタグ内に「width」と「height」を入れることで、画像サイズの幅や高さを設定できます。
mapタグの応用的な使い方
mapタグにid属性を付与する場合
mapタグに、name属性を加えてさらに、id属性も付与する場合には条件があります。
それは、
|
1 |
<map name="imagemap" id="imagemap"></map> |
のように、2つの属性に入れる文字列を同じにすることです。
上記のコードでは、「imagemap」が同じ文字列にあたります。
mapタグ内にイメージマップ以外のコンテンツも配置できる
実は、mapタグ内でイメージマップに使うareaタグ以外に、他のコンテンツも配置できます。
See the Pen
イメージマップにコンテンツ by 吉井大輝 (@DaiW)
on CodePen.
画像の図形をクリックしてリンク先に飛ぶ「イメージマップ」に加え、リストのテキストをクリックしてリンク先に飛ぶ以下の
|
1 2 3 4 |
<ul> <li><a href="#">桜</a></li> <li><a href="#">チューリップ</a></li> </ul> |
コンテンツを配置しています。
イメージマップによって、mapタグにコンテンツを入れると、サイトの利便性が向上します。
まとめ
いかがでしたか？
今回は、
・mapタグを使うのに必要なこと
についてご紹介していきました。
mapタグを使うイメージマップは、多くのサイトで利用されています。
イメージマップの知識を深めていくにつれ、手の込んだデザインを作る技術力にもつながります。
この記事から、イメージマップを作るための力になれれば幸いです。
参考文献：MDN web docs｜<map>: イメージマップ (クリック可能なリンク領域) を定義するための要素
