WEBVTT

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

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

3
00:00:04.052 --> 00:00:08.683
エイチティーエムエルタグ編の七十五本目は、エイチワン、タグです。

4
00:00:08.683 --> 00:00:16.208
エイチワンは、エイチワンからエイチシックスまで六段階ある見出しの中で、一番上にあたる最上位の見出しです。

5
00:00:16.208 --> 00:00:20.983
そのページが何について書かれたものかを、一言で示す役割を持ちます。

6
00:00:20.983 --> 00:00:24.601
本でいえば表題、新聞でいえば大見出しにあたります。

7
00:00:24.601 --> 00:00:29.955
今回は、このエイチワンの意味と正しい使い方を、順番に確認していきましょう。

8
00:00:29.955 --> 00:00:34.730
見出しの出発点を理解すると、ページ全体の組み立て方が見えてきます。

9
00:00:34.730 --> 00:00:39.940
エイチワンを正しく置けるかどうかが、その後の見出し全体の土台になります。

10
00:00:39.940 --> 00:00:42.989
まず、見出し全体の中での位置を押さえます。

11
00:00:42.989 --> 00:00:51.121
エイチワンは文書の頂点に立つ見出しで、その下に章を表すエイチツー、さらにその中の節を表すエイチスリーが続きます。

12
00:00:51.121 --> 00:00:58.237
画面の例では、学習会の案内というエイチワンの下に、参加方法や当日の持ち物といった章が並んでいます。

13
00:00:58.237 --> 00:01:03.900
大切なのは、見出しだけを順に拾って読んでも、文章全体の流れがつかめることです。

14
00:01:03.900 --> 00:01:08.256
題名はあいまいにせず、内容が具体的に伝わる言葉にしましょう。

15
00:01:08.256 --> 00:01:12.032
この階層が、そのままページの目次の骨組みになります。

16
00:01:12.032 --> 00:01:17.840
番号が小さいほど上位で、大きいほど下位という関係も、合わせて覚えておきましょう。

17
00:01:17.840 --> 00:01:20.290
基本の書き方を確認します。

18
00:01:20.290 --> 00:01:27.453
エイチワンは開始タグと終了タグを両方書き、その間に見出しの文章をはさみます。

19
00:01:27.453 --> 00:01:35.182
画面の例は記事のコード例と同じ形で、見出しの直後に段落を置いて説明を続けています。

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

21
00:01:41.968 --> 00:01:44.418
置き場所はボディの中です。

22
00:01:44.418 --> 00:01:53.466
見出しの中には基本的に短いテキストだけを入れ、長い文章や別の見出しを入れ子にしないようにします。

23
00:01:53.466 --> 00:02:00.440
まずはこの一番シンプルな形を、正確に書けるようになることが土台になります。

24
00:02:00.440 --> 00:02:07.980
閉じタグのスラッシュを書き忘れないよう、最初は一文字ずつゆっくり確認しましょう。

25
00:02:07.980 --> 00:02:10.490
では、どんな場面で使うのでしょうか。

26
00:02:10.490 --> 00:02:13.976
代表的なのは、ページそのものの主題を示す場面です。

27
00:02:13.976 --> 00:02:21.506
たとえば学習会の案内ページなら、春の学習会のご案内といった、そのページ全体を表す題名がエイチワンになります。

28
00:02:21.506 --> 00:02:28.758
このサイトの記事でも、記事タイトルにエイチワンを一つ使い、その下にエイチツーで章を置く形を取っています。

29
00:02:28.758 --> 00:02:33.638
読者はエイチワンを見た瞬間に、このページで何が分かるのかを判断します。

30
00:02:33.638 --> 00:02:39.914
だからこそ、見出しだけ読んでも流れが分かる、具体的で分かりやすい題名にすることが大切です。

31
00:02:39.914 --> 00:02:45.352
逆に、章の題名や本文の強調に使うものではない点も、合わせて覚えておきましょう。

32
00:02:45.352 --> 00:02:47.900
記事の活用事例を読み解きます。

33
00:02:47.900 --> 00:02:54.016
例の中心は、エイチワンの見出しと、その説明を書いた段落の組み合わせです。

34
00:02:54.016 --> 00:03:01.322
画面ではメイン要素の中にエイチワンを置き、ページの中心となる内容の先頭に据えています。

35
00:03:01.322 --> 00:03:06.503
試すときは、練習用のエイチティーエムエルファイルをコピーし、ボディの適切な位置にこの形を写して、

36
00:03:06.503 --> 00:03:11.685
保存後に再読み込みします。

37
00:03:11.685 --> 00:03:19.670
そして開発者ツールのエレメンツで、見出しと段落が意図した構造になっているかを確認してください。

38
00:03:19.670 --> 00:03:26.805
見た目ではなく、文書の第一階層を示すという目的に合っているかを見るのがポイントです。

39
00:03:26.805 --> 00:03:32.752
自分の文章に置き換えて試すと、単に写すだけより理解がぐっと深まります。

40
00:03:32.752 --> 00:03:35.300
構造を見る習慣が身につきます。

41
00:03:35.300 --> 00:03:37.136
属性について確認します。

42
00:03:37.136 --> 00:03:42.948
エイチワンには、この要素だけのための専用属性で、必須となるものはありません。

43
00:03:42.948 --> 00:03:48.149
代わりに、どの要素にも使えるグローバル属性を、必要に応じて使います。

44
00:03:48.149 --> 00:03:49.372
代表は三つです。

45
00:03:49.372 --> 00:03:54.420
文書の中で重ならない識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

46
00:03:54.420 --> 00:03:59.468
そして内容の言語を示すラングです。

47
00:03:59.468 --> 00:04:04.669
画面のようにアイディーを付ければ、ページ内リンクの飛び先にできます。

48
00:04:04.669 --> 00:04:11.093
注意として、独自データを入れるデータ属性には、秘密情報を置かないようにしてください。

49
00:04:11.093 --> 00:04:16.906
属性は付ければよいものではないので、本当に必要な場面だけで使うのがコツです。

50
00:04:16.906 --> 00:04:19.200
付けすぎも管理を難しくします。

51
00:04:19.200 --> 00:04:21.484
見た目との関係を整理します。

52
00:04:21.484 --> 00:04:28.174
ブラウザーの初期設定では、エイチワンは六段階の中で一番大きく、太字で表示されます。

53
00:04:28.174 --> 00:04:35.353
ここで大切なのは、文字を大きく見せたいからエイチワンを選ぶ、という発想にしないことです。

54
00:04:35.353 --> 00:04:43.838
記事も、文字の大きさはシーエスエスで調整し、見た目だけを理由に見出しの階層を決めないよう注意しています。

55
00:04:43.838 --> 00:04:51.180
見出しのレベルは文書の意味と階層で決め、文字の大きさや色、余白はシーエスエスで調整します。

56
00:04:51.180 --> 00:04:58.033
画面のように専用のルールを書けば、意味を保ったまま、デザインに合わせて整えられます。

57
00:04:58.033 --> 00:05:04.397
太さや行間も合わせると、ほかの見出しとの階層の違いがより伝わりやすくなります。

58
00:05:04.397 --> 00:05:07.660
読み手が迷わない見た目を目指しましょう。

59
00:05:07.660 --> 00:05:09.726
次に、数と階層のコツです。

60
00:05:09.726 --> 00:05:15.765
この教材では、エイチワンはページタイトルに一つだけ使う形を基本にしています。

61
00:05:15.765 --> 00:05:20.771
エイチワンをいくつも並べると、そのページの主題がぼやけてしまい、読者も検索エンジンも、

62
00:05:20.771 --> 00:05:25.778
何のページなのかを判断しにくくなります。

63
00:05:25.778 --> 00:05:30.069
章ごとに伝えたいことは、エイチツー以下に任せましょう。

64
00:05:30.069 --> 00:05:37.697
あわせて、エイチワンの次にいきなりエイチスリーを置くような、階層を飛ばす書き方も避けてください。

65
00:05:37.697 --> 00:05:46.756
音声読み上げなどの支援技術では、利用者が見出しを頼りに移動するため、正しい階層がそのまま使いやすさにつながります。

66
00:05:46.756 --> 00:05:53.589
迷ったら見出しだけを抜き出して眺め、ページの主題が一つに定まるかを点検してみましょう。

67
00:05:53.589 --> 00:05:56.768
公開前の短い作業で大きな効果があります。

68
00:05:56.768 --> 00:05:58.901
ブラウザー互換性を確認します。

69
00:05:58.901 --> 00:06:05.657
記事が参照するエムディーエヌのデータでは、エイチワン要素は、クロームが一以降、

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

71
00:06:12.413 --> 00:06:17.818
そのため、エイチワン自体が表示できない環境を心配する必要は、まずありません。

72
00:06:17.818 --> 00:06:20.094
ただし、これは要素本体の話です。

73
00:06:20.094 --> 00:06:25.072
新しい属性や機能を組み合わせる場合は、別途対応状況を確認してください。

74
00:06:25.072 --> 00:06:31.330
あわせて、アイオーエスやアンドロイドなど、利用対象の実機でも表示を試しておくと安心です。

75
00:06:31.330 --> 00:06:37.161
表示できることと意図どおり読めることは別なので、本文の確認も欠かさないでください。

76
00:06:37.161 --> 00:06:38.868
安心して使える要素です。

77
00:06:38.868 --> 00:06:41.374
よくある間違いを三つ紹介します。

78
00:06:41.374 --> 00:06:48.891
一つ目は、本文の文章や注意書きのような、見出しではない文章までエイチワンで囲んでしまうことです。

79
00:06:48.891 --> 00:06:52.649
それは段落など、内容に合った要素で書きましょう。

80
00:06:52.649 --> 00:06:59.540
二つ目は、見た目を大きくしたいだけの理由で、ページのあちこちにエイチワンを使うことです。

81
00:06:59.540 --> 00:07:02.516
大きさの調整はシーエスエスの担当です。

82
00:07:02.516 --> 00:07:06.744
三つ目は、中身のない空の見出しを残してしまうことです。

83
00:07:06.744 --> 00:07:10.033
空の見出しは文書のアウトラインを乱します。

84
00:07:10.033 --> 00:07:16.924
書く前に、その文章が本当にページ全体の題名かどうかを、一度立ち止まって確認してください。

85
00:07:16.924 --> 00:07:23.344
間違いに気づいたら、タグを置き換えるだけでなく、階層全体もあわせて見直しましょう。

86
00:07:23.344 --> 00:07:26.320
少しの見直しで読みやすさが変わります。

87
00:07:26.320 --> 00:07:28.448
最後にまとめとチェックです。

88
00:07:28.448 --> 00:07:34.833
エイチワンは、六段階の見出しの最上位で、ページ全体の主題を示すときに使う見出しです。

89
00:07:34.833 --> 00:07:43.345
この教材ではページタイトルに一つ使い、専用の必須属性はなく、必要ならアイディーやクラスなどの共通属性を使います。

90
00:07:43.345 --> 00:07:49.350
公開前には、目的が第一階層を示すことに合っているか、階層を飛ばしていないか、

91
00:07:49.350 --> 00:07:55.354
三百二十ピクセル程度の狭い画面や文字拡大でも内容が欠けていないかを確認しましょう。

92
00:07:55.354 --> 00:08:01.891
自分のページで主題を一言で表す場面があれば、ぜひエイチワンを正しく使ってみてください。

93
00:08:01.891 --> 00:08:03.259
お疲れさまでした。

94
00:08:03.259 --> 00:08:09.948
まずは手元のページの見出し一覧を書き出して、エイチワンが一つだけか点検してみてください。

95
00:08:09.948 --> 00:08:13.292
小さな確認の積み重ねが確かな土台になります。