フロントエンジニアによるカンニングペーパー。areaタグ。
スポンサーリンク
あなたはareaタグを使いこなせていますか？
正直なところ、私はareaタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『areaタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
areaタグとは
areaタグは、mapタグの中に配置し、
イメージマップのハイパーリンク領域を指定します。
1つの画像に複数のリンクを設定する、
クライアントサイドイメージマップを設定するためのタグです。
画像上の幾何学的な領域を、ハイパーリンクと関連付けすることができます。
areaタグの属性
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
alt
ハイパーリンクのテキストを指定します。
画像を表示しないブラウザーが、代わりに表示するテキスト文字列です。
代替テキストを表示しない場合に、
画像が提供する選択肢と同じものを、ユーザーに与えるような表現にすべきです。
また、alt属性は、href属性が使用されている場合のみ指定します。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル">
coords
ハイパーリンク領域の座標を指定します。
shape属性で "default" を指定している場合は、
画像全体がハイパーリンク領域となるため、coords属性は指定できません。
値の指定方法に関しては、文末の 参考文献・記事 をご確認ください。
例）
<area shape="circle" coords="130,136,60" href="sample.html" alt="サンプルファイル">
download
リンク先URLへの移動ではなく、
リンクされたファイルを、ダウンロードするようブラウザに示します。
download属性に値を指定することで、
ダウンロードする際のファイル名を指定することもできます。
例）
<area shape="circle" coords="130,136,60" href="sample.html" alt="サンプルファイル" download="sample-download.html">
href
href属性を指定する場合は、alt属性も指定しましょう。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル">
hreflang
現在表示しているページと、リンク先のページで言語が異なる時に、
リンク先のページが、どの国の言語向けに作られているかを指定します。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" hreflang="en">
media
リンク先の文書や読み込む外部リソースが、
PCやテレビ等の、どのメディア（デバイス）に適用するのかを指定します。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" media="print">
ping
href属性が指定された、リンクをクリックした際に、
値に指定したURLに、POSTメソッドのリクエスト（PING）を送信します。
リンクが何回クリックされたのか等の、
サイト分析（トラッキング）に利用されることが多いです。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" ping="sample.php">
rel
リンク先URLとの関係性を指定します。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" rel="author">
shape
ハイパーリンク領域の形状を指定します。
shape属性を省略した場合は、ハイパーリンク領域の形状は四角形となります。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<area shape="poly" coords="260,96,209,249,130,138" href="sample.html" alt="サンプルファイル">
target
リンク先をどのように開くのかを指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" target="_blank">
以上の属性以外にも、グローバル属性を指定することもできます。
mapタグとの組み合わせ
areaタグは、mapタグの中に配置します。
例）
<img src="画像のURL" usemap="#マップ名" alt="代替テキスト"> <map name="usemapのマップ名"> <area shape="形状" coords="座標" href="リンク先のURL" alt="代替テキスト"> </map>
詳しくは、以下のmapタグの記事にて解説しています。
<作成中>
まとめ
今回は『areaタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
参考文献・記事
