webデザイン用語「areaタグ」を全部教えて！

こんにちは、ハナさん。WEBデザイン用語の一つである「areaタグ」についてお話ししましょう。 areaタグは、画像内に複数のリンクを配置することができるHTMLのタグです。例えば、地図画像内に都道府県ごとにリンクを張るなどができます。また、視覚障害を持つ方にも配慮したアクセシブルなウェブサイト作りに欠かせないタグでもあります。areaタグには、円形、長方形、ポリゴン形、デフォルトの四角形の4つの形状があり、それぞれ座標値を設定することでリンク範囲を指定することができます。追加情報として、areaタグは画像を使用する場合は、まず「img」タグで画像を表示させ、次にareaタグを使用する必要があります。このように、WEBデザインに欠かせないareaタグについて、少しでも理解できたでしょうか？

このブログは、webデザイナーになりたい女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。

Table of Contents

areaタグとは何か？

ハナ:リュウさん、こんにちは！

リュウ:こんにちは、ハナさん。何か質問があるんですか？

ハナ:はい！areaタグって何ですか？

リュウ:areaタグとは、HTMLで画像に付随するリンク範囲を定義するタグです。例えば、1つの画像に複数のリンクが付随する場合、areaタグを使ってそれぞれのリンク範囲を定義します。

ハナ:あー、なるほど！分かりました！

リュウ:良かったですね、ハナさん。もしわからないことがあれば、いつでも聞いてくださいね。

areaタグの使い方は？

ハナ：リュウさん、areaタグってどうやって使うんですか？

リュウ：ハナさん、areaタグは画像の上に置いて、クリックした時にリンク先に飛ばすことができるタグです。例えば、地図の画像にareaタグを使って、クリックするとその場所の情報を表示するページに飛ばすことができますよ。わかりましたか？

areaタグの属性にはどんなものがある？

ハナ：リュウさん、こんにちは！areaタグにはどんな属性があるんですか？

リュウ：こんにちは、ハナさん。areaタグには、主に「shape」属性と「coords」属性がありますよ。

ハナ：「shape」と「coords」って何ですか？

リュウ：「shape」は、画像内のリンク領域の形状を指定する属性です。「coords」は、その領域の座標を指定する属性です。例えば、円形のリンク領域を設定する場合、「shape」には「circle」、そして「coords」には「x座標,y座標,半径」というような形で指定します。

ハナ：なるほど！「circle」の座標って、中心と半径で指定するんですね！

リュウ：そうですね！他にも「rect」や「poly」といった形状を指定することができます。また、「href」属性を使って、クリックされたときに移動する先のURLを指定することもできますよ。

ハナ：わかりました！ありがとうございます、リュウさん！

areaタグのhref属性とは？

ハナ:リュウさん、areaタグのhref属性って何ですか？

リュウ:ほーん、それはね、画像マップを作る際に使う属性の一つだよ。例えば地図の画像を使って、クリックした場所によって別のページに飛ばしたい場合などに使うんだ。要するに、クリックした場所に対応したURL（ページのアドレス）を指定するためのものさ。

ハナ:なるほど！ありがとう、リュウさん！

リュウ:どういたしまして、ハナさん。なにか分からないことがあったらまた聞いてね！

areaタグのshape属性とは？

ハナ：リュウさん、こんにちは。areaタグのshape属性って何なんですか？

リュウ：ハナさん、おはようございます。areaタグのshape属性についてですね。それは、画像に対してどのような形状でリンク領域を作るかを指定する属性です。例えば、四角形だったり、円形だったり、多角形だったりと、いろいろな形が指定できますよ。イメージとしては、お友達が描いた色紙に沿ってお菓子を置く際に、どこのスペースに置けばいいかを指定するような感じですかね。分かりやすいでしょうか？

areaタグのcoords属性とは？

ハナ:リュウさん、お聞きしたいことがあります。areaタグのcoords属性って何ですか？

リュウ:へぇ、ハナさんはすごい興味を持っているんですね。それは、画像の特定の箇所をクリックしたときにその部分でどのようなアクションをするかを設定するために使われますよ。

ハナ:えっ、どういうことですか？

リュウ:例えば、地図の画像があって、東京と大阪にピンを立ててあるとします。ピンをクリックすると、そのエリアに関する情報が表示されるように設定することができます。

ハナ:なるほど、ピンをクリックしたときに何を表示するか設定するのですね。ありがとうございます！

リュウ:どういたしまして。分かりやすく説明できましたか？

ハナ:はい、分かりやすかったです！

areaタグのalt属性とは？

ハナ：リュウさん、こんにちは！areaタグのalt属性って何ですか？

リュウ：こんにちは、ハナさん。areaタグは、イメージマップを作る時に使うタグです。alt属性というのは、画像が表示できない時に代わりに表示されるテキストのことです。

ハナ：画像が表示できない時って、どういう事ですか？

リュウ：たとえば、ネットが繋がっていないとか、画像が削除されてしまった場合、画像が表示されなくなることがあります。その場合、代わりにalt属性で指定されたテキストが表示されるのです。

ハナ：なるほど！そういう事だったんですね。ありがとうございます、リュウさん！

areaタグのtarget属性とは？

ハナ：リュウさん、areaタグのtarget属性って何ですか？私、よく分からないんです。

リュウ：ハナさん、areaタグは画像マップを作るためのタグで、target属性はリンク先の表示方法を指定するものです。例えば、_selfと指定すると、リンク先を現在のウィンドウで開きます。_blankと指定すると、新しいウィンドウで開くことができますよ。

ハナ：そうなんですね。でも、画像マップって何ですか？

リュウ：画像マップは、1枚の画像内に複数のリンクを貼ることができるものです。例えば、1枚のワールドマップの画像に各国へのリンクを貼ることができるんです。

ハナ：なるほど、画像内にリンクがたくさんあるってことですね。勉強になりました。ありがとうございました、リュウさん！

リュウ：どういたしまして、いつでも質問してね、ハナさん。笑顔でがんばってくれるのが嬉しいですよ。

areaタグのdownload属性とは？

ハナ：リュウさん、こんにちは！areaタグのdownload属性って何ですか？

リュウ：ハナさん、おはようございます。areaタグのdownload属性ですね。これはリンクをクリックした際に、指定されたファイルをダウンロードするための属性です。

ハナ：なるほど！でも、ダウンロードするファイルって、どこに保存されるんですか？

リュウ：よく聞かれる質問ですね。ダウンロードされるファイルの保存先は、使用しているブラウザーによって異なります。大抵は「ダウンロード」フォルダーに保存されます。

ハナ：あ、そうなんですね！それから、download属性ってどんな場面で使われるんですか？

リュウ：例えば、PDFファイルや画像ファイル等、ユーザーにとって必要な情報が記載されたファイルをダウンロードさせたい場合に使用されます。もちろん、ダウンロードさせなくても直接表示することもできますが、表示に時間がかかったりする場合があります。そのため、ダウンロードしてから閲覧することが適切な場合があります。こんな感じでしょうか？

ハナ：はい、分かりやすいです！ありがとうございました！

areaタグのrel属性とは？

ハナ:リュウさん、areaタグのrel属性って何ですか？

リュウ:ハナさん、areaタグは画像の一部を指定してリンクを設定するためのタグです。rel属性はそのリンクの関係性や種類を指定する属性です。例えば、rel=”nofollow”とすることで、検索エンジンにリンクをクロールされないように設定できます。イメージで言うと、ハナさんが友達と道を歩いていて、友達が「この道を左に行くとおいしいお店があるよ」と教えてくれた時、友達との関係性を表した「友達が教えた」という感じですね。分かりましたか？

areaタグのhreflang属性とは？

ハナ：リュウさん、areaタグのhreflang属性とは何ですか？

リュウ：ふむふむ、それはね、言語ごとに表示するコンテンツを指定するための属性なんだよ。
例えば、日本語のウェブページと英語のウェブページがあるとき、それぞれのページにhreflang属性を指定することで、ユーザーが自分に合った言語のページを表示しやすくなるんだ。

ハナ：なるほど、そういうことなんですね！ありがとうございます、リュウさん！

リュウ：どういたしまして、ハナさん。また何かわからないことがあったら聞いてね。

areaタグのtype属性とは？

ハナ: リュウさん、こんにちは。質問があるんですけど、areaタグのtype属性って何ですか？

リュウ: あ、こんにちはハナさん。areaタグのtype属性ですね。それは、ホバーした際に反応する形状を決める属性です。例えば、円形や四角形などの形状を指定することができます。

ハナ: なるほど、形状を決める属性なんですね。ありがとうございます！

リュウ: どういたしまして。もし他に何か質問があればいつでも聞いてくださいね。それに答えるのは僕の役割ですから。

ハナ: わかりました。また何かあったら聞きますね！

areaタグを画像マップとして使う方法は？

ハナ:リュウさん、areaタグを画像マップとして使う方法はどうしたらいいですか？

リュウ:ふむふむ、面白いことに興味があるんだね。areaタグを使うことで、画像の特定の部分をクリックしたときにリンク先に飛べるようにできるんだ。たとえば、あなたが手描きした地図を載せたウェブページを作る場合、東京をクリックしたらその地域の情報が出てくるようにできるんだ。こんな感じでイメージできるかな？

ハナ:うん、わかったよ！でもどうやって実装するの？

リュウ:areaタグは、imgタグ内に書くんだ。そして、shape属性でクリック範囲の形を指定するんだよ。たとえば、円形の場合はcircle、矩形の場合はrect、多角形の場合はpolyを指定してね。そして、coords属性でクリック範囲の座標を指定するよ。これで、クリックしたら指定したリンク先に飛ぶようになるんだ。理解できたかな？

areaタグで特定の範囲をクリックできるようにする方法は？

ハナ：リュウさん、areaタグで特定の範囲をクリックできるようにする方法は？

リュウ：おっしゃる通り、areaタグを使うと指定した範囲をクリックできるようになりますよ。例えば、地図画像を表示するときに、各地域ごとにクリックできるようにしたい場合などに使われます。指定する範囲は、座標やシェイプを指定する方法があります。具体的な使い方については、後日教えてあげますね。

areaタグで画像マップを作るデメリットは？

ハナ:　リュウさん、areaタグで画像マップを作るデメリットは何ですか？

リュウ: ふむふむ、確かにareaタグは画像の一部分にリンクを設定できるために便利ですね。ただ、デメリットもあります。たとえば、画面サイズが変わると画像の位置や比率が変わってしまう可能性があることや、複数のリンクを設定する場合に面倒だということが挙げられます。また、SEO対策においても、alt属性などが正しく設定されないと検索エンジンに認識されにくくなるなどのリスクがあります。こんな感じで分かりましたか？

areaタグで画像マップを作るメリットは？

ハナ:リュウさん、areaタグで画像マップを作るメリットは何ですか？

リュウ:そうですね、areaタグは画像をクリックした際に、その範囲に応じて違うURLにジャンプすることができますよ。例えば、ある地図画像をクリックした場合、クリックした場所によって異なる場所の情報ページに遷移することができます。

ハナ:なるほど、それで画像内の特定の箇所をクリックする時に便利なんですね！

リュウ:はい、それに加えて、複数の範囲を指定できるため、マルチリンクとしても使うことができます。例えば、同じ画像内に複数のリンクを設定し、部分的に選択することで、複数のページへ同時にリンクすることができますよ。

areaタグを使ってリンクする際のSEO対策は？

ハナ:リュウさん、こんにちは。areaタグを使ってリンクする際のSEO対策はどうしたらいいですか？

リュウ:こんにちは、ハナさん。areaタグを使ってリンクする場合、alt属性をちゃんと設定することが大切です。例えば、マップ画像内の「お花見スポット」をリンクする場合、alt属性に「お花見スポット」と入力すると、画像を読み込めない検索エンジンでも「お花見スポット」というキーワードで認識されますよ。

ハナ:なるほど、alt属性を設定することが大事なんですね！ありがとうございます。

リュウ:どういたしまして、ハナさん。分かりやすかったですか？例え話で説明してしまいましたが。

ハナ:はい、分かりやすかったです！また何か分からないことがあったら教えてくださいね。

リュウ:ええ、どうぞお気軽にお問い合わせください。ハナさん、がんばってwebデザイナーになってくださいね！

areaタグを使ってリンクする際のアクセシビリティは？

ハナ：リュウさん、areaタグを使ってリンクする際のアクセシビリティはどうやって考えたらいいですか？

リュウ：それは素晴らしい質問だね、ハナさん。アクセシビリティを考慮したwebデザインは大切だよ。areaタグを使う場合、alt属性を使って説明をすることがポイントだね。例えば、「地図の場合、areaタグのalt属性に「東京駅周辺地図」と説明すると使いやすくなるよ」というようにね。理解できたかな？

areaタグを使ってリンクする際のセキュリティ対策は？

ハナ: セキュリティ対策ってなに？

リュウ: ねえ、ハナさん。まずはリンクを踏んだ時に、意図しないサイトに飛ばされてしまったり、個人情報が盗まれてしまったりしないようにするための方法だよ。具体的には、外部サイトへのリンクを開く前に確認することが大切だよ。

ハナ: 確認するってどういうこと？

リュウ: 例えば、areaタグを使ってリンクする場合、href属性には自社サイト以外のURLを指定しないようにすることや、rel属性に”noopener noreferrer”を設定することが大切だよ。これらはセキュリティ上の脅威を減らすための対策だよ。

ハナ: なるほど、そうしたら安心してリンクが貼れるんだね！ありがとうございます！

リュウ: いいね！ハナさん、素晴らしい進歩だよ！安心して、セキュリティ対策を考慮して、リンクを貼ってね！

areaタグのブロック化とは？

ハナ: リュウさん、こんにちは！areaタグのブロック化って何ですか？

リュウ: うーん、それはちょっと難しい話なんだけど、例えばお菓子の箱を見てみると、中にはたくさんのお菓子が入っているでしょう？でも、その箱を持って動かすことは難しいですよね。そこで、箱の中に仕切りを入れて、それぞれの仕切りでお菓子を分けてみたら、持ち運びやすくなると思います。それが、areaタグのブロック化ということになります。

ハナ: なるほど、仕切りを入れて区切ることで操作がしやすくなるってことですね。ありがとう、リュウさん！

神戸ホームページ制作プロ公式ブログ