WEBVTT

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

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

3
00:00:03.893 --> 00:00:08.063
エイチティーエムエルタグ編の七十七本目は、フッタータグです。

4
00:00:08.063 --> 00:00:15.988
フッターは、ページや記事の末尾に置いて、著作権表示や関連リンク、連絡先といった締めくくりの情報をまとめる要素です。

5
00:00:15.988 --> 00:00:19.880
多くのサイトで一番下に見かける、あの部分がフッターです。

6
00:00:19.880 --> 00:00:25.858
今回は、このフッターの役割と置き場所、入れる内容の考え方を順番に確認していきましょう。

7
00:00:25.858 --> 00:00:32.531
本文を読み終えた読者が、最後に確認する案内所のような場所だとイメージすると分かりやすくなります。

8
00:00:32.531 --> 00:00:38.092
地味に見えますが、ページ全体の信頼感や使いやすさを支える、大切な要素の一つです。

9
00:00:38.092 --> 00:00:40.099
基本の書き方を確認します。

10
00:00:40.099 --> 00:00:46.274
フッターは開始タグと終了タグを両方書き、その間に末尾にふさわしい情報を置きます。

11
00:00:46.274 --> 00:00:51.832
画面の例では、短い説明の段落と、著作権表示をフッターの中に並べています。

12
00:00:51.832 --> 00:00:57.390
この教材では、開始タグと終了タグを省略せず、明示する書き方で統一します。

13
00:00:57.390 --> 00:01:00.941
置き場所は、ボディや記事のまとまりの最後です。

14
00:01:00.941 --> 00:01:06.035
ただし、単に最後にある段落をすべてフッターにする必要はありません。

15
00:01:06.035 --> 00:01:11.284
あくまで、そのまとまりを締めくくる補助情報かどうかで判断しましょう。

16
00:01:11.284 --> 00:01:15.298
まずはこの基本形を正確に書けることが土台になります。

17
00:01:15.298 --> 00:01:22.400
タグの対応関係を目で追う確認は、表示崩れを防ぐ一番の近道ですので、面倒がらずに行いましょう。

18
00:01:22.400 --> 00:01:26.435
フッターには、大きく分けて二つの置き場所があります。

19
00:01:26.435 --> 00:01:32.022
一つ目はボディの末尾に置く、ページ全体、サイト全体のためのフッターです。

20
00:01:32.022 --> 00:01:37.453
著作権表示や運営者情報など、どのページでも共通する内容が向いています。

21
00:01:37.453 --> 00:01:42.730
二つ目は、アーティクルの中に置く、その記事だけのためのフッターです。

22
00:01:42.730 --> 00:01:46.920
投稿日や著者、記事に関連するリンクなどを置く場面です。

23
00:01:46.920 --> 00:01:53.128
ポイントは、フッターが一番近くにあるまとまりの末尾情報になる、という考え方です。

24
00:01:53.128 --> 00:02:00.732
どちらのフッターなのかを意識して置くと、文書の構造が読み手にもプログラムにも伝わりやすくなります。

25
00:02:00.732 --> 00:02:01.925
属性を確認します。

26
00:02:01.925 --> 00:02:05.238
フッターには、この要素専用の必須属性はありません。

27
00:02:05.238 --> 00:02:11.201
必要に応じて、アイディーやクラス、ラングといった、多くの要素で使える共通属性を利用します。

28
00:02:11.201 --> 00:02:17.563
アイディーは文書の中で一つだけの識別子で、ページ内リンクやジャバスクリプトからの参照に使います。

29
00:02:17.563 --> 00:02:22.599
クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。

30
00:02:22.599 --> 00:02:28.430
データ属性でアプリ独自の値を保持することもできますが、秘密情報を置く場所ではありません。

31
00:02:28.430 --> 00:02:34.128
子要素に付ける属性と混同しないように注意し、付ける理由を説明できる範囲で使いましょう。

32
00:02:34.128 --> 00:02:37.640
属性の意味が分からないまま付け足すのではなく、必要なものだけを選ぶ姿勢が、

33
00:02:37.640 --> 00:02:41.152
読みやすいコードにつながります。

34
00:02:41.152 --> 00:02:43.822
記事の活用事例を読み解きます。

35
00:02:43.822 --> 00:02:49.518
例は、ページの末尾に補助情報をまとめた、シンプルなフッターです。

36
00:02:49.518 --> 00:02:56.816
段落の中にホームへ戻るリンクを置き、その下に、著作権表示をスモールで示しています。

37
00:02:56.816 --> 00:03:04.470
スモールは、免責や著作権のような付記を表す要素で、フッターと相性のよい組み合わせです。

38
00:03:04.470 --> 00:03:09.187
試すときは、練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、

39
00:03:09.187 --> 00:03:13.904
保存後に再読み込みしてください。

40
00:03:13.904 --> 00:03:20.668
開発者ツールのエレメンツで、意図した構造になっているかを確認すると安心です。

41
00:03:20.668 --> 00:03:25.652
小さい例ですが、フッターらしい内容がそろった基本形です。

42
00:03:25.652 --> 00:03:28.716
フッターの中に入れる内容の例を整理します。

43
00:03:28.716 --> 00:03:34.843
関連ページへのリンク集はナブでまとめると、そのまとまりが案内であることが伝わります。

44
00:03:34.843 --> 00:03:37.907
著者や組織への連絡先はアドレスで示します。

45
00:03:37.907 --> 00:03:42.721
ただし、単なる住所の表記をすべてアドレスで囲むわけではありません。

46
00:03:42.721 --> 00:03:46.514
著作権や免責などの細かな付記はスモールが担当します。

47
00:03:46.514 --> 00:03:50.016
このように、中の要素にもそれぞれ意味があります。

48
00:03:50.016 --> 00:03:55.851
フッターは入れ物、中の要素は内容の担当、と分けて考えると組み立てやすくなります。

49
00:03:55.851 --> 00:04:01.395
何でも詰め込むのではなく、末尾で読者の役に立つ情報だけを選ぶことが大切です。

50
00:04:01.395 --> 00:04:08.544
迷ったときは、読み手がページの最後に知りたい情報かどうかを考えると、入れるべき内容が見えてきます。

51
00:04:08.544 --> 00:04:11.276
関連する要素との関係を整理します。

52
00:04:11.276 --> 00:04:17.222
ヘッダーはページや記事の導入部分で、ロゴやタイトル、案内などをまとめます。

53
00:04:17.222 --> 00:04:21.239
メインは、そのページの中心となる内容そのものです。

54
00:04:21.239 --> 00:04:25.257
そしてフッターは、末尾の締めくくり情報を担います。

55
00:04:25.257 --> 00:04:32.006
導入、中心、締めくくりという流れでページを組み立てると、文書の構造が自然に整います。

56
00:04:32.006 --> 00:04:38.273
セクションやアーティクルの中にも、それぞれ小さなヘッダーやフッターを置けます。

57
00:04:38.273 --> 00:04:43.576
大切なのは、見た目の位置ではなく、内容の役割で要素を選ぶことです。

58
00:04:43.576 --> 00:04:48.076
役割分担が分かると、ほかの構造要素も選びやすくなります。

59
00:04:48.076 --> 00:04:51.402
見た目との関係で、よくある誤解を解いておきます。

60
00:04:51.402 --> 00:04:57.361
フッターを置いただけでは、画面の下端にずっと固定される、といった効果は一切ありません。

61
00:04:57.361 --> 00:05:03.874
フッターはあくまで意味を表す要素で、通常は本文の流れに沿って、内容の最後に表示されるだけです。

62
00:05:03.874 --> 00:05:08.308
背景色や文字色、余白といった見た目は、シーエスエスで指定します。

63
00:05:08.308 --> 00:05:15.098
画面下への固定表示が本当に必要な場合は、ポジションなどのシーエスエスを別途検討することになります。

64
00:05:15.098 --> 00:05:18.701
意味を持つタグの選択と、見た目の指定は分けて考える。

65
00:05:18.701 --> 00:05:22.304
この原則は、ほかの要素でも共通する大切な考え方です。

66
00:05:22.304 --> 00:05:24.496
ブラウザー互換性を確認します。

67
00:05:24.496 --> 00:05:31.147
記事が参照するエムディーエヌのデータでは、フッター要素は、クロームが五以降、

68
00:05:31.147 --> 00:05:37.797
エッジが十二以降、ファイアフォックスが四以降、サファリが五以降と、主要ブラウザーで古くから対応しています。

69
00:05:37.797 --> 00:05:42.912
基本的な使い方であれば、対応を心配せず安心して使える要素だといえます。

70
00:05:42.912 --> 00:05:46.274
ただし、この表は要素本体の対応開始の目安です。

71
00:05:46.274 --> 00:05:54.167
新しい属性や機能を組み合わせる場合は、本体とは別に対応状況を確認し、利用対象の実機でも試しておくと安心です。

72
00:05:54.167 --> 00:05:59.282
モバイル環境は実装条件が異なる場合もあるため、あわせて確認しましょう。

73
00:05:59.282 --> 00:06:06.444
対応表はあくまで目安ですので、公開前には自分が対象とする環境で実際に開いて確かめることが確実です。

74
00:06:06.444 --> 00:06:08.929
よくある間違いを三つ紹介します。

75
00:06:08.929 --> 00:06:15.453
一つ目は、単に最後にあるという理由だけで、段落すべてをフッターにしてしまうことです。

76
00:06:15.453 --> 00:06:20.423
フッターは位置ではなく、締めくくりの補助情報かどうかで選びます。

77
00:06:20.423 --> 00:06:25.083
二つ目は、フッターにすれば画面下へ固定されると思うことです。

78
00:06:25.083 --> 00:06:28.811
先ほど触れたとおり、そのような効果はありません。

79
00:06:28.811 --> 00:06:33.937
三つ目は、本文の中心となる内容までフッターに入れてしまうことです。

80
00:06:33.937 --> 00:06:40.150
中心の内容はメインやアーティクルに置き、フッターには末尾情報だけを収めましょう。

81
00:06:40.150 --> 00:06:46.984
迷ったら、その情報が読み終わったあとの案内かどうかを基準に判断すると選びやすくなります。

82
00:06:46.984 --> 00:06:49.263
最後にまとめとチェックです。

83
00:06:49.263 --> 00:06:57.238
フッターは、ページや記事の末尾に、著作権や関連情報といった締めくくりの補助情報をまとめる要素です。

84
00:06:57.238 --> 00:07:03.749
ページ全体にも記事ごとにも使え、専用属性はなく、共通属性を必要に応じて使います。

85
00:07:03.749 --> 00:07:10.910
公開前には、目的に合った内容か、中心の本文まで入れていないか、リンクがタブやエンターなど標準の操作で使えるか、

86
00:07:10.910 --> 00:07:18.072
三百二十ピクセル程度の狭い画面でも欠けていないかを確認しましょう。

87
00:07:18.072 --> 00:07:24.257
自分のページの末尾がまだ地の文だけなら、ぜひフッターで整理してみてください。

88
00:07:24.257 --> 00:07:25.722
お疲れさまでした。

89
00:07:25.722 --> 00:07:29.791
小さな要素ですが、ページの第一印象ならぬ、最後の印象を決める場所ですので、

90
00:07:29.791 --> 00:07:33.860
丁寧に整えておきましょう。