<map> タグ

<img> や <object> 要素で表示した画像の上にイメージマップ (クリック可能な領域)を作成することができます。

<area> 要素と組み合わせて使うことで、画像の上に「円形・四角形・多角形」のリンクを複数作成することができます。

属性
- name
使用例
対応ブラウザ

属性

全ての HTML に共通して使用できるグローバル属性はこちら

<map属性="値">

name

<map> 要素の name 属性の値と <img> や <object> 要素に指定した usemap 属性の値を一致させることで、画像とイメージマップを関連付けます。

id 属性も指定した場合は、両方の属性の値を同じにする必要があります。

以下のコードでは、name 属性と usemap 属性の値を同じ「mymap」にしています。

<map name="mymap">
    <area shape="circle" coords="50, 50, 10" href="https://sample.com">
</map>
<img usemap="#mymap" src="sample.png" alt="Image" width="100" height="100" />

使用例

イメージマップのデモ（実際にクリックすることができます）

<map name="sample">
    <area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
    <area shape="circle" coords="100, 214, 30" href="leaf.html" alt="葉っぱ">
    <area shape="poly" coords="50, 340, 75, 354, 75, 385, 50, 400, 25, 385, 25, 354" href="plant.html" alt="鉢植え">
</map>
<img usemap="#sample" src="image.jpg" alt="Image"/>

このコードの詳しい解説は「<map>と<area>要素を使ったイメージマップの作り方」をお読みください。

対応ブラウザ

HTML タグ一覧はこちら

独学は難しそうと感じたら

独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

無料体験があること
個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。（無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。）

個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????

1. TechAcademy（テックアカデミー）

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp（コードキャンプ）

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら