WEBVTT

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

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

3
00:00:04.299 --> 00:00:08.138
HTMLタグ編の二十九本目は、セクションタグです。

4
00:00:08.138 --> 00:00:12.744
セクションは、ページの内容を話題ごとに区切るためのタグです。

5
00:00:12.744 --> 00:00:17.350
たとえば学習会のページなら、開催日程、参加方法、よくある質問、といった具合に、

6
00:00:17.350 --> 00:00:21.957
一つの話題を一つのまとまりとして囲みます。

7
00:00:21.957 --> 00:00:25.949
そして、そのまとまりには見出しを付けるのが基本です。

8
00:00:25.949 --> 00:00:29.941
今回はセクションの役割、ディブとの違い、ほかの区切りタグとの使い分けまで、

9
00:00:29.941 --> 00:00:33.933
初心者向けに順番に解説します。

10
00:00:33.933 --> 00:00:40.228
ページの骨組みを作るうえで毎日使うタグなので、ここでしっかり押さえておきましょう。

11
00:00:40.228 --> 00:00:44.595
セクションが向いているのは、話題が切り替わる場所です。

12
00:00:44.595 --> 00:00:48.316
お店のページなら営業時間、メニュー、アクセス。

13
00:00:48.316 --> 00:00:51.227
商品ページなら特徴、仕様、注意事項。

14
00:00:51.227 --> 00:00:59.315
このように、読み手が話題の切り替わりを感じるところで区切ると、ページ全体がぐっと読みやすくなります。

15
00:00:59.315 --> 00:01:03.358
ポイントは、見出しとその説明を一組にすることです。

16
00:01:03.358 --> 00:01:10.314
見出しを付けられないまとまりは、そもそも一つの話題として独立していないかもしれません。

17
00:01:10.314 --> 00:01:18.725
また、長いページではセクションごとに区切ることで、目次から目的の場所へ移動する案内も作りやすくなります。

18
00:01:18.725 --> 00:01:24.224
区切りは見た目の飾りではなく、読み手への道しるべだと考えてください。

19
00:01:24.224 --> 00:01:26.221
基本の形を見てみましょう。

20
00:01:26.221 --> 00:01:31.906
セクションには開始タグと終了タグがあり、その内側の最初に見出しを置きます。

21
00:01:31.906 --> 00:01:37.744
例ではエイチツーで開催日程という見出しを示し、続けて段落を二つ置いています。

22
00:01:37.744 --> 00:01:41.585
この見出しが、そのまとまり全体のテーマを表します。

23
00:01:41.585 --> 00:01:46.194
見出しのレベルは、ページ全体の階層に合わせて選んでください。

24
00:01:46.194 --> 00:01:52.492
大きな区切りならエイチツー、その中をさらに分けるならエイチスリー、という具合です。

25
00:01:52.492 --> 00:01:54.951
セクションは入れ子にもできます。

26
00:01:54.951 --> 00:02:00.328
外側の大きな話題の中に、小さな話題を内側のセクションとして置く形です。

27
00:02:00.328 --> 00:02:05.244
まずは見出しプラス本文、という最小の形を手で写して覚えましょう。

28
00:02:05.244 --> 00:02:07.611
記事の活用事例を読み解きます。

29
00:02:07.611 --> 00:02:12.501
この例では、見出しのエイチツーにアイディーを付け、セクション側のアリア、

30
00:02:12.501 --> 00:02:17.392
ラベルドバイ属性で、そのアイディーを参照しています。

31
00:02:17.392 --> 00:02:24.018
こうすると、セクションは開催日程という名前を持った領域として、支援技術に伝わります。

32
00:02:24.018 --> 00:02:30.487
音声読み上げを使う方は、名前のある領域を目印にページ内を移動できるようになります。

33
00:02:30.487 --> 00:02:35.693
ただし、すべてのセクションに機械的に名前を付ける必要はありません。

34
00:02:35.693 --> 00:02:41.373
ページ内移動の目印として役立つ、大きな区切りに絞って使うのが現実的です。

35
00:02:41.373 --> 00:02:47.368
書いたらブラウザーで開き、見出しと本文が一組に見えるか確認してみてください。

36
00:02:47.368 --> 00:02:49.899
よく迷うのが、ディブとの違いです。

37
00:02:49.899 --> 00:02:52.728
判断の基準は、意味があるかどうかです。

38
00:02:52.728 --> 00:02:58.088
そのまとまりに名前を付けられる、つまり見出しを付けられるならセクション。

39
00:02:58.088 --> 00:03:04.341
背景色を付ける、横並びに配置する、といった見た目や都合だけの箱ならディブが適切です。

40
00:03:04.341 --> 00:03:09.254
記事でも、装飾だけの箱ならディブを使う、とはっきり示されています。

41
00:03:09.254 --> 00:03:13.869
セクションを何重にも重ねて見た目を整えるのは、意味のない区切りを増やすだけで、

42
00:03:13.869 --> 00:03:18.485
読み上げの案内もかえって分かりにくくなります。

43
00:03:18.485 --> 00:03:24.142
逆に、話題の区切りなのに全部ディブで作ると、文書の構造が機械に伝わりません。

44
00:03:24.142 --> 00:03:28.460
迷ったら、見出しを付けたいかどうかで判断してみてください。

45
00:03:28.460 --> 00:03:32.018
似た区切りタグとの使い分けも整理しましょう。

46
00:03:32.018 --> 00:03:37.518
アーティクルは、それだけを取り出しても独立して読める内容に使います。

47
00:03:37.518 --> 00:03:40.914
ブログの一記事やニュース一件が代表例です。

48
00:03:40.914 --> 00:03:46.575
アサイドは、補足や関連リンクなど、本文の流れから少し脇へ置く内容です。

49
00:03:46.575 --> 00:03:50.619
ナブは、サイト内の主要なリンクの集まりを囲みます。

50
00:03:50.619 --> 00:03:58.221
それに対してセクションは、独立まではしないけれど、話題ごとに分けたいときの汎用的な区切りです。

51
00:03:58.221 --> 00:04:06.469
たとえばアーティクルの中を、概要、本文、まとめとセクションで分ける、といった組み合わせもよくあります。

52
00:04:06.469 --> 00:04:11.160
タグの名前ではなく、内容の役割から選ぶ習慣を付けましょう。

53
00:04:11.160 --> 00:04:12.555
属性を確認します。

54
00:04:12.555 --> 00:04:15.966
セクションには、専用の必須属性はありません。

55
00:04:15.966 --> 00:04:20.462
必要に応じて、どの要素でも使えるグローバル属性を使います。

56
00:04:20.462 --> 00:04:22.787
代表はアイディーとクラスです。

57
00:04:22.787 --> 00:04:27.748
アイディーは文書の中で一意な識別子で、目次からそのセクションへ飛ぶページ内リンクの目印や、

58
00:04:27.748 --> 00:04:32.709
ジャバスクリプトからの参照に使えます。

59
00:04:32.709 --> 00:04:38.135
クラスは、シーエスエスで複数のセクションをまとめて選ぶときに使います。

60
00:04:38.135 --> 00:04:44.336
ただし注意点として、クラス名で見た目を指定しても、要素の意味自体は変わりません。

61
00:04:44.336 --> 00:04:52.708
また、データ属性に独自の値を保持することもできますが、秘密情報を置く場所ではないことも覚えておいてください。

62
00:04:52.708 --> 00:04:56.018
セクションで最も大切なのは見出しです。

63
00:04:56.018 --> 00:05:02.812
見出しのないセクションは、何のまとまりなのかが読み手にも機械にも伝わりません。

64
00:05:02.812 --> 00:05:08.212
デザイン上、見出しを画面に見せたくない場合でも、シーエスエスで視覚的に隠す方法を検討し、

65
00:05:08.212 --> 00:05:13.613
文書からは消さないようにしましょう。

66
00:05:13.613 --> 00:05:16.748
また、見出しレベルの階層も大切です。

67
00:05:16.748 --> 00:05:24.065
ページの主題がエイチワン、その下のセクションがエイチツー、内側のセクションがエイチスリー、

68
00:05:24.065 --> 00:05:31.381
と順番に深くしていくと、見出しだけを拾って目次を作れる、整った文書になります。

69
00:05:31.381 --> 00:05:38.524
レベルの数字を、文字の大きさを変える目的だけで選ばないことも、よくある注意点です。

70
00:05:38.524 --> 00:05:42.008
大きさはシーエスエスで調整してください。

71
00:05:42.008 --> 00:05:44.438
ブラウザー互換性は心配いりません。

72
00:05:44.438 --> 00:05:50.514
記事が参照するエムディーエヌの記録では、セクション要素本体は、クロームはバージョン五以降、

73
00:05:50.514 --> 00:05:56.590
エッジは十二以降、ファイアフォックスは四以降、サファリは五以降で対応しています。

74
00:05:56.590 --> 00:06:03.166
いずれもかなり古いバージョンから使えているので、現在の環境ではそのまま安心して利用できます。

75
00:06:03.166 --> 00:06:05.596
ただし、これは要素本体の対応です。

76
00:06:05.596 --> 00:06:11.315
新しい属性や機能を組み合わせる場合は、そちら側の対応状況を別に確認してください。

77
00:06:11.315 --> 00:06:13.030
実機での確認も大切です。

78
00:06:13.030 --> 00:06:21.036
スマートフォンのブラウザーで、区切りや見出しの表示が崩れていないか、一度は自分の目で確かめる習慣を付けましょう。

79
00:06:21.036 --> 00:06:24.161
実装前後のチェックポイントをまとめます。

80
00:06:24.161 --> 00:06:31.973
まず、各セクションが本当に話題の区切りになっているか、タグ名ではなく内容の意味から判断してください。

81
00:06:31.973 --> 00:06:35.878
次に、入れ子が深くなりすぎていないかも確認します。

82
00:06:35.878 --> 00:06:40.566
区切りが細かすぎると、かえって構造が読み取りにくくなります。

83
00:06:40.566 --> 00:06:42.440
三つ目は表示の確認です。

84
00:06:42.440 --> 00:06:51.346
三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも、見出しや本文が欠けたり重なったりしないかを見てください。

85
00:06:51.346 --> 00:06:57.595
最後に、開発者ツールでソースと実際の構造が食い違っていないか確かめると安心です。

86
00:06:57.595 --> 00:07:03.376
閉じタグの書き忘れは、ブラウザーが自動で補正して構造を崩す原因になります。

87
00:07:03.376 --> 00:07:05.298
最後に練習とまとめです。

88
00:07:05.298 --> 00:07:10.264
セクションは、見出しのある主題ごとのまとまりを示すタグでした。

89
00:07:10.264 --> 00:07:12.346
大切なポイントは三つです。

90
00:07:12.346 --> 00:07:15.870
一つ目は、見出しと内容を必ず一組にすること。

91
00:07:15.870 --> 00:07:22.597
二つ目は、装飾だけの箱にはディブを使い、意味のある区切りにだけセクションを使うこと。

92
00:07:22.597 --> 00:07:28.684
三つ目は、アーティクルやアサイド、ナブとは、内容の役割で使い分けることです。

93
00:07:28.684 --> 00:07:33.890
練習として、自己紹介や学習会のお知らせなど、身近なページを三つの話題に分け、

94
00:07:33.890 --> 00:07:39.095
それぞれを見出し付きのセクションで囲んでみてください。

95
00:07:39.095 --> 00:07:44.862
小さく試して構造を確認する積み重ねが、読みやすいページ作りへの近道です。

96
00:07:44.862 --> 00:07:46.303
お疲れさまでした。

97
00:07:46.303 --> 00:07:50.468
次回もエイチティーエムエルタグの解説を続けましょう。