WEBVTT

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

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

3
00:00:03.868 --> 00:00:08.012
エイチティーエムエルタグ編の六十九本目は、ヘッド、タグです。

4
00:00:08.012 --> 00:00:12.156
このタグは、ページそのものについての情報をまとめる場所です。

5
00:00:12.156 --> 00:00:19.616
たとえば、ブラウザーのタブに表示されるタイトルや、文字コード、シーエスエスの読み込み先などがここに入ります。

6
00:00:19.616 --> 00:00:25.556
変わっているのは、ここに書いた内容のほとんどが、画面にはそのまま表示されないことです。

7
00:00:25.556 --> 00:00:32.463
見出しや文章といった、読み手に見せる内容はボディに入れ、ヘッドはそれを支える裏側の設定を担当します。

8
00:00:32.463 --> 00:00:36.607
この見えないけれど大切な役割を、今回しっかり押さえましょう。

9
00:00:36.607 --> 00:00:45.172
地味に見えるかもしれませんが、ページの土台を決める重要な部分なので、最初に全体像をつかんでおくことが上達への近道になります。

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

11
00:00:47.125 --> 00:00:51.633
ヘッドは、開始タグと終了タグを両方書く、入れ物型の要素です。

12
00:00:51.633 --> 00:00:57.943
置き場所は決まっていて、エイチティーエムエル要素の直下で、ボディよりも前に置きます。

13
00:00:57.943 --> 00:01:02.826
画面の例のように、ページ全体はエイチティーエムエルで囲み、その中にヘッドとボディを並べるのが、

14
00:01:02.826 --> 00:01:07.709
すべてのページに共通する骨組みです。

15
00:01:07.709 --> 00:01:12.517
この教材では、開始タグと終了タグを省略せず、きちんと明示します。

16
00:01:12.517 --> 00:01:15.823
まずはこの位置関係を覚えることが第一歩です。

17
00:01:15.823 --> 00:01:18.828
ヘッドの中身は次から順番に見ていきます。

18
00:01:18.828 --> 00:01:22.734
この骨組みは、どんなに大きなサイトでも変わりません。

19
00:01:22.734 --> 00:01:27.392
小さなページから、同じ形で書き始める習慣を付けておきましょう。

20
00:01:27.392 --> 00:01:30.168
ヘッドの中に入れられるものを整理します。

21
00:01:30.168 --> 00:01:31.278
代表は五つです。

22
00:01:31.278 --> 00:01:37.870
ページの名前を示すタイトル、文字コードや説明文を伝えるメタ、外部のシーエスエスやアイコンとの関係を示すリンク、

23
00:01:37.870 --> 00:01:44.462
ページ内にシーエスエスを書くスタイル、そしてスクリプトを読み込むスクリプトです。

24
00:01:44.462 --> 00:01:48.764
このほか、相対ユーアールエルの基準を示すベースなども置けます。

25
00:01:48.764 --> 00:01:54.871
共通点は、どれも本文そのものではなく、本文の表示や読み込みを助ける情報だということです。

26
00:01:54.871 --> 00:01:59.173
見出しや段落のような、画面に見せる要素はヘッドには入れません。

27
00:01:59.173 --> 00:02:02.920
つまりヘッドは、ページの名刺や説明書のような存在です。

28
00:02:02.920 --> 00:02:07.500
中身をひとつずつ理解すれば、読み込みの仕組みも自然と見えてきます。

29
00:02:07.500 --> 00:02:10.004
中でも重要なタイトルについて見ます。

30
00:02:10.004 --> 00:02:14.454
タイトル要素はヘッドの中に一つ置き、そのページの名前を書きます。

31
00:02:14.454 --> 00:02:20.157
この名前は、ブラウザーのタブや、検索結果の一覧、お気に入りの名前として使われます。

32
00:02:20.157 --> 00:02:24.051
つまり、ページを開く前に読み手が最初に目にする情報です。

33
00:02:24.051 --> 00:02:28.919
注意したいのは、本文の見出しであるエイチワンとは別物だということです。

34
00:02:28.919 --> 00:02:33.926
役割が近いので同じ文言になることも多いですが、置き場所も用途も違います。

35
00:02:33.926 --> 00:02:40.741
また、すべてのページに同じタイトルを複製するのは避け、ページごとに内容が伝わる名前を付けましょう。

36
00:02:40.741 --> 00:02:44.496
短くても、内容がひと目で分かる名前を目指してください。

37
00:02:44.496 --> 00:02:48.808
検索結果でほかのページと並んだときの違いが、ここで生まれます。

38
00:02:48.808 --> 00:02:50.164
次にメタタグです。

39
00:02:50.164 --> 00:02:55.586
メタは、属性を使ってさまざまな情報を伝える要素で、終了タグはありません。

40
00:02:55.586 --> 00:02:59.352
まず、キャラクターセットでユーティーエフ八を指定すると、文字コードが明確になり、

41
00:02:59.352 --> 00:03:03.118
文字化けを防げます。

42
00:03:03.118 --> 00:03:06.884
これはヘッドのなるべく早い位置に書くのが基本です。

43
00:03:06.884 --> 00:03:13.060
次に、ディスクリプションはページの短い説明で、検索結果に表示される候補になります。

44
00:03:13.060 --> 00:03:18.934
そしてビューポートは、スマートフォンで画面幅に合わせて表示するための土台です。

45
00:03:18.934 --> 00:03:24.658
この三つは、今のサイト作りではほぼ定番の組み合わせとして覚えておきましょう。

46
00:03:24.658 --> 00:03:31.286
特にビューポートを忘れると、スマートフォンで文字が極端に小さく表示されることがあります。

47
00:03:31.286 --> 00:03:34.148
公開前の確認項目に入れておきましょう。

48
00:03:34.148 --> 00:03:36.598
見た目の準備もヘッドの仕事です。

49
00:03:36.598 --> 00:03:41.346
リンク要素を使うと、外部のシーエスエスファイルや、タブに表示される小さなアイコンなど、

50
00:03:41.346 --> 00:03:46.093
ほかのリソースとの関係を宣言できます。

51
00:03:46.093 --> 00:03:51.606
ページ内の移動リンクを作るエー要素とは別物なので、混同しないでください。

52
00:03:51.606 --> 00:03:57.425
一方、スタイル要素は、そのページの中に直接シーエスエスを書くためのものです。

53
00:03:57.425 --> 00:04:05.848
ちょっとした試行には便利ですが、複数ページで共通する見た目は外部シーエスエスに分けた方が管理しやすくなります。

54
00:04:05.848 --> 00:04:11.361
読み込みの指定はヘッド、実際の文章や画像はボディ、と分けて考えましょう。

55
00:04:11.361 --> 00:04:16.109
なお、スクリプトの読み込みをヘッドに置く場合は、表示の速さへの影響にも目を向けると、

56
00:04:16.109 --> 00:04:20.856
より実践的な判断ができるようになります。

57
00:04:20.856 --> 00:04:23.211
記事の活用事例を読み解きます。

58
00:04:23.211 --> 00:04:31.216
例では、ヘッドの中に、文字コードを指定するメタ、ページ名のタイトル、そして説明文のメタが並んでいます。

59
00:04:31.216 --> 00:04:35.690
たった数行ですが、文字化けの防止、タブでの識別、検索結果での紹介という、

60
00:04:35.690 --> 00:04:40.164
ページの第一印象がこの中で決まっています。

61
00:04:40.164 --> 00:04:48.483
ポイントは、三つとも画面の本文には現れないのに、読み手がページへたどり着くまでの案内になっていることです。

62
00:04:48.483 --> 00:04:53.899
試すときは、練習用ファイルのヘッドにこの形を写し、保存して再読み込みし、

63
00:04:53.899 --> 00:04:59.314
タブの表示と、開発者ツールのエレメンツで入れ子を確認してください。

64
00:04:59.314 --> 00:05:01.669
例中の文章は説明用のものです。

65
00:05:01.669 --> 00:05:07.948
自分のページでは、実際の内容に合わせてタイトルと説明文を必ず書き換えてください。

66
00:05:07.948 --> 00:05:09.700
属性について確認します。

67
00:05:09.700 --> 00:05:13.351
ヘッドには、この要素だけの専用の属性はありません。

68
00:05:13.351 --> 00:05:17.001
覚えるべき必須の属性もないので、その点は気楽です。

69
00:05:17.001 --> 00:05:25.617
必要があれば、どの要素にも使える共通の属性を使えますが、実際の制作でヘッド自体に属性を付ける場面はほとんどありません。

70
00:05:25.617 --> 00:05:30.727
むしろ大切なのは、中に入るメタやリンクが持つ属性と混同しないことです。

71
00:05:30.727 --> 00:05:36.130
キャラクターセットやコンテンツといった属性は、あくまで子要素側の指定です。

72
00:05:36.130 --> 00:05:41.387
データ属性に秘密情報を置かない、という注意もあわせて覚えておきましょう。

73
00:05:41.387 --> 00:05:46.936
属性が少ない分、ヘッドで大切になるのは、中に入れる要素の選び方と書き方です。

74
00:05:46.936 --> 00:05:49.856
そちらに意識を向けるのが上達のコツです。

75
00:05:49.856 --> 00:05:53.834
初心者が最もつまずく、ヘッダーとの違いを整理します。

76
00:05:53.834 --> 00:05:57.659
名前はとても似ていますが、役割ははっきり違います。

77
00:05:57.659 --> 00:06:02.861
ヘッドは画面に表示されない設定情報の入れ物で、ボディの前に置きます。

78
00:06:02.861 --> 00:06:06.763
一方、ヘッダーはロゴやサイト名など、画面に実際に見える導入部分をまとめる要素で、

79
00:06:06.763 --> 00:06:10.664
ボディの中に書きます。

80
00:06:10.664 --> 00:06:14.949
綴りを読み比べると、ヘッドはエイチ、イー、エー、ディー。

81
00:06:14.949 --> 00:06:18.009
ヘッダーはそこにイー、アールが付きます。

82
00:06:18.009 --> 00:06:22.599
迷ったら、その情報が画面に見えるかどうかで判断してください。

83
00:06:22.599 --> 00:06:26.271
見えるものはボディ側、見えない設定はヘッドです。

84
00:06:26.271 --> 00:06:31.014
この区別がつくだけで、コードを読むときの迷いが大きく減ります。

85
00:06:31.014 --> 00:06:35.604
ファイルを編集する前に、まず場所を確認する癖を付けましょう。

86
00:06:35.604 --> 00:06:37.852
ブラウザー互換性を確認します。

87
00:06:37.852 --> 00:06:44.819
記事が参照するエムディーエヌのデータでは、ヘッド要素は、クロームが一以降、

88
00:06:44.819 --> 00:06:51.786
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、主要ブラウザーで非常に古くから対応しています。

89
00:06:51.786 --> 00:06:56.731
そのため、ヘッド自体が使えない環境を心配する必要はまずありません。

90
00:06:56.731 --> 00:07:03.173
ただし、中に入れる新しい要素や属性は話が別で、それぞれ対応状況を確認するのが安全です。

91
00:07:03.173 --> 00:07:11.714
仕上げに、タイトルや説明文がページの目的に合っているか、狭い画面でも表示が崩れていないかもあわせて点検しましょう。

92
00:07:11.714 --> 00:07:18.007
新しい指定を入れるときほど、対象のブラウザーで実際に開いて確かめる習慣が役立ちます。

93
00:07:18.007 --> 00:07:20.704
記録と実機確認を組み合わせましょう。

94
00:07:20.704 --> 00:07:23.663
最後に、よくある間違いとまとめです。

95
00:07:23.663 --> 00:07:25.636
間違いの代表は三つです。

96
00:07:25.636 --> 00:07:31.554
一つ目は、見出しや文章など、画面に見せる内容をヘッドに入れてしまうこと。

97
00:07:31.554 --> 00:07:36.651
二つ目は、すべてのページに同じタイトルや説明文を複製すること。

98
00:07:36.651 --> 00:07:41.419
三つ目は、文字コードの指定を忘れて文字化けさせることです。

99
00:07:41.419 --> 00:07:42.405
まとめます。

100
00:07:42.405 --> 00:07:51.447
ヘッドは、タイトル、文字コード、説明文、シーエスエスの読み込みなど、本文の表示を支える情報をまとめる場所です。

101
00:07:51.447 --> 00:07:53.749
設定はヘッド、内容はボディ。

102
00:07:53.749 --> 00:07:59.338
この分け方を身につけて、自分のページのヘッドを見直してみてください。

103
00:07:59.338 --> 00:08:00.818
お疲れさまでした。

104
00:08:00.818 --> 00:08:09.860
まずは今あるページのヘッドを開いて、タイトルと文字コードが入っているかを点検するところから始めてみてください。