SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのaddressタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 6:51動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の百十一本目は、アドレス要素です。
  4. 0:08アドレスと聞くと、郵便物の宛先や住所そのものを思い浮かべるかもしれません。
  5. 0:13ところがエイチティーエムエルでのアドレスは少し違います。
  6. 0:17これは、ページや記事を書いた人、あるいは運営している組織へ連絡を取るための情報を示す要素です。
  7. 0:24メールアドレス、問い合わせページへのリンク、運営者名などがその中心です。
  8. 0:29今回は、置く場所で意味が変わる点、使ってはいけない場面、コード例、互換性、
  9. 0:33よくある間違いまで順番に確認します。
  10. 0:37アドレスを使う場面を考えます。
  11. 0:39たとえばブログ記事の末尾に、この記事についての問い合わせ先として、筆者名とメールへのリンクを置く場合です。
  12. 0:46あるいはサイト全体のフッターに、運営団体名と問い合わせフォームへのリンクを置く場合も当てはまります。
  13. 0:53大切なのは、その情報が、文書や記事の責任者へ連絡するためのものかどうかです。
  14. 0:59単に場所を示したいだけの地名や、イベントの開催場所、店舗の所在地を案内する文章は、
  15. 1:03それ自体ではアドレスの対象にはなりません。
  16. 1:07連絡先かどうかで判断する、という視点を持ってください。
  17. 1:11アドレスで一番面白く、一番大切なのが、置く場所で意味が変わる点です。
  18. 1:17アドレスをアーティクルの内側に置くと、その記事の著者や管理者への連絡先という意味になります。
  19. 1:24一方、ボディの直下、つまり特定の記事の中ではなくページ全体に対して置くと、
  20. 1:29文書全体、サイト全体の著者や運営者への連絡先になります。
  21. 1:34同じタグでも、最も近いまとまりが何かによって、誰への連絡先なのかが決まるのです。
  22. 1:40書き終えたら、アドレスがどのアーティクルの中にあるのか、外にあるのかを必ず確認しましょう。
  23. 1:48次に、使ってはいけない用途をはっきりさせます。
  24. 1:51記事が強調している通り、アドレスは単なる住所表記をすべて囲むためのタグではありません。
  25. 1:58たとえばセミナーの開催場所、旅行先のホテルの所在地、お店への行き方として書く住所は、
  26. 2:03文書の著者への連絡先ではありませんから、アドレスには入れません。
  27. 2:09そうした住所は、通常の段落であるピー要素などで書けば十分です。
  28. 2:14住所という言葉に引きずられて何でも囲んでしまうのが、このタグで最も多い誤解です。
  29. 2:20連絡先でない住所はアドレスにしない、この一線を覚えてください。
  30. 2:24基本の書き方を確認します。
  31. 2:26アドレスには開始タグと終了タグがあり、その間に連絡先の内容を書きます。
  32. 2:31内容としては、運営者名の文章、改行、メールへのリンクなどを組み合わせられます。
  33. 2:37よく使われるのが、メールアドレスへのリンクで、エイ要素のエイチレフにメイルトーと書く形です。
  34. 2:44一方で、アドレスの中に見出しやセクションといった大きなまとまりを入れることはできません。
  35. 2:51あくまで連絡先という小さな情報のまとまりとして書くのが基本です。
  36. 2:56見た目の調整はシーエスエスに任せ、意味はアドレスで伝えます。
  37. 3:00属性について整理します。
  38. 3:02アドレスには、この要素だけの専用の属性で必須となるものはありません。
  39. 3:08必要に応じて、アイディーやクラス、ラングといったグローバル属性、つまり多くの要素で共通して使える属性を利用します。
  40. 3:19注意したいのは混同です。
  41. 3:21メールへのリンクを作るエイチレフは、アドレス自体ではなく、その中に入れるエイ要素の属性です。
  42. 3:29また、シーエスエスで斜体に見える場合が多いのはブラウザーの標準スタイルによるもので、
  43. 3:33意味とは別です。
  44. 3:38斜体にしたいからアドレスを使う、といった見た目目的の選び方は避けましょう。
  45. 3:45記事の活用事例をもとにコードを読みます。
  46. 3:48この例では、アドレスの中に、運営であるまなびのアトリエという名前と、メールで問い合わせるというリンクが入っています。
  47. 3:57リンク先はメイルトーに続けてメールアドレスを書いた形で、押すとメールソフトが開く想定です。
  48. 4:05ここで使われているイグザンプルドットコムは説明用のドメインなので、実際に使うときは自分の連絡先に置き換えてください。
  49. 4:14このアドレスが記事の中に置かれていれば、その記事の管理者への連絡先として読まれます。
  50. 4:21シンプルですが、意味がはっきり伝わる良い形です。
  51. 4:25もう一つの典型例として、フッターでの使い方を見ます。
  52. 4:29ページ下部のフッターの中にアドレスを置き、運営者名と、お問い合わせページへのリンクをまとめています。
  53. 4:36このアドレスが特定のアーティクルの中ではなく、ページ全体に関わる場所にある場合は、
  54. 4:40サイト全体の運営者への連絡先という意味になります。
  55. 4:45メールアドレスをそのまま文字で公開したくない場合は、このように問い合わせフォームへの通常のリンクだけを置く方法も実用的です。
  56. 4:53どの範囲の連絡先なのかを考えて置き場所を選ぶことが、ここでもポイントです。
  57. 4:59見た目についても触れておきます。
  58. 5:01アドレスは、多くのブラウザーで初期状態では斜体で表示されます。
  59. 5:06これはブラウザーが用意した標準のスタイルで、アドレス要素の意味そのものではありません。
  60. 5:12読みにくいと感じる場合は、シーエスエスでフォントスタイルをノーマルに戻したり、
  61. 5:16行間を広げたりして構いません。
  62. 5:20逆に、文章を斜体にしたいだけの理由でアドレスを使うのは間違いです。
  63. 5:25意味を持つタグの選択と、見た目を整えるシーエスエスの指定は、別のものとして分けて考える習慣が大切です。
  64. 5:33ブラウザー互換性を確認します。
  65. 5:35記事が紹介するエムディーエヌのデータでは、アドレス要素本体は、クロームが一以降、
  66. 5:41エッジが十二以降、ファイアフォックスが一以降、サファリが一以降から対応しています。
  67. 5:47非常に古くからある基本要素なので、現在の主要ブラウザーであれば対応を心配する必要はほとんどありません。
  68. 5:55ただし、これは要素本体の対応です。
  69. 5:58新しい属性や機能を組み合わせる場合は別に確認が必要ですが、アドレス自体の使い方については、
  70. 6:03安心して使える要素のひとつと言えます。
  71. 6:07まとめとして、よくある間違いを三つ挙げます。
  72. 6:11一つ目は、住所という名前の印象で、開催場所や店舗の所在地までアドレスで囲んでしまうことです。
  73. 6:19二つ目は、置く場所と対象のずれです。
  74. 6:22記事の著者の連絡先のつもりが、アーティクルの外に置かれていて、サイト全体の連絡先として扱われてしまう場合があります。
  75. 6:32三つ目は、斜体にしたいだけの見た目目的で使うことです。
  76. 6:36アドレスは、ページや記事の著者、運営者への連絡先を示す要素です。
  77. 6:41連絡先かどうか、そしてどのまとまりへの連絡先なのか、この二点を確かめて使ってみてください。
  78. 6:49これで解説を終わります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

addressタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ページや記事の著者・組織への連絡先。単なる住所表記をすべて囲む用途ではありません。

解説記事・サンプルコードを読む：HTMLのaddressタグとは？属性・使い方・ブラウザー互換性と活用例 →