このページについて
このページではHTMLで使えるareaを使って画像にクリック可能な場所を与える方法の解説をしています。
areaタグ
areaは画像に対してクリック可能な領域を定義する機能を持っています。通常、画像は1枚の画像として扱われるのでどこをクリックしても1枚の画像には変わりありません。しかしmapタグとareaを使えば、画像の場所ごとに全く別のリンク先を与える事ができます。
areaは基本的にはmapタグと一緒に使います。というより、常にmapタグの下に入れて使います。書き方のサンプルは以下の通りです。
<img src="画像url">
<map name="マップ名">
<area shape="形" coords="座標" alt="代替えテキスト" href="リンク先URL">
</map>areaは終了タグが不要です。そして中にある属性でクリック可能な範囲と、リンク先を指定することになります。
areaタグで使える属性
areaで使える属性は結構数が多く、それぞれしっかりと設定する必要があります。
| alt | 画像が表示されなかった場合に表示する代替えテキスト |
|---|---|
| |
| coords | クリック可能な範囲を座標で指定する。 |
| |
| download | クリックしたらリンク先をダウンロードするように指定する。downloadのみでも可能だけど、ファイル名を指定することでダウンロード後のファイル名を指定可能。 |
| |
| href | リンク先のURLを指定 |
| |
| hreflang | リンク先の言語をブラウザに伝える |
| |
| media | リンク先のURLが最適化されるデバイスなどを指定 |
| |
| referrerpolicy | リファラをどのように扱うかを指定 |
| |
| rel | リンク先と現在のドキュメントの関係を指定 |
| |
| shape | クリック可能な範囲の形状を指定 |
| |
| target | リンク先をどのように開くかを指定 |
| |
| type | リンク先がどんな種類のドキュメントなのかを指定してブラウザに伝える |
|
それぞれの書き方に関してはそれぞれのページに詳しく書いています。ここでは簡単な使用例を書いていきます。
areaはグローバル属性とイベント属性のどちらにも対応しています。
areaタグの使用例
areaは座標や形状、リンク先の指定などいろいろとやる事が多いタグになります。それらを少しずつ解説していきます。
まず、imgタグで画像を表示します。imgタグにusemap属性を使い、使うmapタグのname属性と一致させておきます。そうしないとmapを使う事ができません。#を付与する必要があるので詳しくはusemap属性のページを参照してください。
そしてmapタグを使ってマップを作成します。name属性でimgタグに付与したusemap属性と同じ名前を使います。その後に、areaを使って座標やクリック可能な形状などを指定していきます。まずは形状を指定するshape属性から設定します。今回は二つとも四角形なので、rectを使います。
<area shape="rect">次に座標を指定するcoords属性を指定します。座標に関しては測定方法はいろいろとあると思いますが原始的な方法をやります。その前に「左上は0,0」なので、左上からスタートする場合は0,0を置いておけばOKです。
このcoords属性のrectでの座標指定はこのようになります。
<area shape="rect" coords="点Aの開始座標x,点Aの開始座標y,点Bの開始座標x,点Bの開始座標y>これ一体どう言うことかと言うと、簡単に言うと「点Aと点Bの2点をもとに四角形を作り、その範囲をクリック可能にする」というものです。そして点Aも点Bも、x軸(横方向)とy軸(縦方向)を指定する必要があります。つまり画像で書くとこんな感じになります。
上の画像で言うと点Aはxが10、yが5の地点にあります。左上が0,0なので、ここから5進んで10下に行ったことになります。つまり点Aの座標は10,5となります。
そして点Bの座標はxが15、yが20です。これも左上からどれだけ移動したかを示しているので、点Bの座標は15,20となります。
以上の指定方法をまとめると、この青い四角の範囲をクリック可能にするにはこのように書きます。
<area shape="rect" coords="10,5,15,20">円形や多角形の場合は少し複雑になるので割愛しますが、coords属性の解説で少し触れています。座標の指定が終わったら、次はクリックした時のリンク先を定義します。これはhref属性を使います。サイトのどこか別のページへのリンクを与えるならシンプルにこのように書きます。
<area shape="rect" coords="10,5,15,20" href="リンクURL">これでひとまずはOKなんですが、そもそも画像自体が表示されなかった場合の対策も兼ねてalt属性もしっかり与えておきましょう。
<area shape="rect" coords="10,5,15,20" href="リンクURL" alt="代替えテキスト">これでようやく1つ完成となります。画像中にクリックさせたい要素が複数ある場合、1つのmapタグ内に複数書いていくことになります。
まとめ
areaは画像の中にクリックさせるURLを範囲を限定して仕込む事ができます。シンプルに画像全体をリンクとして扱いたい場合はaタグとimgタグで出来ますが、1枚の画像に複数仕込む場合はareaタグとmapタグを使うことになります。
座標指定など複雑な要素が多いこのareaですが、どこかしらで出番があるかもしれませんね。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。