VIDEO LESSON

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

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

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

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の百十本目は、エリアタグです。
0:07通常のリンクは、画像全体や文章全体がクリックの対象になります。
0:11ところがエリアを使うと、一枚の画像の中の、円の部分だけ、四角の部分だけを、
0:14別々の行き先へのリンクにできます。
0:18この仕組みをイメージマップと呼びます。
0:20エリアは、その画像の中で、どの範囲を、どのページへのリンクにするかを決める部品です。
0:26今回は、マップとの組み合わせ、形と座標の指定、リンク先と代替テキスト、コード例、
0:30互換性、よくある間違いまで順番に確認します。
0:34エリアは、単独では動きません。
0:36画像を示すイメージ、マップ、そしてエリアの三つが一組です。
0:41まずイメージ要素にユーズマップ属性を書き、シャープに続けて、使いたいマップの名前を指定します。
0:49次に、その名前と同じネーム属性を持つマップ要素を用意し、その内側にエリアを置きます。
0:56ここで名前が一文字でもずれると、画像とマップが結び付かず、クリックしても何も起きません。
1:03領域を増やしたいときは、マップの中にエリアを並べます。
1:07画像一枚に対してマップ一つ、領域の数だけエリア、という関係を覚えてください。
1:14基本の書き方を確認します。
1:16エリアは空要素です。
1:18空要素とは、中に文章や子要素を持たない要素のことです。
1:22そのため終了タグは書きませんし、内側に本文を入れることもありません。
1:28必要な情報は、すべて属性で指定します。
1:31置く場所は、マップ要素の内側です。
1:34マップの外にエリアを書いても、どの画像の領域なのか分からず、リンクとして働きません。
1:41また、一つのエリアが担当するのは一つの領域と一つの移動先です。
1:46複数の場所をクリックできるようにしたい場合は、エリアを分け、それぞれに形と座標と移動先を書くのが基本形です。
1:55形を決めるのがシェイプ属性です。
1:58値には主に四種類あります。
2:00レクトはレクタングルの略で、四角形の領域を作ります。
2:04地図の左上の建物だけ、といった矩形の区切りに向いています。
2:10サークルは円形で、丸いボタンやアイコンの形に合わせられます。
2:15ポリは多角形で、頂点をいくつも指定して、斜めのある複雑な輪郭をなぞれます。
2:21デフォルトは、ほかの領域に当てはまらない残り全体を指します。
2:27形を選ぶ基準は見た目の派手さではなく、利用者が押したい対象の輪郭に一番近いかどうかです。
2:34対象とずれた形にすると、押せそうな場所で反応しないといった違和感が生まれます。
2:41座標を決めるのがコーズ属性です。
2:44原点は画像の左上で、右へ行くほど、また下へ行くほど数値が大きくなり、単位はピクセルです。
2:52形ごとに必要な数が違います。
2:55レクトでは、左、上、右、下の四つを指定します。
2:59サークルでは、中心の横位置、中心の縦位置、半径の三つです。
3:05記事の例の百、百、五十は、中心が左から百、上から百の位置にあり、半径が五十の円という意味です。
3:14ポリでは、頂点の横と縦を組にして、輪郭を一周する順に並べます。
3:19数や順番を間違えると、意図しない場所がリンクになるので、書き終えたら必ず実際にクリックして確かめましょう。
3:29リンクとしての中心が、エイチレフとオルトです。
3:33エイチレフには移動先のユーアールエルを書き、通常のリンクと同じように、相対パスやページ内の場所も指定できます。
3:40オルトには、その領域を押すとどこへ行くのかが分かる説明を書きます。
3:45画像が見えない環境や、読み上げソフトを使う利用者にとって、オルトはリンクの名前そのものです。
3:51たとえば画像、こちら、といった曖昧な言葉ではなく、エイチティーエムエル教室の教材のように、
3:55行き先の内容を具体的に伝えましょう。
4:00エイチレフを省いたエリアは移動しない領域として扱えるため、形だけ作ってリンクにしない使い方もできます。
4:07記事の活用事例をもとに、円形の例を読みます。
4:10イメージ要素では、横四百、高さ二百の画像を表示し、ユーズマップでルームズという名前のマップを指しています。
4:18マップの中のエリアは、シェイプがサークル、コーズが百、百、五十ですから、
4:24画像の左上から百ピクセルずつ進んだ点を中心とする、半径五十ピクセルの円がクリック範囲です。
4:31その円を押すと、エイチレフのページへ移動し、オルトがリンクの説明として伝わります。
4:37練習するときは、座標を少しずつ変えて、反応する範囲がどうずれるかを開発者ツールと実際のクリックで確認すると理解が深まります。
4:46一枚の画像に複数の領域を作る例も見ておきます。
4:50同じマップの中にエリアを二つ置き、左側はレクトの四角形でエー教室へ、右側はポリの多角形でビー教室へ移動するようにしています。
5:00このように、案内図やフロア図では、部屋や施設ごとに行き先を分けられます。
5:05注意したいのは重なりです。
5:07領域同士が重なった場合、先に書かれたエリアが優先して選ばれます。
5:12意図せず重ねないことと、やむを得ず重なる場合は順番を意識することが大切です。
5:18また、領域ごとにオルトを書き分け、どのリンクがどの場所に対応するのかを、
5:23見えない利用者にも同じように伝えましょう。
5:27そのほかの属性も簡単に押さえます。
5:30ターゲットは、リンク先を今のタブで開くか、新しいタブで開くかといった表示先を指定します。
5:37レルは、現在の文書と移動先との関係を示すもので、新しいタブで開くときに、
5:41ノーオープナーなどを検討します。
5:46ダウンロードは、移動先をページ表示ではなく、ファイルの保存として扱う指定ですが、
5:50条件によっては効かない場合があります。
5:55リファラーポリシーは、移動のときに送る参照元情報の方針です。
6:00共通属性であるアイディーやクラスも使えますが、属性は必要になってから足すもので、
6:05最初から全部付ける必要はありません。
6:09ブラウザー互換性を確認します。
6:12記事が紹介するエムディーエヌのデータでは、エリア要素本体は、クロームが一以降、
6:17エッジが十二以降、ファイアフォックスが一以降、サファリが一以降から対応しています。
6:23イメージマップは古くからある仕組みで、現在の主要ブラウザーであればまず問題なく使えます。
6:30シェイプ、コーズ、エイチレフ、オルト、ターゲットも同じく早い時期から対応しています。
6:36一方で、レルやダウンロード、リファラーポリシーといった属性は、対応が始まった時期が属性ごとに異なります。
6:43要素が使えることと、すべての属性が使えることは別なので、新しい属性を組み合わせるときは個別に確認してください。
6:51まとめとして、よくある間違いを三つ挙げます。
6:55一つ目は、ユーズマップとマップのネームの名前がずれていることです。
7:00シャープを含めて一字一句そろっているか確認しましょう。
7:05二つ目は、座標の数や順番の間違いと、オルトの付け忘れです。
7:09特に画像を差し替えたり、表示サイズを変えたりしたあとは、座標がずれるので再確認が必要です。
7:17三つ目は、領域を小さくしすぎることです。
7:20小さい丸だけが唯一の移動手段だと、スマートフォンでは押しにくく、キーボード操作の確認も欠かせません。
7:28画像の下に通常のテキストリンクも併記すると安心です。
7:33エリアは、マップの中で画像の一部分をリンクにする要素です。
7:37形、座標、行き先、説明の四点をそろえて使ってみてください。
7:42これで解説を終わります。

この動画で学べること

areaタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。map 内の領域と移動先。shape・coords と、リンクの説明となる alt を指定します。

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