WEBVTT

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

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

3
00:00:04.644 --> 00:00:09.122
エイチティーエムエルタグ編の五十本目は、メタタグです。

4
00:00:09.122 --> 00:00:17.747
メタは、ページそのものについての情報、つまりメタデータをブラウザーや検索エンジンに伝えるためのタグです。

5
00:00:17.747 --> 00:00:22.640
画面には何も表示されない裏方ですが、文字コードやスマートフォン表示、検索結果の説明文など、

6
00:00:22.640 --> 00:00:27.533
大切な設定が集まっています。

7
00:00:27.533 --> 00:00:32.260
今回は基本の書き方から、文字コード、ビューポート、説明文の三つの代表設定、

8
00:00:32.260 --> 00:00:36.987
そして注意点まで順に学んでいきましょう。

9
00:00:36.987 --> 00:00:42.460
小さなタグですが、すべてのページに必ず登場する、主役級の裏方です。

10
00:00:42.460 --> 00:00:44.929
まず役割と置き場所を整理します。

11
00:00:44.929 --> 00:00:48.170
メタタグは、ヘッド要素の中にだけ書きます。

12
00:00:48.170 --> 00:00:56.195
本文や見出しのように読者へ直接見せる内容ではなく、ブラウザーや検索エンジンといった機械に向けた設定です。

13
00:00:56.195 --> 00:01:01.133
たとえば、このページは何の文字コードで書かれているか、スマートフォンではどう表示するか、

14
00:01:01.133 --> 00:01:06.071
どんな内容のページか、といった情報です。

15
00:01:06.071 --> 00:01:13.479
設定が間違っていても画面が真っ白になることは少ないのですが、文字化けや表示崩れの原因になります。

16
00:01:13.479 --> 00:01:16.720
地味でも土台になるタグだと覚えてください。

17
00:01:16.720 --> 00:01:21.966
ページを作り始めたら、本文の前にこの設定から整える習慣が役立ちます。

18
00:01:21.966 --> 00:01:28.448
設定が正しく書けているかどうかは、公開前のチェック項目にも入れておきたいところです。

19
00:01:28.448 --> 00:01:30.185
基本の形を確認します。

20
00:01:30.185 --> 00:01:34.291
メタは空要素と呼ばれる種類で、終了タグは書きません。

21
00:01:34.291 --> 00:01:39.659
閉じタグのような書き方や、タグの内側に文章を入れることもありません。

22
00:01:39.659 --> 00:01:44.554
設定はすべて属性で表し、一つのメタタグで一つの設定を伝えます。

23
00:01:44.554 --> 00:01:49.449
違う種類の設定をしたいときは、メタタグを必要な数だけ並べます。

24
00:01:49.449 --> 00:01:54.818
画面の例のように、ヘッドの中にメタやタイトルを並べるのが基本形です。

25
00:01:54.818 --> 00:01:59.397
書く場所はヘッドの中、形は属性だけ、と覚えれば迷いません。

26
00:01:59.397 --> 00:02:02.871
まずはこの形を手で書けるようになりましょう。

27
00:02:02.871 --> 00:02:08.556
並べる順番は基本的に自由ですが、文字コードだけは先頭に置くのが原則です。

28
00:02:08.556 --> 00:02:11.523
代表設定の一つ目が、文字コードの宣言です。

29
00:02:11.523 --> 00:02:15.620
キャラクターセット属性にユーティーエフエイトを指定します。

30
00:02:15.620 --> 00:02:22.825
これは、この文書がユーティーエフエイトという文字コードで書かれていることをブラウザーに伝える宣言です。

31
00:02:22.825 --> 00:02:26.428
これがない、あるいは実際の保存形式と食い違うと、日本語が記号の羅列になる、

32
00:02:26.428 --> 00:02:30.030
いわゆる文字化けが起きます。

33
00:02:30.030 --> 00:02:35.964
大切なのは置く位置で、ヘッドのなるべく早い位置、先頭に近い場所に書くのが決まりです。

34
00:02:35.964 --> 00:02:42.039
ブラウザーが文書の先頭付近で宣言を見つけられるよう、タイトルなどより前に置きましょう。

35
00:02:42.039 --> 00:02:46.984
新しいページを作るときは、まずこの一行から書き始めるのがおすすめです。

36
00:02:46.984 --> 00:02:49.281
二つ目はビューポートの設定です。

37
00:02:49.281 --> 00:02:54.449
ネーム属性にビューポート、コンテンツ属性に画面幅への合わせ方を書きます。

38
00:02:54.449 --> 00:03:00.192
幅をデバイスの幅に合わせる指定と、初期倍率を一にする指定が基本の組み合わせです。

39
00:03:00.192 --> 00:03:04.283
これがあると、スマートフォンがページをパソコン幅で縮小表示するのではなく、

40
00:03:04.283 --> 00:03:08.375
端末の画面幅に合わせて表示してくれます。

41
00:03:08.375 --> 00:03:11.390
レスポンシブデザインの前提になる設定です。

42
00:03:11.390 --> 00:03:17.276
注意点として、利用者がピンチ操作で拡大することを禁止する指定は書かないでください。

43
00:03:17.276 --> 00:03:21.009
文字を大きくして読みたい人の妨げになってしまいます。

44
00:03:21.009 --> 00:03:25.172
パソコンでの表示だけ確認して終わりにしないことが大切です。

45
00:03:25.172 --> 00:03:27.279
三つ目はページの説明文です。

46
00:03:27.279 --> 00:03:33.902
ネーム属性にディスクリプションと書き、コンテンツ属性にそのページの概要を文章で入れます。

47
00:03:33.902 --> 00:03:40.224
メタタグの多くは、このネームとコンテンツのペアで種類と中身を伝える形になっています。

48
00:03:40.224 --> 00:03:47.449
説明文は検索結果のタイトルの下に表示される候補になりますが、必ずそのまま使われるとは限りません。

49
00:03:47.449 --> 00:03:53.620
検索エンジンが、探している言葉に合わせて本文から別の部分を抜き出すこともあります。

50
00:03:53.620 --> 00:04:01.447
それでも、ページごとに内容に合った概要を書いておくことは、読み手にも検索エンジンにも親切な基本設定です。

51
00:04:01.447 --> 00:04:06.264
長すぎず短すぎない分量で、要点を絞って書くと読みやすくなります。

52
00:04:06.264 --> 00:04:10.779
もう一つの属性が、エイチティーティーピーエクイーブです。

53
00:04:10.779 --> 00:04:19.488
これは、本来サーバーが送る応答ヘッダーに近い設定を、エイチティーエムエルの側から一部だけ行うためのものです。

54
00:04:19.488 --> 00:04:26.584
代表例はリフレッシュで、指定した秒数がたつと別のページへ自動で移動させることができます。

55
00:04:26.584 --> 00:04:30.454
画面の例は、五秒後に新しいページへ移る指定です。

56
00:04:30.454 --> 00:04:32.389
ただし注意点があります。

57
00:04:32.389 --> 00:04:38.679
この属性でできるのは一部の設定だけで、すべてのヘッダーの代わりにはなりません。

58
00:04:38.679 --> 00:04:46.419
本来サーバー側で設定すべきものはサーバーで設定するのが基本で、メタは補助的な手段と考えましょう。

59
00:04:46.419 --> 00:04:51.580
使う場面は限られるので、まずは基本の三つの設定を優先しましょう。

60
00:04:51.580 --> 00:04:55.595
記事の活用事例を読み解いて、実践形を組み立てます。

61
00:04:55.595 --> 00:05:02.660
ヘッドの先頭に文字コードの宣言、続いてビューポート、最後にページの説明文という並びです。

62
00:05:02.660 --> 00:05:06.835
順番のポイントは、文字コードを一番前に置くことです。

63
00:05:06.835 --> 00:05:12.455
こうすると、ブラウザーが読み込みの早い段階で文字の解釈を決められます。

64
00:05:12.455 --> 00:05:17.514
この三行がそろえば、文字化けの心配が減り、スマートフォンでも画面幅に合った表示になり、

65
00:05:17.514 --> 00:05:22.572
検索結果にも概要が伝わりやすくなります。

66
00:05:22.572 --> 00:05:29.316
新しいページを作るときの定番の書き出しとして、この形をそのまま覚えてしまいましょう。

67
00:05:29.316 --> 00:05:32.528
順番と役割をセットで覚えるのがコツです。

68
00:05:32.528 --> 00:05:34.832
よくある失敗も確認しておきます。

69
00:05:34.832 --> 00:05:38.289
一つ目は、同じ種類のメタを重複して書くことです。

70
00:05:38.289 --> 00:05:43.185
どれが有効になるか分かりにくくなるので、設定は一つに統一しましょう。

71
00:05:43.185 --> 00:05:47.217
二つ目は、すべてのページで同じ説明文を使い回すことです。

72
00:05:47.217 --> 00:05:51.106
説明文はページごとに内容へ合わせて変えるのが基本です。

73
00:05:51.106 --> 00:05:55.570
三つ目は、メタで見た目や本文の意味まで変えようとすることです。

74
00:05:55.570 --> 00:06:00.899
メタはあくまで文書の設定であり、見出しや文章の意味は本文のタグで表します。

75
00:06:00.899 --> 00:06:04.931
画面の例のような拡大を禁止する指定も避けたい書き方です。

76
00:06:04.931 --> 00:06:08.676
一つずつ直すだけでも、読みやすさは大きく変わります。

77
00:06:08.676 --> 00:06:11.988
公開前にヘッドの中を見直す習慣をつけましょう。

78
00:06:11.988 --> 00:06:14.445
ブラウザー互換性を確認します。

79
00:06:14.445 --> 00:06:21.899
記事が参照するエムディーエヌの記録では、メタタグ本体はクロームが一以降、

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

81
00:06:29.352 --> 00:06:36.233
文字コードの属性はサファリが三以降、その他の属性も同様に古いバージョンから使えます。

82
00:06:36.233 --> 00:06:45.406
作ったあとの確認では、三百二十ピクセル程度の細い画面幅や、文字を拡大した状態でも内容が欠けないかを見てください。

83
00:06:45.406 --> 00:06:52.778
文字化けがないか、スマートフォンで意図した幅で表示されるかも、あわせて確かめると安心です。

84
00:06:52.778 --> 00:06:57.856
スマートフォンの実機でも表示を確かめられると、さらに安心です。

85
00:06:57.856 --> 00:06:59.332
最後にまとめです。

86
00:06:59.332 --> 00:07:07.205
メタタグは、ヘッドの中で、ページ自体についての情報をブラウザーや検索エンジンへ伝えるタグでした。

87
00:07:07.205 --> 00:07:08.845
ポイントは三つです。

88
00:07:08.845 --> 00:07:14.257
一つ目、終了タグのない空要素で、一つのタグに一つの設定を書くこと。

89
00:07:14.257 --> 00:07:19.014
二つ目、基本の三点セットは、文字コード、ビューポート、ページの説明文であり、

90
00:07:19.014 --> 00:07:23.770
文字コードはヘッドの早い位置に置くこと。

91
00:07:23.770 --> 00:07:33.119
三つ目、ビューポートで利用者の拡大を禁止しないこと、そして説明文は検索結果に必ずそのまま出るとは限らないことです。

92
00:07:33.119 --> 00:07:38.859
練習として、自分のページのヘッドに三点セットを書き入れてみてください。

93
00:07:38.859 --> 00:07:40.336
お疲れさまでした。

94
00:07:40.336 --> 00:07:46.076
画面に出ない部分こそ丁寧に書くことが、サイト全体の品質につながります。