WEBVTT

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

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

3
00:00:04.091 --> 00:00:08.620
エイチティーエムエルタグ編の六十八本目は、ヘッダー、タグです。

4
00:00:08.620 --> 00:00:13.002
このタグは、ページや記事の導入部分をまとめるための要素です。

5
00:00:13.002 --> 00:00:20.745
たとえば、サイトを開いたときに一番上に見える、ロゴ、サイト名、メニューといった並びを思い浮かべてください。

6
00:00:20.745 --> 00:00:26.443
それらを、これは導入のまとまりですよ、と意味づけて囲むのがヘッダーの役割です。

7
00:00:26.443 --> 00:00:32.579
文章を読む前の案内役であり、読み手が今どこにいるのかを最初に伝える場所でもあります。

8
00:00:32.579 --> 00:00:37.838
見た目を飾るためだけの箱ではない、という点を最初に押さえておきましょう。

9
00:00:37.838 --> 00:00:43.828
サイトの第一印象は、この導入部分で決まることが多いので、丁寧に作る価値があります。

10
00:00:43.828 --> 00:00:45.782
基本の書き方を確認します。

11
00:00:45.782 --> 00:00:50.891
ヘッダーは、開始タグと終了タグを両方書く、普通の入れ物型の要素です。

12
00:00:50.891 --> 00:00:55.850
書き方はシンプルで、導入として見せたい要素をそのまま中に入れます。

13
00:00:55.850 --> 00:01:01.862
画面の例では、サイト名をエイチワンで書き、その下に短い説明をピーで添えています。

14
00:01:01.862 --> 00:01:06.370
ロゴの画像やナビゲーションを一緒に入れることもよくあります。

15
00:01:06.370 --> 00:01:10.954
ポイントは、上に置いたからヘッダーなのではなく、導入という意味があるまとまりを囲んだときにヘッダーになる、

16
00:01:10.954 --> 00:01:15.537
ということです。

17
00:01:15.537 --> 00:01:18.242
まずはこの最小の形から覚えましょう。

18
00:01:18.242 --> 00:01:21.248
閉じタグの書き忘れにも注意してください。

19
00:01:21.248 --> 00:01:23.833
中に入れられるものを整理します。

20
00:01:23.833 --> 00:01:28.761
ヘッダーの中には、見出しやエイチグループ、ロゴの画像、サイト名、キャッチコピーなど、

21
00:01:28.761 --> 00:01:33.689
導入に関わる内容を幅広く入れられます。

22
00:01:33.689 --> 00:01:39.667
画面の例のように、主な案内へのナブを一緒に入れる書き方はとても一般的です。

23
00:01:39.667 --> 00:01:42.898
検索フォームを置くサイトも多くあります。

24
00:01:42.898 --> 00:01:48.877
反対に、本文の中心となる長い文章や、記事そのものはヘッダーには入れません。

25
00:01:48.877 --> 00:01:54.047
導入は導入、本文はメイン、と役割で分けると構造がすっきりします。

26
00:01:54.047 --> 00:02:00.348
何を入れるか迷ったら、それが読み始める前の案内かどうかで判断してみてください。

27
00:02:00.348 --> 00:02:05.012
ヘッダーの便利な点は、置く場所によって役割が切り替わることです。

28
00:02:05.012 --> 00:02:09.238
ボディの直下に置けば、サイト全体に共通する導入になります。

29
00:02:09.238 --> 00:02:13.901
一方で、アーティクルの中に置けば、その記事だけの導入になります。

30
00:02:13.901 --> 00:02:19.002
記事のヘッダーには、タイトル、日付、著者名などをまとめるのが定番です。

31
00:02:19.002 --> 00:02:24.394
そのため、ひとつのページの中にヘッダーが複数あっても間違いではありません。

32
00:02:24.394 --> 00:02:29.495
ページ全体の顔と、記事ごとの顔を、それぞれ分けて用意するイメージです。

33
00:02:29.495 --> 00:02:33.867
どの範囲の導入なのかを考えて置き場所を決めることが大切です。

34
00:02:33.867 --> 00:02:41.008
ブログのように記事が並ぶページでは、記事ごとに小さなヘッダーがあると考えると分かりやすいでしょう。

35
00:02:41.008 --> 00:02:45.013
初心者がつまずきやすい、ヘッドタグとの違いを整理します。

36
00:02:45.013 --> 00:02:48.161
名前はとても似ていますが、役割は正反対です。

37
00:02:48.161 --> 00:02:55.456
ヘッドは、タイトル要素やシーエスエスの読み込みなど、画面には直接表示されない設定情報を入れる場所です。

38
00:02:55.456 --> 00:03:01.321
一方、ヘッダーは画面に実際に見える導入部分をまとめる要素で、ボディの中に書きます。

39
00:03:01.321 --> 00:03:03.467
試しに読み比べてみてください。

40
00:03:03.467 --> 00:03:06.042
ヘッドはエイチ、イー、エー、ディー。

41
00:03:06.042 --> 00:03:08.903
ヘッダーはそこにイー、アールが付きます。

42
00:03:08.903 --> 00:03:13.195
この違いを意識するだけで、置き場所の間違いはぐっと減ります。

43
00:03:13.195 --> 00:03:16.628
迷ったら、画面に見えるかどうかで判断しましょう。

44
00:03:16.628 --> 00:03:18.414
属性について確認します。

45
00:03:18.414 --> 00:03:22.285
ヘッダーには、この要素だけの専用の属性はありません。

46
00:03:22.285 --> 00:03:26.304
覚えるべき必須の属性もないので、気楽に使えるタグです。

47
00:03:26.304 --> 00:03:30.324
必要に応じて、どの要素にも使える共通の属性を使います。

48
00:03:30.324 --> 00:03:37.023
たとえばクラスは、シーエスエスでサイト共通のヘッダーをまとめて整えるときの目印になります。

49
00:03:37.023 --> 00:03:41.191
アイディーはページの先頭へ戻るリンクの飛び先に使えます。

50
00:03:41.191 --> 00:03:45.062
ただし、属性を付けても要素の意味自体は変わりません。

51
00:03:45.062 --> 00:03:52.207
色を付けたい、横並びにしたい、といった見た目の調整は、属性ではなくシーエスエスで指定しましょう。

52
00:03:52.207 --> 00:03:57.120
データ属性に秘密情報を置かない点も、あわせて覚えておいてください。

53
00:03:57.120 --> 00:03:59.608
記事の活用事例を読み解きます。

54
00:03:59.608 --> 00:04:04.086
記事の例では、まなびのアトリエ、というサイト名のピーと、教材へのリンクを持つナブを、

55
00:04:04.086 --> 00:04:08.564
ヘッダーで囲んでいます。

56
00:04:08.564 --> 00:04:15.529
もしこの二つがバラバラに置かれていると、ただの段落とリンクの集まりにしか見えません。

57
00:04:15.529 --> 00:04:21.666
ヘッダーで囲むことで、これはサイト共通の導入です、とはっきり示せるのです。

58
00:04:21.666 --> 00:04:27.304
ナブに付けられた、アリアラベル、主な案内、という指定もポイントです。

59
00:04:27.304 --> 00:04:33.275
案内が複数あるページでも、どれが主な案内なのかを支援技術に伝えられます。

60
00:04:33.275 --> 00:04:43.060
試すときは練習用ファイルのボディに貼り付け、保存して再読み込みし、開発者ツールのエレメンツで入れ子を確認してください。

61
00:04:43.060 --> 00:04:45.887
使う場面を広げて考えてみましょう。

62
00:04:45.887 --> 00:04:53.369
最も代表的なのは、サイトの先頭で、ロゴ、サイト名、メインメニュー、検索をまとめる場面です。

63
00:04:53.369 --> 00:04:59.854
どのページを開いても同じヘッダーが現れることで、読み手は迷わずに移動できます。

64
00:04:59.854 --> 00:05:05.508
もうひとつは、記事の先頭で、タイトル、日付、著者をまとめる場面です。

65
00:05:05.508 --> 00:05:09.333
セクションの導入部分に応用することもできます。

66
00:05:09.333 --> 00:05:13.988
画面の例では、検索フォームをヘッダーの中に置いています。

67
00:05:13.988 --> 00:05:19.309
逆に、導入とは言えない内容まで何でも詰め込む場所ではありません。

68
00:05:19.309 --> 00:05:24.630
本文はメインに任せ、ヘッダーは案内に徹するのが上手な使い方です。

69
00:05:24.630 --> 00:05:31.448
導入が整っているサイトは、初めて訪れた人でも目的の情報へたどり着きやすくなります。

70
00:05:31.448 --> 00:05:33.821
見た目はシーエスエスで整えます。

71
00:05:33.821 --> 00:05:35.897
ここで大切な注意があります。

72
00:05:35.897 --> 00:05:40.347
ヘッダーを置いただけでは、画面の上に固定表示にはなりません。

73
00:05:40.347 --> 00:05:45.538
位置や余白、固定するかどうかは、すべてシーエスエスの指定で決まります。

74
00:05:45.538 --> 00:05:53.695
画面の例では、フレックスでロゴとメニューを左右に分け、ポジション、スティッキーで上端に留まるようにしています。

75
00:05:53.695 --> 00:06:00.073
スクロールしても付いてくるヘッダーが欲しいときは、このようにシーエスエスで明示します。

76
00:06:00.073 --> 00:06:02.001
役割分担はいつも同じです。

77
00:06:02.001 --> 00:06:08.823
導入であるという意味はエイチティーエムエルが持ち、並び方や色や動きはシーエスエスが持ちます。

78
00:06:08.823 --> 00:06:12.828
デザインを変えても構造に手を入れずに済むのが利点です。

79
00:06:12.828 --> 00:06:14.771
ブラウザー互換性を確認します。

80
00:06:14.771 --> 00:06:20.537
記事が参照するエムディーエヌのデータでは、ヘッダー要素は、クロームが五以降、

81
00:06:20.537 --> 00:06:26.302
エッジが十二以降、ファイアフォックスが四以降、サファリが五以降と、主要ブラウザーで長く対応しています。

82
00:06:26.302 --> 00:06:30.319
そのため、表示できない環境を心配する必要はほとんどありません。

83
00:06:30.319 --> 00:06:32.651
仕上げのチェックもしておきましょう。

84
00:06:32.651 --> 00:06:37.250
目的がサイト共通の導入をまとめることに合っているか、三百二十ピクセル程度の狭い画面や文字拡大でも、

85
00:06:37.250 --> 00:06:41.850
ロゴやメニューが欠けていないかを確認します。

86
00:06:41.850 --> 00:06:48.328
対応が広い分、このタグでは、使えるかどうかよりも、正しい意味で使えているかに集中できるのが利点です。

87
00:06:48.328 --> 00:06:51.195
最後に、よくある間違いとまとめです。

88
00:06:51.195 --> 00:06:53.107
間違いの代表は三つです。

89
00:06:53.107 --> 00:06:56.611
一つ目は、ヘッドとヘッダーを取り違えること。

90
00:06:56.611 --> 00:07:01.230
二つ目は、ヘッダーを置けば自動で上に固定されると思うこと。

91
00:07:01.230 --> 00:07:03.779
固定はシーエスエスの役割でした。

92
00:07:03.779 --> 00:07:09.035
三つ目は、意味を考えず、ただのレイアウト用の箱として使うことです。

93
00:07:09.035 --> 00:07:15.248
あわせて、ヘッダーの中にフッターや別のヘッダーを入れる入れ子は避けてください。

94
00:07:15.248 --> 00:07:16.203
まとめます。

95
00:07:16.203 --> 00:07:20.185
ヘッダーは、ページや記事の導入部分を示す要素です。

96
00:07:20.185 --> 00:07:25.442
ロゴ、タイトル、案内を意味で囲み、見た目はシーエスエスに任せます。

97
00:07:25.442 --> 00:07:30.698
練習として、自分のページの先頭部分をヘッダーで囲んでみてください。

98
00:07:30.698 --> 00:07:32.132
お疲れさまでした。