WEBVTT

1
00:00:00.000 --> 00:00:00.777
こんにちは。

2
00:00:00.777 --> 00:00:03.497
エイチティーエムエルリファレンス解説です。

3
00:00:03.497 --> 00:00:07.123
エイチティーエムエルタグ編の百十本目は、エリアタグです。

4
00:00:07.123 --> 00:00:11.137
通常のリンクは、画像全体や文章全体がクリックの対象になります。

5
00:00:11.137 --> 00:00:14.634
ところがエリアを使うと、一枚の画像の中の、円の部分だけ、四角の部分だけを、

6
00:00:14.634 --> 00:00:18.131
別々の行き先へのリンクにできます。

7
00:00:18.131 --> 00:00:20.591
この仕組みをイメージマップと呼びます。

8
00:00:20.591 --> 00:00:26.031
エリアは、その画像の中で、どの範囲を、どのページへのリンクにするかを決める部品です。

9
00:00:26.031 --> 00:00:30.045
今回は、マップとの組み合わせ、形と座標の指定、リンク先と代替テキスト、コード例、

10
00:00:30.045 --> 00:00:34.060
互換性、よくある間違いまで順番に確認します。

11
00:00:34.060 --> 00:00:36.548
エリアは、単独では動きません。

12
00:00:36.548 --> 00:00:41.357
画像を示すイメージ、マップ、そしてエリアの三つが一組です。

13
00:00:41.357 --> 00:00:49.151
まずイメージ要素にユーズマップ属性を書き、シャープに続けて、使いたいマップの名前を指定します。

14
00:00:49.151 --> 00:00:56.116
次に、その名前と同じネーム属性を持つマップ要素を用意し、その内側にエリアを置きます。

15
00:00:56.116 --> 00:01:03.413
ここで名前が一文字でもずれると、画像とマップが結び付かず、クリックしても何も起きません。

16
00:01:03.413 --> 00:01:07.890
領域を増やしたいときは、マップの中にエリアを並べます。

17
00:01:07.890 --> 00:01:14.192
画像一枚に対してマップ一つ、領域の数だけエリア、という関係を覚えてください。

18
00:01:14.192 --> 00:01:16.356
基本の書き方を確認します。

19
00:01:16.356 --> 00:01:18.021
エリアは空要素です。

20
00:01:18.021 --> 00:01:22.515
空要素とは、中に文章や子要素を持たない要素のことです。

21
00:01:22.515 --> 00:01:28.175
そのため終了タグは書きませんし、内側に本文を入れることもありません。

22
00:01:28.175 --> 00:01:31.338
必要な情報は、すべて属性で指定します。

23
00:01:31.338 --> 00:01:34.167
置く場所は、マップ要素の内側です。

24
00:01:34.167 --> 00:01:41.159
マップの外にエリアを書いても、どの画像の領域なのか分からず、リンクとして働きません。

25
00:01:41.159 --> 00:01:46.319
また、一つのエリアが担当するのは一つの領域と一つの移動先です。

26
00:01:46.319 --> 00:01:55.308
複数の場所をクリックできるようにしたい場合は、エリアを分け、それぞれに形と座標と移動先を書くのが基本形です。

27
00:01:55.308 --> 00:01:58.110
形を決めるのがシェイプ属性です。

28
00:01:58.110 --> 00:02:00.386
値には主に四種類あります。

29
00:02:00.386 --> 00:02:04.939
レクトはレクタングルの略で、四角形の領域を作ります。

30
00:02:04.939 --> 00:02:10.017
地図の左上の建物だけ、といった矩形の区切りに向いています。

31
00:02:10.017 --> 00:02:15.270
サークルは円形で、丸いボタンやアイコンの形に合わせられます。

32
00:02:15.270 --> 00:02:21.749
ポリは多角形で、頂点をいくつも指定して、斜めのある複雑な輪郭をなぞれます。

33
00:02:21.749 --> 00:02:27.002
デフォルトは、ほかの領域に当てはまらない残り全体を指します。

34
00:02:27.002 --> 00:02:34.707
形を選ぶ基準は見た目の派手さではなく、利用者が押したい対象の輪郭に一番近いかどうかです。

35
00:02:34.707 --> 00:02:41.536
対象とずれた形にすると、押せそうな場所で反応しないといった違和感が生まれます。

36
00:02:41.536 --> 00:02:44.548
座標を決めるのがコーズ属性です。

37
00:02:44.548 --> 00:02:52.833
原点は画像の左上で、右へ行くほど、また下へ行くほど数値が大きくなり、単位はピクセルです。

38
00:02:52.833 --> 00:02:55.469
形ごとに必要な数が違います。

39
00:02:55.469 --> 00:02:59.799
レクトでは、左、上、右、下の四つを指定します。

40
00:02:59.799 --> 00:03:05.259
サークルでは、中心の横位置、中心の縦位置、半径の三つです。

41
00:03:05.259 --> 00:03:14.108
記事の例の百、百、五十は、中心が左から百、上から百の位置にあり、半径が五十の円という意味です。

42
00:03:14.108 --> 00:03:19.945
ポリでは、頂点の横と縦を組にして、輪郭を一周する順に並べます。

43
00:03:19.945 --> 00:03:29.924
数や順番を間違えると、意図しない場所がリンクになるので、書き終えたら必ず実際にクリックして確かめましょう。

44
00:03:29.924 --> 00:03:33.100
リンクとしての中心が、エイチレフとオルトです。

45
00:03:33.100 --> 00:03:40.694
エイチレフには移動先のユーアールエルを書き、通常のリンクと同じように、相対パスやページ内の場所も指定できます。

46
00:03:40.694 --> 00:03:45.251
オルトには、その領域を押すとどこへ行くのかが分かる説明を書きます。

47
00:03:45.251 --> 00:03:51.603
画像が見えない環境や、読み上げソフトを使う利用者にとって、オルトはリンクの名前そのものです。

48
00:03:51.603 --> 00:03:55.952
たとえば画像、こちら、といった曖昧な言葉ではなく、エイチティーエムエル教室の教材のように、

49
00:03:55.952 --> 00:04:00.302
行き先の内容を具体的に伝えましょう。

50
00:04:00.302 --> 00:04:07.344
エイチレフを省いたエリアは移動しない領域として扱えるため、形だけ作ってリンクにしない使い方もできます。

51
00:04:07.344 --> 00:04:10.702
記事の活用事例をもとに、円形の例を読みます。

52
00:04:10.702 --> 00:04:18.791
イメージ要素では、横四百、高さ二百の画像を表示し、ユーズマップでルームズという名前のマップを指しています。

53
00:04:18.791 --> 00:04:24.973
マップの中のエリアは、シェイプがサークル、コーズが百、百、五十ですから、

54
00:04:24.973 --> 00:04:31.155
画像の左上から百ピクセルずつ進んだ点を中心とする、半径五十ピクセルの円がクリック範囲です。

55
00:04:31.155 --> 00:04:37.413
その円を押すと、エイチレフのページへ移動し、オルトがリンクの説明として伝わります。

56
00:04:37.413 --> 00:04:46.876
練習するときは、座標を少しずつ変えて、反応する範囲がどうずれるかを開発者ツールと実際のクリックで確認すると理解が深まります。

57
00:04:46.876 --> 00:04:50.484
一枚の画像に複数の領域を作る例も見ておきます。

58
00:04:50.484 --> 00:05:00.212
同じマップの中にエリアを二つ置き、左側はレクトの四角形でエー教室へ、右側はポリの多角形でビー教室へ移動するようにしています。

59
00:05:00.212 --> 00:05:05.860
このように、案内図やフロア図では、部屋や施設ごとに行き先を分けられます。

60
00:05:05.860 --> 00:05:07.899
注意したいのは重なりです。

61
00:05:07.899 --> 00:05:12.920
領域同士が重なった場合、先に書かれたエリアが優先して選ばれます。

62
00:05:12.920 --> 00:05:18.881
意図せず重ねないことと、やむを得ず重なる場合は順番を意識することが大切です。

63
00:05:18.881 --> 00:05:23.353
また、領域ごとにオルトを書き分け、どのリンクがどの場所に対応するのかを、

64
00:05:23.353 --> 00:05:27.824
見えない利用者にも同じように伝えましょう。

65
00:05:27.824 --> 00:05:30.574
そのほかの属性も簡単に押さえます。

66
00:05:30.574 --> 00:05:37.690
ターゲットは、リンク先を今のタブで開くか、新しいタブで開くかといった表示先を指定します。

67
00:05:37.690 --> 00:05:41.895
レルは、現在の文書と移動先との関係を示すもので、新しいタブで開くときに、

68
00:05:41.895 --> 00:05:46.100
ノーオープナーなどを検討します。

69
00:05:46.100 --> 00:05:50.872
ダウンロードは、移動先をページ表示ではなく、ファイルの保存として扱う指定ですが、

70
00:05:50.872 --> 00:05:55.643
条件によっては効かない場合があります。

71
00:05:55.643 --> 00:06:00.495
リファラーポリシーは、移動のときに送る参照元情報の方針です。

72
00:06:00.495 --> 00:06:05.186
共通属性であるアイディーやクラスも使えますが、属性は必要になってから足すもので、

73
00:06:05.186 --> 00:06:09.876
最初から全部付ける必要はありません。

74
00:06:09.876 --> 00:06:12.050
ブラウザー互換性を確認します。

75
00:06:12.050 --> 00:06:17.847
記事が紹介するエムディーエヌのデータでは、エリア要素本体は、クロームが一以降、

76
00:06:17.847 --> 00:06:23.644
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降から対応しています。

77
00:06:23.644 --> 00:06:30.021
イメージマップは古くからある仕組みで、現在の主要ブラウザーであればまず問題なく使えます。

78
00:06:30.021 --> 00:06:36.108
シェイプ、コーズ、エイチレフ、オルト、ターゲットも同じく早い時期から対応しています。

79
00:06:36.108 --> 00:06:43.645
一方で、レルやダウンロード、リファラーポリシーといった属性は、対応が始まった時期が属性ごとに異なります。

80
00:06:43.645 --> 00:06:51.616
要素が使えることと、すべての属性が使えることは別なので、新しい属性を組み合わせるときは個別に確認してください。

81
00:06:51.616 --> 00:06:55.235
まとめとして、よくある間違いを三つ挙げます。

82
00:06:55.235 --> 00:07:00.664
一つ目は、ユーズマップとマップのネームの名前がずれていることです。

83
00:07:00.664 --> 00:07:05.106
シャープを含めて一字一句そろっているか確認しましょう。

84
00:07:05.106 --> 00:07:09.877
二つ目は、座標の数や順番の間違いと、オルトの付け忘れです。

85
00:07:09.877 --> 00:07:17.279
特に画像を差し替えたり、表示サイズを変えたりしたあとは、座標がずれるので再確認が必要です。

86
00:07:17.279 --> 00:07:20.570
三つ目は、領域を小さくしすぎることです。

87
00:07:20.570 --> 00:07:28.795
小さい丸だけが唯一の移動手段だと、スマートフォンでは押しにくく、キーボード操作の確認も欠かせません。

88
00:07:28.795 --> 00:07:33.072
画像の下に通常のテキストリンクも併記すると安心です。

89
00:07:33.072 --> 00:07:37.843
エリアは、マップの中で画像の一部分をリンクにする要素です。

90
00:07:37.843 --> 00:07:42.614
形、座標、行き先、説明の四点をそろえて使ってみてください。

91
00:07:42.614 --> 00:07:44.588
これで解説を終わります。