SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の七十七本目は、フッタータグです。
  4. 0:08フッターは、ページや記事の末尾に置いて、著作権表示や関連リンク、連絡先といった締めくくりの情報をまとめる要素です。
  5. 0:15多くのサイトで一番下に見かける、あの部分がフッターです。
  6. 0:19今回は、このフッターの役割と置き場所、入れる内容の考え方を順番に確認していきましょう。
  7. 0:25本文を読み終えた読者が、最後に確認する案内所のような場所だとイメージすると分かりやすくなります。
  8. 0:32地味に見えますが、ページ全体の信頼感や使いやすさを支える、大切な要素の一つです。
  9. 0:38基本の書き方を確認します。
  10. 0:40フッターは開始タグと終了タグを両方書き、その間に末尾にふさわしい情報を置きます。
  11. 0:46画面の例では、短い説明の段落と、著作権表示をフッターの中に並べています。
  12. 0:51この教材では、開始タグと終了タグを省略せず、明示する書き方で統一します。
  13. 0:57置き場所は、ボディや記事のまとまりの最後です。
  14. 1:00ただし、単に最後にある段落をすべてフッターにする必要はありません。
  15. 1:06あくまで、そのまとまりを締めくくる補助情報かどうかで判断しましょう。
  16. 1:11まずはこの基本形を正確に書けることが土台になります。
  17. 1:15タグの対応関係を目で追う確認は、表示崩れを防ぐ一番の近道ですので、面倒がらずに行いましょう。
  18. 1:22フッターには、大きく分けて二つの置き場所があります。
  19. 1:26一つ目はボディの末尾に置く、ページ全体、サイト全体のためのフッターです。
  20. 1:32著作権表示や運営者情報など、どのページでも共通する内容が向いています。
  21. 1:37二つ目は、アーティクルの中に置く、その記事だけのためのフッターです。
  22. 1:42投稿日や著者、記事に関連するリンクなどを置く場面です。
  23. 1:46ポイントは、フッターが一番近くにあるまとまりの末尾情報になる、という考え方です。
  24. 1:53どちらのフッターなのかを意識して置くと、文書の構造が読み手にもプログラムにも伝わりやすくなります。
  25. 2:00属性を確認します。
  26. 2:01フッターには、この要素専用の必須属性はありません。
  27. 2:05必要に応じて、アイディーやクラス、ラングといった、多くの要素で使える共通属性を利用します。
  28. 2:11アイディーは文書の中で一つだけの識別子で、ページ内リンクやジャバスクリプトからの参照に使います。
  29. 2:17クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。
  30. 2:22データ属性でアプリ独自の値を保持することもできますが、秘密情報を置く場所ではありません。
  31. 2:28子要素に付ける属性と混同しないように注意し、付ける理由を説明できる範囲で使いましょう。
  32. 2:34属性の意味が分からないまま付け足すのではなく、必要なものだけを選ぶ姿勢が、
  33. 2:37読みやすいコードにつながります。
  34. 2:41記事の活用事例を読み解きます。
  35. 2:43例は、ページの末尾に補助情報をまとめた、シンプルなフッターです。
  36. 2:49段落の中にホームへ戻るリンクを置き、その下に、著作権表示をスモールで示しています。
  37. 2:56スモールは、免責や著作権のような付記を表す要素で、フッターと相性のよい組み合わせです。
  38. 3:04試すときは、練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、
  39. 3:09保存後に再読み込みしてください。
  40. 3:13開発者ツールのエレメンツで、意図した構造になっているかを確認すると安心です。
  41. 3:20小さい例ですが、フッターらしい内容がそろった基本形です。
  42. 3:25フッターの中に入れる内容の例を整理します。
  43. 3:28関連ページへのリンク集はナブでまとめると、そのまとまりが案内であることが伝わります。
  44. 3:34著者や組織への連絡先はアドレスで示します。
  45. 3:37ただし、単なる住所の表記をすべてアドレスで囲むわけではありません。
  46. 3:42著作権や免責などの細かな付記はスモールが担当します。
  47. 3:46このように、中の要素にもそれぞれ意味があります。
  48. 3:50フッターは入れ物、中の要素は内容の担当、と分けて考えると組み立てやすくなります。
  49. 3:55何でも詰め込むのではなく、末尾で読者の役に立つ情報だけを選ぶことが大切です。
  50. 4:01迷ったときは、読み手がページの最後に知りたい情報かどうかを考えると、入れるべき内容が見えてきます。
  51. 4:08関連する要素との関係を整理します。
  52. 4:11ヘッダーはページや記事の導入部分で、ロゴやタイトル、案内などをまとめます。
  53. 4:17メインは、そのページの中心となる内容そのものです。
  54. 4:21そしてフッターは、末尾の締めくくり情報を担います。
  55. 4:25導入、中心、締めくくりという流れでページを組み立てると、文書の構造が自然に整います。
  56. 4:32セクションやアーティクルの中にも、それぞれ小さなヘッダーやフッターを置けます。
  57. 4:38大切なのは、見た目の位置ではなく、内容の役割で要素を選ぶことです。
  58. 4:43役割分担が分かると、ほかの構造要素も選びやすくなります。
  59. 4:48見た目との関係で、よくある誤解を解いておきます。
  60. 4:51フッターを置いただけでは、画面の下端にずっと固定される、といった効果は一切ありません。
  61. 4:57フッターはあくまで意味を表す要素で、通常は本文の流れに沿って、内容の最後に表示されるだけです。
  62. 5:03背景色や文字色、余白といった見た目は、シーエスエスで指定します。
  63. 5:08画面下への固定表示が本当に必要な場合は、ポジションなどのシーエスエスを別途検討することになります。
  64. 5:15意味を持つタグの選択と、見た目の指定は分けて考える。
  65. 5:18この原則は、ほかの要素でも共通する大切な考え方です。
  66. 5:22ブラウザー互換性を確認します。
  67. 5:24記事が参照するエムディーエヌのデータでは、フッター要素は、クロームが五以降、
  68. 5:31エッジが十二以降、ファイアフォックスが四以降、サファリが五以降と、主要ブラウザーで古くから対応しています。
  69. 5:37基本的な使い方であれば、対応を心配せず安心して使える要素だといえます。
  70. 5:42ただし、この表は要素本体の対応開始の目安です。
  71. 5:46新しい属性や機能を組み合わせる場合は、本体とは別に対応状況を確認し、利用対象の実機でも試しておくと安心です。
  72. 5:54モバイル環境は実装条件が異なる場合もあるため、あわせて確認しましょう。
  73. 5:59対応表はあくまで目安ですので、公開前には自分が対象とする環境で実際に開いて確かめることが確実です。
  74. 6:06よくある間違いを三つ紹介します。
  75. 6:08一つ目は、単に最後にあるという理由だけで、段落すべてをフッターにしてしまうことです。
  76. 6:15フッターは位置ではなく、締めくくりの補助情報かどうかで選びます。
  77. 6:20二つ目は、フッターにすれば画面下へ固定されると思うことです。
  78. 6:25先ほど触れたとおり、そのような効果はありません。
  79. 6:28三つ目は、本文の中心となる内容までフッターに入れてしまうことです。
  80. 6:33中心の内容はメインやアーティクルに置き、フッターには末尾情報だけを収めましょう。
  81. 6:40迷ったら、その情報が読み終わったあとの案内かどうかを基準に判断すると選びやすくなります。
  82. 6:46最後にまとめとチェックです。
  83. 6:49フッターは、ページや記事の末尾に、著作権や関連情報といった締めくくりの補助情報をまとめる要素です。
  84. 6:57ページ全体にも記事ごとにも使え、専用属性はなく、共通属性を必要に応じて使います。
  85. 7:03公開前には、目的に合った内容か、中心の本文まで入れていないか、リンクがタブやエンターなど標準の操作で使えるか、
  86. 7:10三百二十ピクセル程度の狭い画面でも欠けていないかを確認しましょう。
  87. 7:18自分のページの末尾がまだ地の文だけなら、ぜひフッターで整理してみてください。
  88. 7:24お疲れさまでした。
  89. 7:25小さな要素ですが、ページの第一印象ならぬ、最後の印象を決める場所ですので、
  90. 7:29丁寧に整えておきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

footerタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ページや記事の末尾に、著作権や関連情報を置きます。

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