WEBVTT

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

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

3
00:00:03.891 --> 00:00:08.214
エイチティーエムエルタグ編の百十一本目は、アドレス要素です。

4
00:00:08.214 --> 00:00:13.546
アドレスと聞くと、郵便物の宛先や住所そのものを思い浮かべるかもしれません。

5
00:00:13.546 --> 00:00:17.581
ところがエイチティーエムエルでのアドレスは少し違います。

6
00:00:17.581 --> 00:00:24.354
これは、ページや記事を書いた人、あるいは運営している組織へ連絡を取るための情報を示す要素です。

7
00:00:24.354 --> 00:00:29.542
メールアドレス、問い合わせページへのリンク、運営者名などがその中心です。

8
00:00:29.542 --> 00:00:33.505
今回は、置く場所で意味が変わる点、使ってはいけない場面、コード例、互換性、

9
00:00:33.505 --> 00:00:37.468
よくある間違いまで順番に確認します。

10
00:00:37.468 --> 00:00:39.564
アドレスを使う場面を考えます。

11
00:00:39.564 --> 00:00:46.969
たとえばブログ記事の末尾に、この記事についての問い合わせ先として、筆者名とメールへのリンクを置く場合です。

12
00:00:46.969 --> 00:00:53.954
あるいはサイト全体のフッターに、運営団体名と問い合わせフォームへのリンクを置く場合も当てはまります。

13
00:00:53.954 --> 00:00:59.263
大切なのは、その情報が、文書や記事の責任者へ連絡するためのものかどうかです。

14
00:00:59.263 --> 00:01:03.595
単に場所を示したいだけの地名や、イベントの開催場所、店舗の所在地を案内する文章は、

15
00:01:03.595 --> 00:01:07.926
それ自体ではアドレスの対象にはなりません。

16
00:01:07.926 --> 00:01:11.698
連絡先かどうかで判断する、という視点を持ってください。

17
00:01:11.698 --> 00:01:17.077
アドレスで一番面白く、一番大切なのが、置く場所で意味が変わる点です。

18
00:01:17.077 --> 00:01:24.355
アドレスをアーティクルの内側に置くと、その記事の著者や管理者への連絡先という意味になります。

19
00:01:24.355 --> 00:01:29.496
一方、ボディの直下、つまり特定の記事の中ではなくページ全体に対して置くと、

20
00:01:29.496 --> 00:01:34.638
文書全体、サイト全体の著者や運営者への連絡先になります。

21
00:01:34.638 --> 00:01:40.967
同じタグでも、最も近いまとまりが何かによって、誰への連絡先なのかが決まるのです。

22
00:01:40.967 --> 00:01:48.086
書き終えたら、アドレスがどのアーティクルの中にあるのか、外にあるのかを必ず確認しましょう。

23
00:01:48.086 --> 00:01:51.574
次に、使ってはいけない用途をはっきりさせます。

24
00:01:51.574 --> 00:01:58.095
記事が強調している通り、アドレスは単なる住所表記をすべて囲むためのタグではありません。

25
00:01:58.095 --> 00:02:03.706
たとえばセミナーの開催場所、旅行先のホテルの所在地、お店への行き方として書く住所は、

26
00:02:03.706 --> 00:02:09.317
文書の著者への連絡先ではありませんから、アドレスには入れません。

27
00:02:09.317 --> 00:02:14.019
そうした住所は、通常の段落であるピー要素などで書けば十分です。

28
00:02:14.019 --> 00:02:20.085
住所という言葉に引きずられて何でも囲んでしまうのが、このタグで最も多い誤解です。

29
00:02:20.085 --> 00:02:24.786
連絡先でない住所はアドレスにしない、この一線を覚えてください。

30
00:02:24.786 --> 00:02:26.736
基本の書き方を確認します。

31
00:02:26.736 --> 00:02:31.988
アドレスには開始タグと終了タグがあり、その間に連絡先の内容を書きます。

32
00:02:31.988 --> 00:02:37.839
内容としては、運営者名の文章、改行、メールへのリンクなどを組み合わせられます。

33
00:02:37.839 --> 00:02:44.741
よく使われるのが、メールアドレスへのリンクで、エイ要素のエイチレフにメイルトーと書く形です。

34
00:02:44.741 --> 00:02:51.343
一方で、アドレスの中に見出しやセクションといった大きなまとまりを入れることはできません。

35
00:02:51.343 --> 00:02:56.144
あくまで連絡先という小さな情報のまとまりとして書くのが基本です。

36
00:02:56.144 --> 00:03:00.645
見た目の調整はシーエスエスに任せ、意味はアドレスで伝えます。

37
00:03:00.645 --> 00:03:02.796
属性について整理します。

38
00:03:02.796 --> 00:03:08.890
アドレスには、この要素だけの専用の属性で必須となるものはありません。

39
00:03:08.890 --> 00:03:19.107
必要に応じて、アイディーやクラス、ラングといったグローバル属性、つまり多くの要素で共通して使える属性を利用します。

40
00:03:19.107 --> 00:03:21.258
注意したいのは混同です。

41
00:03:21.258 --> 00:03:29.503
メールへのリンクを作るエイチレフは、アドレス自体ではなく、その中に入れるエイ要素の属性です。

42
00:03:29.503 --> 00:03:33.984
また、シーエスエスで斜体に見える場合が多いのはブラウザーの標準スタイルによるもので、

43
00:03:33.984 --> 00:03:38.465
意味とは別です。

44
00:03:38.465 --> 00:03:45.097
斜体にしたいからアドレスを使う、といった見た目目的の選び方は避けましょう。

45
00:03:45.097 --> 00:03:48.378
記事の活用事例をもとにコードを読みます。

46
00:03:48.378 --> 00:03:57.892
この例では、アドレスの中に、運営であるまなびのアトリエという名前と、メールで問い合わせるというリンクが入っています。

47
00:03:57.892 --> 00:04:05.274
リンク先はメイルトーに続けてメールアドレスを書いた形で、押すとメールソフトが開く想定です。

48
00:04:05.274 --> 00:04:14.788
ここで使われているイグザンプルドットコムは説明用のドメインなので、実際に使うときは自分の連絡先に置き換えてください。

49
00:04:14.788 --> 00:04:21.678
このアドレスが記事の中に置かれていれば、その記事の管理者への連絡先として読まれます。

50
00:04:21.678 --> 00:04:25.615
シンプルですが、意味がはっきり伝わる良い形です。

51
00:04:25.615 --> 00:04:29.217
もう一つの典型例として、フッターでの使い方を見ます。

52
00:04:29.217 --> 00:04:36.144
ページ下部のフッターの中にアドレスを置き、運営者名と、お問い合わせページへのリンクをまとめています。

53
00:04:36.144 --> 00:04:40.716
このアドレスが特定のアーティクルの中ではなく、ページ全体に関わる場所にある場合は、

54
00:04:40.716 --> 00:04:45.288
サイト全体の運営者への連絡先という意味になります。

55
00:04:45.288 --> 00:04:53.877
メールアドレスをそのまま文字で公開したくない場合は、このように問い合わせフォームへの通常のリンクだけを置く方法も実用的です。

56
00:04:53.877 --> 00:04:59.003
どの範囲の連絡先なのかを考えて置き場所を選ぶことが、ここでもポイントです。

57
00:04:59.003 --> 00:05:01.418
見た目についても触れておきます。

58
00:05:01.418 --> 00:05:06.098
アドレスは、多くのブラウザーで初期状態では斜体で表示されます。

59
00:05:06.098 --> 00:05:12.590
これはブラウザーが用意した標準のスタイルで、アドレス要素の意味そのものではありません。

60
00:05:12.590 --> 00:05:16.666
読みにくいと感じる場合は、シーエスエスでフォントスタイルをノーマルに戻したり、

61
00:05:16.666 --> 00:05:20.742
行間を広げたりして構いません。

62
00:05:20.742 --> 00:05:25.724
逆に、文章を斜体にしたいだけの理由でアドレスを使うのは間違いです。

63
00:05:25.724 --> 00:05:33.423
意味を持つタグの選択と、見た目を整えるシーエスエスの指定は、別のものとして分けて考える習慣が大切です。

64
00:05:33.423 --> 00:05:35.687
ブラウザー互換性を確認します。

65
00:05:35.687 --> 00:05:41.801
記事が紹介するエムディーエヌのデータでは、アドレス要素本体は、クロームが一以降、

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

67
00:05:47.916 --> 00:05:55.615
非常に古くからある基本要素なので、現在の主要ブラウザーであれば対応を心配する必要はほとんどありません。

68
00:05:55.615 --> 00:05:58.181
ただし、これは要素本体の対応です。

69
00:05:58.181 --> 00:06:03.012
新しい属性や機能を組み合わせる場合は別に確認が必要ですが、アドレス自体の使い方については、

70
00:06:03.012 --> 00:06:07.843
安心して使える要素のひとつと言えます。

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

72
00:06:11.545 --> 00:06:19.284
一つ目は、住所という名前の印象で、開催場所や店舗の所在地までアドレスで囲んでしまうことです。

73
00:06:19.284 --> 00:06:22.313
二つ目は、置く場所と対象のずれです。

74
00:06:22.313 --> 00:06:32.071
記事の著者の連絡先のつもりが、アーティクルの外に置かれていて、サイト全体の連絡先として扱われてしまう場合があります。

75
00:06:32.071 --> 00:06:36.614
三つ目は、斜体にしたいだけの見た目目的で使うことです。

76
00:06:36.614 --> 00:06:41.998
アドレスは、ページや記事の著者、運営者への連絡先を示す要素です。

77
00:06:41.998 --> 00:06:49.570
連絡先かどうか、そしてどのまとまりへの連絡先なのか、この二点を確かめて使ってみてください。

78
00:06:49.570 --> 00:06:51.589
これで解説を終わります。