WEBVTT

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

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

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

4
00:00:09.600 --> 00:00:16.394
このタグは、すべてのエイチティーエムエル文書のいちばん外側にある、ルートと呼ばれる要素です。

5
00:00:16.394 --> 00:00:22.597
ページの中の見出しも、文章も、画像も、元をたどればすべてこのタグの中に入っています。

6
00:00:22.597 --> 00:00:29.982
普段は意識しない地味な存在ですが、ここに書く言語の指定が、読み上げや翻訳の正確さを大きく左右します。

7
00:00:29.982 --> 00:00:37.219
今回は、役割と正しい書き方、特にラング属性の大切さを、初心者の方にも分かるように順番に解説します。

8
00:00:37.219 --> 00:00:42.388
一番外側のタグを正しく書くことが、すべてのページ作りの土台になります。

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

10
00:00:44.505 --> 00:00:47.924
まず一行目に、ドックタイプ宣言を書きます。

11
00:00:47.924 --> 00:00:54.600
これは、このファイルがエイチティーエムエルであることをブラウザーへ伝える合図です。

12
00:00:54.600 --> 00:01:01.114
その次に、開始タグのエイチティーエムエルを書き、文書の最後に終了タグで閉じます。

13
00:01:01.114 --> 00:01:07.464
この開始タグと終了タグの間に、ヘッドとボディーが一つずつ入るのが基本の形です。

14
00:01:07.464 --> 00:01:11.698
一つの文書にエイチティーエムエル要素は一つだけです。

15
00:01:11.698 --> 00:01:16.583
中に別のエイチティーエムエルを入れ子にすることはありません。

16
00:01:16.583 --> 00:01:23.096
画面の例のように、開始タグにはラング属性も一緒に書くのが今の標準的な書き方です。

17
00:01:23.096 --> 00:01:25.975
文書の骨組みをもう少し詳しく見ます。

18
00:01:25.975 --> 00:01:32.214
エイチティーエムエルの直下には、ヘッドとボディーという二つの子要素が並びます。

19
00:01:32.214 --> 00:01:39.412
ヘッドには、タイトルや文字コードなど、画面には直接出ないけれど表示を支える情報を入れます。

20
00:01:39.412 --> 00:01:47.410
ボディーには、見出しや段落、画像やフォームなど、利用者が実際に読んだり操作したりする内容を入れます。

21
00:01:47.410 --> 00:01:52.129
つまりエイチティーエムエルは、この情報の部屋と、本文の部屋をまとめて包む、

22
00:01:52.129 --> 00:01:56.848
家全体のような存在だとイメージしてください。

23
00:01:56.848 --> 00:02:01.327
この二つの順番を崩さないことが、正しい文書の第一歩です。

24
00:02:01.327 --> 00:02:06.525
ヘッドとボディーを取り違えると、情報が表示されなかったり、本文が正しく認識されなかったりするので、

25
00:02:06.525 --> 00:02:11.724
置き場所は丁寧に確認しましょう。

26
00:02:11.724 --> 00:02:14.508
ここからが今回の主役、ラング属性です。

27
00:02:14.508 --> 00:02:18.977
ラングは、その文書が何語で書かれているかを伝える指定で、日本語のページならジェーエー、

28
00:02:18.977 --> 00:02:23.447
英語のページならイーエヌと書きます。

29
00:02:23.447 --> 00:02:28.868
この指定は見た目には何も変えませんが、画面読み上げソフトが正しい発音を選んだり、

30
00:02:28.868 --> 00:02:34.290
ブラウザーの翻訳機能が言語を正しく判定したりする手がかりになります。

31
00:02:34.290 --> 00:02:41.763
書き忘れると、日本語の文章を英語の発音で読み上げるような、大きな伝わり方のずれが起きることがあります。

32
00:02:41.763 --> 00:02:48.064
日本語のサイトを作るときは、ラング、イコール、ジェーエーは必ず書く、と覚えてください。

33
00:02:48.064 --> 00:02:55.358
言語と一緒に知っておきたいのが、文字の進む方向を指定する、ディーアイアール属性です。

34
00:02:55.358 --> 00:03:06.646
日本語や英語のように左から右へ読む言語ではエルティーアール、アラビア語のように右から左へ読む言語ではアールティーエルを指定します。

35
00:03:06.646 --> 00:03:12.204
内容に合わせてブラウザーに判断させたい場合は、オートも選べます。

36
00:03:12.204 --> 00:03:20.366
通常の日本語ページでは省略しても問題になることは少ないですが、多言語サイトでは大切な指定です。

37
00:03:20.366 --> 00:03:26.705
また、ページ全体は日本語でも、一部分だけ英語の引用がある場合は、その部分の要素にだけラングを書き換えて、

38
00:03:26.705 --> 00:03:33.044
言語が切り替わる場所を明確に伝えましょう。

39
00:03:33.044 --> 00:03:38.041
エイチティーエムエル固有の属性は、ラングとディーアイアールが中心で、それ以外の多くは、

40
00:03:38.041 --> 00:03:43.038
どの要素にも使える共通のグローバル属性です。

41
00:03:43.038 --> 00:03:52.110
たとえば、アイディーは文書の中で一つだけの識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための目印です。

42
00:03:52.110 --> 00:03:56.877
データ属性には、アプリ独自の値を小さく持たせることもできます。

43
00:03:56.877 --> 00:03:58.722
ただし注意点があります。

44
00:03:58.722 --> 00:04:05.026
クラスを付けても要素の意味自体は変わりませんし、秘密情報を置く場所でもありません。

45
00:04:05.026 --> 00:04:13.944
エイチティーエムエル要素にクラスを付ける例としては、ページ全体のテーマ切り替えの目印にするような使い方が代表的です。

46
00:04:13.944 --> 00:04:16.533
記事の活用事例を読み解きます。

47
00:04:16.533 --> 00:04:22.402
例は、わずか数行の短い文書ですが、大切な要素がすべて詰まっています。

48
00:04:22.402 --> 00:04:28.875
一行目のドックタイプ宣言、その下のラング、ジェーエーを指定したエイチティーエムエル、

49
00:04:28.875 --> 00:04:35.348
ヘッドの中の文字コードとタイトル、そしてボディーの中の見出しです。

50
00:04:35.348 --> 00:04:40.354
実際に試すときは、このコードをインデックス、エイチティーエムエルという名前で保存し、

51
00:04:40.354 --> 00:04:45.360
ブラウザーで開いてみてください。

52
00:04:45.360 --> 00:04:52.524
そのあと開発者ツールのエレメンツ画面で、ソースに書いた通り、エイチティーエムエルの中にヘッドとボディーが収まっているかを確認すると、

53
00:04:52.524 --> 00:04:59.687
構造の理解が確かなものになります。

54
00:04:59.687 --> 00:05:04.262
ブラウザーで表示された見た目だけでなく、裏側の構造まで合っているかを見る習慣が、

55
00:05:04.262 --> 00:05:08.836
確実な制作につながります。

56
00:05:08.836 --> 00:05:11.233
よくある間違いを三つ紹介します。

57
00:05:11.233 --> 00:05:13.630
一つ目は、ラングの書き忘れです。

58
00:05:13.630 --> 00:05:19.922
見た目が変わらないため忘れやすいですが、読み上げと翻訳に直結するので必ず確認します。

59
00:05:19.922 --> 00:05:22.468
二つ目は、言語と中身の不一致です。

60
00:05:22.468 --> 00:05:27.112
日本語のページなのに、コピーした雛形のイーエヌが残っている、という事故はとても多いので、

61
00:05:27.112 --> 00:05:31.756
公開前に開始タグを見直してください。

62
00:05:31.756 --> 00:05:35.951
三つ目は、エイチティーエムエルの入れ子や、二重書きです。

63
00:05:35.951 --> 00:05:39.696
文書のルートは一つだけ、という原則を守りましょう。

64
00:05:39.696 --> 00:05:47.336
いずれも、ブラウザーが自動で補正して表示できてしまうため、見た目だけでは気付きにくい点が落とし穴です。

65
00:05:47.336 --> 00:05:49.861
補足として、省略の話をしておきます。

66
00:05:49.861 --> 00:05:57.577
エイチティーエムエルの仕様では、一定の条件を満たせば開始タグや終了タグを省略できるとされている場面もあります。

67
00:05:57.577 --> 00:06:02.628
ブラウザーが賢く補ってくれるため、省略しても表示されることが多いのです。

68
00:06:02.628 --> 00:06:09.082
ただし、この教材を含め、学習の場では開始タグと終了タグを明示する書き方を強くおすすめします。

69
00:06:09.082 --> 00:06:16.938
どこからどこまでが一つの文書なのかが、コードを読む人にも一目で分かり、入れ子のミスにも気付きやすくなるからです。

70
00:06:16.938 --> 00:06:21.708
省略できることと、省略した方がよいことは別だ、と覚えておきましょう。

71
00:06:21.708 --> 00:06:24.301
ブラウザー互換性を確認します。

72
00:06:24.301 --> 00:06:32.857
記事が参照するエムディーエヌのデータでは、エイチティーエムエル要素は、クロームが一以降、

73
00:06:32.857 --> 00:06:41.414
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、主要ブラウザーのごく初期から対応しています。

74
00:06:41.414 --> 00:06:47.118
そのため、対応していないブラウザーを心配する必要はまずありません。

75
00:06:47.118 --> 00:06:50.057
むしろ確認すべきは書き方の方です。

76
00:06:50.057 --> 00:06:55.128
ラングが内容の言語と合っているか、部分的な外国語に個別のラングを付けたか、

77
00:06:55.128 --> 00:07:00.198
そして三百二十ピクセル程度の狭い画面や文字拡大でも内容が欠けていないかを、

78
00:07:00.198 --> 00:07:05.269
仕上げにチェックしましょう。

79
00:07:05.269 --> 00:07:14.776
モバイル端末で試す場合も、言語の指定が効いているかは、読み上げ機能で一度聞いてみると分かりやすく確認できます。

80
00:07:14.776 --> 00:07:15.940
最後にまとめです。

81
00:07:15.940 --> 00:07:19.045
エイチティーエムエルタグのポイントは三つでした。

82
00:07:19.045 --> 00:07:22.602
一つ目、エイチティーエムエルは文書全体のルートで、一つの文書に一つだけ書き、

83
00:07:22.602 --> 00:07:26.160
中にヘッドとボディーを収めること。

84
00:07:26.160 --> 00:07:33.921
二つ目、日本語のページでは開始タグにラング、ジェーエーを必ず指定し、読み上げや翻訳でも言語が正しく伝わるようにすること。

85
00:07:33.921 --> 00:07:41.424
三つ目、文字方向が必要な場面ではディーアイアールも合わせ、部分的に言語が変わる場所では子要素のラングで補うことです。

86
00:07:41.424 --> 00:07:47.504
練習として、今まで作ったファイルの先頭を開き、ラングが正しく書けているか確認してみてください。

87
00:07:47.504 --> 00:07:48.668
お疲れさまでした。