HTML & CSS

最終更新日：
公開日：

リファレンス

HTML

エリア

area要素

map要素内におけるリンク領域を設定します。

サンプルコード

<map name="image_map">
	<area shape="rect" coords="100,100,200,200">
	<area shape="shape" coords="250,100,150">
	<area shape="default">
</map>
<img src="images/sampe.jpg" usemap="#image_map">

  • カテゴリー

    フローコンテンツ、フレージングコンテンツ

  • コンテンツモデル

    なし（空）

  • 使用ケース

    フレージングコンテンツが期待される場所。ただし、map要素を祖先として持つ必要があります。

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

alt

画像を使っている際に、表示できなかったときのための代替テキストです。

coords

イメージマップ内で生成されるシェイプの位置、大きさを指定します。shape属性の値によって、指定する内容が異なります。

  • shape=”circle”

    3つ（中心点のX座標、中心点のY座標、半径）

  • shape=”rect”

    4つ（左上のX座標、左上のY座標、右下のX座標、右下のY座標）

  • shape=”poly”

    6つ以上の偶数個の指定（X1、Y1、X2、Y2、X3、Y3）※6つ指定したら三角、8指定したら四角と指定する数に応じて角数が増えていきます。

  • shape=”default”

    指定不可

download

href属性で指定したリンク先がファイルのダウンロードの場合に、こちらの属性を指定します。この属性は論理属性です。

href

リンク先となるURLを指定します。

hreflang

リンク先の言語を指定します。例えばリンク先が英語で記述されたページであれば「en」、日本語だったら「ja」というように指定します。

rel

現在のページに対する、リンク先のページとの関係を指定します。半角スペースで区切り、複数の値を指定することもできます。原文はW3Cのこちらのページにまとまっています。

  • alternate

    現在のページの代替文書を参照するリンクである場合に指定。別途type属性と組み合わせて使用

  • author

    href属性で「mailto」や「tel」など、著者情報を指定する場合に使用

  • bookmark

    現在のページと関連性の近いページへリンクを貼る場合に使用

  • help

    ヘルプページへのリンクなど、閲覧者へヒントを提供するページへのリンクを設定する場合に使用

  • license

    利用規約などのライセンスに関するリンクを指定する場合に使用

  • nofollow

    リンク先のページが重要でないことを表します。外部サイトへのリンクに対して指定することで、SEO的には「リンク先と現在のページに重要な関係がない」と示すことになり、現在のドメインを集中して評価して欲しい時に指定する値です。rel属性において最も頻繁に使用される値です。

  • noreferrer

    ユーザがリンク先へ移動する際に、リファラを送信しないよう指定する場合に使用

  • prefetch

    リンク先のリソースを予めキャッシュして保持したい場合に使用

  • search

    検索関連のリンクである場合に使用

  • tag

    リンク先のタグを現在のページで用いる場合に使用

  • next

    リンク先のページが、現在のページの続きという関係の場合に指定

  • prev

    リンク先のページが、現在のページの前ページという連続した関係にある場合に指定

shape

イメージマップの中で作成するシェイプの形を指定します。

  • circle

    円形

  • rect

    長方形

  • poly

    多角形

  • default

    画像全体

target

リンク先となるURLを指定します。

  • _self

    href属性に指定したリンクを現在のブラウズ・コンテキストへ展開します。target属性が指定されていない場合は、初期値として自動的にこの値が設定されます。

  • _blank

    新しいブラウジングコンテキストへ展開します。
    タブブラウザであれば、新しいタブを開いて展開。

  • _parent

    現在の親ブラウズ・コンテキストへ展開します。親要素がない場合、_selfと同じ動作になります。

  • _top

    href属性にしたリンクをトップレベルのブラウズ・コンテキストで開きます。親要素がない場合、_selfと同じ動作になります。

type

リンク先のMIMEタイプを指定します。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

前のページへ 一覧に戻る 次のページへ