WEBVTT

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

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

3
00:00:04.045 --> 00:00:08.812
エイチティーエムエルタグ編の七十本目は、エイチシックス、タグです。

4
00:00:08.812 --> 00:00:12.568
エイチシックスは、エイチワンからエイチシックスまで六段階ある見出しの中で、

5
00:00:12.568 --> 00:00:16.324
最も深い第六階層を担当します。

6
00:00:16.324 --> 00:00:23.981
大きな章の中の節、さらにその中の小さいまとまり、というように、文章を細かく整理するときの末端の見出しです。

7
00:00:23.981 --> 00:00:30.048
出番は多くありませんが、長い仕様書やマニュアルなど、階層の深い文書では欠かせません。

8
00:00:30.048 --> 00:00:34.526
今回は、その役割と正しい使い方を、順番に確認していきましょう。

9
00:00:34.526 --> 00:00:38.860
見出しの階層全体の中で、自分の位置を意識することが大切です。

10
00:00:38.860 --> 00:00:41.859
まず、見出し全体の階層を押さえます。

11
00:00:41.859 --> 00:00:46.607
エイチワンが文書全体を代表する最も大きな見出しで、エイチツー、エイチスリーと、

12
00:00:46.607 --> 00:00:51.356
数字が増えるほど下の階層になります。

13
00:00:51.356 --> 00:00:55.354
そしてエイチシックスが、その一番下に位置します。

14
00:00:55.354 --> 00:01:00.686
本でいえば、章、節、項をさらに細かく分けた小見出しにあたります。

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

16
00:01:07.350 --> 00:01:16.680
そのため、題名は内容が具体的に伝わる言葉にし、階層を飛ばさず、上から順に深くしていくのが基本の考え方になります。

17
00:01:16.680 --> 00:01:21.512
この階層の考え方は、目次を作るときにもそのまま役立ちます。

18
00:01:21.512 --> 00:01:23.401
基本の書き方を確認します。

19
00:01:23.401 --> 00:01:29.503
エイチシックスは、開始タグと終了タグを両方書いて、その間に見出しの文章をはさみます。

20
00:01:29.503 --> 00:01:34.589
画面の例では、見出しの直後に段落を置いて、その節の説明を続けています。

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

22
00:01:39.819 --> 00:01:41.708
置き場所はボディの中です。

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

24
00:01:48.537 --> 00:01:52.750
まずはこの形を正確に書けることが、すべての土台になります。

25
00:01:52.750 --> 00:01:56.964
短い見出しほど、読み手に内容が素早く伝わる傾向があります。

26
00:01:56.964 --> 00:01:59.771
では、どんな場面で使うのでしょうか。

27
00:01:59.771 --> 00:02:05.854
代表的なのは、エイチファイブで作った節を、さらに二つ、三つに分けたいときです。

28
00:02:05.854 --> 00:02:12.873
たとえば持ち物という節の中で、筆記用具と教材をそれぞれ分けて説明する、といった使い方です。

29
00:02:12.873 --> 00:02:17.240
逆にいえば、エイチファイブ自体を使っていない文書で、いきなりエイチシックスだけが出てくる場面は、

30
00:02:17.240 --> 00:02:21.607
まずありません。

31
00:02:21.607 --> 00:02:27.222
階層がそこまで深くならない短いページでは、無理に作る必要はないタグです。

32
00:02:27.222 --> 00:02:31.901
文書の深さに合わせて、必要なときだけ使う、と覚えてください。

33
00:02:31.901 --> 00:02:36.424
実際に使うかどうかは、文書の長さと深さで判断してください。

34
00:02:36.424 --> 00:02:38.893
記事の活用事例を読み解きます。

35
00:02:38.893 --> 00:02:45.148
例の中心は、エイチシックスの見出しと、その説明を書いた段落の組み合わせです。

36
00:02:45.148 --> 00:02:54.036
ここではセクションの中で、エイチファイブの下にエイチシックスを置き、受付という細かい話題を切り分けています。

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

38
00:02:59.056 --> 00:03:04.076
保存後に再読み込みします。

39
00:03:04.076 --> 00:03:11.977
そして開発者ツールのエレメンツで、見出しと段落が意図した入れ子になっているかを確認してください。

40
00:03:11.977 --> 00:03:17.244
見た目ではなく、構造が目的に合っているかを見るのがポイントです。

41
00:03:17.244 --> 00:03:22.676
写して終わりにせず、自分の文章に置き換えて試すと理解が深まります。

42
00:03:22.676 --> 00:03:24.355
属性について確認します。

43
00:03:24.355 --> 00:03:29.674
エイチシックスには、この要素だけのための専用属性は、必須のものはありません。

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

45
00:03:34.292 --> 00:03:35.412
代表は三つです。

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

47
00:03:40.031 --> 00:03:44.649
そして内容の言語を示すラングです。

48
00:03:44.649 --> 00:03:49.827
画面のようにアイディーを付ければ、目次からその見出しへ直接リンクできます。

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

50
00:03:55.706 --> 00:04:00.744
属性を付ける前に、その見出しへリンクや装飾が本当に必要かを考えましょう。

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

52
00:04:02.654 --> 00:04:10.975
ブラウザーの初期設定では、エイチシックスはほかの見出しより小さく、本文とあまり変わらない大きさで表示されることが多いです。

53
00:04:10.975 --> 00:04:17.114
ここで大切なのは、文字を小さくしたいからエイチシックスを選ぶ、という発想にしないことです。

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

55
00:04:23.252 --> 00:04:29.936
画面のように、エイチシックス専用のルールを書けば、階層を保ったまま読みやすい見た目に整えられます。

56
00:04:29.936 --> 00:04:33.756
意味と見た目を分けることが、長く使えるコードのコツです。

57
00:04:33.756 --> 00:04:39.076
色だけで階層を伝えるのではなく、余白や太さも組み合わせると読みやすくなります。

58
00:04:39.076 --> 00:04:41.293
次に、階層を飛ばさないコツです。

59
00:04:41.293 --> 00:04:46.837
よくある失敗は、エイチツーの直後にいきなりエイチシックスを置いてしまうことです。

60
00:04:46.837 --> 00:04:51.064
見た目が小さくて都合がよかったとしても、文書のアウトラインは途中で途切れ、

61
00:04:51.064 --> 00:04:55.291
読み手も検索エンジンも構造を追いにくくなります。

62
00:04:55.291 --> 00:05:00.557
音声読み上げなどの支援技術では、利用者が見出しを頼りにページ内を移動します。

63
00:05:00.557 --> 00:05:03.467
階層が正しければ、その移動もスムーズです。

64
00:05:03.467 --> 00:05:08.872
エイチワンは原則としてページの主題に使い、そこから順番に一段ずつ深くしていく。

65
00:05:08.872 --> 00:05:13.445
この順序を守るだけで、エイチシックスの意味も自然とはっきりします。

66
00:05:13.445 --> 00:05:18.296
迷ったときは、見出しだけを抜き出して一覧で眺めてみるのがおすすめです。

67
00:05:18.296 --> 00:05:20.490
ブラウザー互換性を確認します。

68
00:05:20.490 --> 00:05:27.583
記事が参照するエムディーエヌのデータでは、エイチシックス要素は、クロームが一以降、

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

70
00:05:34.677 --> 00:05:40.527
そのため、エイチシックス自体が表示できない環境を心配する必要は、まずありません。

71
00:05:40.527 --> 00:05:42.867
ただし、これは要素本体の話です。

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

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

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

75
00:06:00.564 --> 00:06:03.576
よくある間違いを三つ紹介します。

76
00:06:03.576 --> 00:06:12.424
一つ目は、脚注や注意書きのような、見出しではない文章までエイチシックスで囲んでしまうことです。

77
00:06:12.424 --> 00:06:17.884
それは段落やスモールなど、内容に合った要素で書きましょう。

78
00:06:17.884 --> 00:06:23.908
二つ目は、見た目を小さくしたいだけの理由でレベルを選ぶことです。

79
00:06:23.908 --> 00:06:29.556
これは前のセクションで触れたとおり、シーエスエスの担当です。

80
00:06:29.556 --> 00:06:34.639
三つ目は、中身のない空の見出しを残してしまうことです。

81
00:06:34.639 --> 00:06:38.028
空の見出しはアウトラインを乱します。

82
00:06:38.028 --> 00:06:45.559
書く前に、その文章が本当に節の題名かどうかを、一度立ち止まって確認してください。

83
00:06:45.559 --> 00:06:52.336
間違いに気づいたら、タグを置き換えるだけでなく階層全体を見直しましょう。

84
00:06:52.336 --> 00:06:54.314
最後にまとめとチェックです。

85
00:06:54.314 --> 00:07:01.800
エイチシックスは、六段階の見出しで最も深いレベルで、エイチファイブの節をさらに分けるときに使う見出しです。

86
00:07:01.800 --> 00:07:07.026
専用の必須属性はなく、必要ならアイディーやクラスなどの共通属性を使います。

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

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

89
00:07:18.185 --> 00:07:24.541
自分の長い文書で、細かく分けたい節があれば、ぜひエイチシックスを正しく使ってみてください。

90
00:07:24.541 --> 00:07:25.813
お疲れさまでした。

91
00:07:25.813 --> 00:07:31.604
まずは手元のページの見出し一覧を書き出し、階層の飛びがないか点検してみてください。