WEBVTT

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

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

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

4
00:00:08.041 --> 00:00:13.119
メインは、そのページで一番伝えたい、中心となる内容を包むためのタグです。

5
00:00:13.119 --> 00:00:18.479
ブログなら記事本文、申し込みページなら申し込み方法の説明がメインに入ります。

6
00:00:18.479 --> 00:00:24.122
ページの上部にある共通メニューや、下部にあるフッターとは役割がまったく違います。

7
00:00:24.122 --> 00:00:28.001
今回は、メインをどこに置くか、一つだけにするルール、本文へ直接ジャンプする活用例まで、

8
00:00:28.001 --> 00:00:31.880
順に学んでいきましょう。

9
00:00:31.880 --> 00:00:35.548
ページの主役を明確に示すことが、このタグの役割です。

10
00:00:35.548 --> 00:00:42.460
初めてページを作る人でも、メインの場所を意識するだけで、文書の骨組みがぐっと分かりやすくなります。

11
00:00:42.460 --> 00:00:45.601
まず、どんな場面で使うかを整理します。

12
00:00:45.601 --> 00:00:49.569
目安は、そのページごとに変わる内容かどうかです。

13
00:00:49.569 --> 00:00:56.677
たとえば学習サイトなら、講座の説明や参加方法など、ページ固有の情報がメインに入ります。

14
00:00:56.677 --> 00:01:01.306
一方で、どのページにも共通して出てくるサイト名、共通メニュー、コピーライトなどは、

15
00:01:01.306 --> 00:01:05.935
メインの外に置くのが基本です。

16
00:01:05.935 --> 00:01:13.375
ページを開いたときに、利用者が一番読むべき部分はどこかを考えると、範囲が自然に決まります。

17
00:01:13.375 --> 00:01:18.830
迷ったら、タイトルと本文が入る場所がメインだと覚えておきましょう。

18
00:01:18.830 --> 00:01:28.088
商品ページなら写真と価格と購入案内、講座ページなら日程と申し込み方法、というように主役はページごとに変わります。

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

20
00:01:29.902 --> 00:01:37.819
画面の例のように、ボディの中にヘッダー、メイン、フッターを上から順に並べるのが典型的な配置です。

21
00:01:37.819 --> 00:01:45.240
メインは開始タグと終了タグをきちんと書き、その中に見出しや段落、セクションなどを入れます。

22
00:01:45.240 --> 00:01:52.992
見た目の色や余白はシーエスエスで調整し、メイン自体は意味を示すための入れ物だと考えてください。

23
00:01:52.992 --> 00:01:56.785
まずはこの三段構成の形を覚えることが大切です。

24
00:01:56.785 --> 00:02:03.382
この並びが身につくと、他のページを作るときも迷わず骨組みを書けるようになります。

25
00:02:03.382 --> 00:02:12.948
ファイル名はインデックス、ドット、エイチティーエムエルなど、既に作った練習ファイルでそのまま試すと理解が早まります。

26
00:02:12.948 --> 00:02:16.056
ここで一番大切なルールを押さえます。

27
00:02:16.056 --> 00:02:21.236
表示されているメインは、一つのページにつき一つだけにします。

28
00:02:21.236 --> 00:02:24.172
主役は一人だけ、と覚えてください。

29
00:02:24.172 --> 00:02:31.424
複数の画面を一つの文書に持つ場合でも、画面に表示されているメインは一つにそろえます。

30
00:02:31.424 --> 00:02:36.604
非表示にしているメインについては例外的な扱いがありますが、初心者のうちは、

31
00:02:36.604 --> 00:02:41.785
メインは一つだけ書くと決めておくのが安全です。

32
00:02:41.785 --> 00:02:50.764
もし二つ書いてしまったら、どちらが本当の中心なのかを考えて、一方をセクションやディブに置き換えましょう。

33
00:02:50.764 --> 00:03:00.088
検索結果や読み上げではメインが本文の入口として扱われるため、一つに絞ることが利用者への案内にもつながります。

34
00:03:00.088 --> 00:03:02.067
属性について確認します。

35
00:03:02.067 --> 00:03:07.015
メインには、必ず付けなければならない専用の属性はありません。

36
00:03:07.015 --> 00:03:11.964
代わりに、どの要素にも使える共通属性を必要に応じて使います。

37
00:03:11.964 --> 00:03:21.365
代表はアイディーで、文書の中で一つだけの名前を付け、ページ内リンクの飛び先やジャバスクリプトからの参照に使います。

38
00:03:21.365 --> 00:03:31.427
クラスはシーエスエスでまとめて選ぶため、ラングは内容の言語を示すため、データ属性はアプリ独自の値を保持するために使います。

39
00:03:31.427 --> 00:03:37.364
子要素の属性と混同しないよう、メイン自体に付ける属性は絞り込みましょう。

40
00:03:37.364 --> 00:03:46.436
アイディーはページ内リンクで使うため、短く分かりやすい英語で付けると、後から見返したときにも意図が伝わります。

41
00:03:46.436 --> 00:03:48.789
記事の活用事例を読み解きます。

42
00:03:48.789 --> 00:03:57.887
画面の例は、本文へ移動というリンクをページの先頭に置き、クリックするとメインへ直接ジャンプできるようにしたものです。

43
00:03:57.887 --> 00:04:02.671
リンク側のエイチアールイーエフにはシャープ付きでメインコンテンツと書き、

44
00:04:02.671 --> 00:04:07.455
メイン側のアイディーと一文字も違わず一致させます。

45
00:04:07.455 --> 00:04:17.494
キーボードだけで操作する人や、読み上げソフトを使う人にとって、長いメニューを毎回たどらずに本文へ進めるのは大きな助けになります。

46
00:04:17.494 --> 00:04:22.357
小さな工夫ですが、アクセシビリティを高める代表的な使い方です。

47
00:04:22.357 --> 00:04:30.984
実際に作るときは、リンクをボディの最初に置き、タブキーを押したときに最初に選ばれるようにするのがポイントです。

48
00:04:30.984 --> 00:04:33.661
メインの中身の作り方を見ていきます。

49
00:04:33.661 --> 00:04:37.752
まずエイチワンでページ全体の主題を示し、その下を話題ごとにセクションで分けていくと、

50
00:04:37.752 --> 00:04:41.842
読みやすい構造になります。

51
00:04:41.842 --> 00:04:48.238
一つひとつが独立した記事として成り立つ内容なら、アーティクルを使うことも検討できます。

52
00:04:48.238 --> 00:04:54.337
大切なのは、メインがページの中心であることを、中の見出し階層でも崩さないことです。

53
00:04:54.337 --> 00:04:59.692
見出しのレベルを飛ばさず順に使うと、読み上げでも目次が正しく伝わります。

54
00:04:59.692 --> 00:05:04.006
入れ物と中身の意味をそろえることが、良い構造への近道です。

55
00:05:04.006 --> 00:05:12.484
文章が長くなる場合は、段落を分けたりリストを使ったりして、メインの中で情報のまとまりを見失わないようにしましょう。

56
00:05:12.484 --> 00:05:15.572
関連する要素との分担を確認します。

57
00:05:15.572 --> 00:05:21.749
ヘッダーはページやセクションの導入部分で、サイト名や概要を置きます。

58
00:05:21.749 --> 00:05:28.016
ナブは主要なナビゲーションリンクの集まり、アサイドは本文を補う関連情報や広告などの補足、

59
00:05:28.016 --> 00:05:34.284
フッターは著作権や連絡先など締めくくりの情報です。

60
00:05:34.284 --> 00:05:42.822
これら共通要素は原則としてメインの外に置き、メインにはそのページ固有の中心内容だけを入れます。

61
00:05:42.822 --> 00:05:47.636
役割分担がはっきりすると、検索エンジンや支援技術にもページ構造が正確に伝わり、

62
00:05:47.636 --> 00:05:52.451
利用者も迷いにくくなります。

63
00:05:52.451 --> 00:05:57.537
たとえばお知らせ一覧へのリンク集がナブ、記事の横にある関連リンクがアサイド、

64
00:05:57.537 --> 00:06:02.624
というように場所と役割で区別します。

65
00:06:02.624 --> 00:06:05.818
つまずきやすい注意点をまとめます。

66
00:06:05.818 --> 00:06:12.019
一つ目は、メインの中に別のメインを入れる入れ子はできないことです。

67
00:06:12.019 --> 00:06:14.838
二つ目は、配置場所の制約です。

68
00:06:14.838 --> 00:06:28.179
メインは原則としてボディの直下など、適切な場所に置き、アーティクルやセクションなどの子孫として置く書き方は仕様で認められていないため避けます。

69
00:06:28.179 --> 00:06:34.944
三つ目は、余白や中央寄せといった見た目のためだけにメインを使うことです。

70
00:06:34.944 --> 00:06:40.581
レイアウトはシーエスエスに任せ、メインは意味で選びましょう。

71
00:06:40.581 --> 00:06:47.345
作ったあとは開発者ツールで入れ子が崩れていないか確認する習慣も大切です。

72
00:06:47.345 --> 00:06:57.492
ブラウザーが自動で直して表示している場合もあるので、ソースだけでなく実際の表示と構造の両方を確認しましょう。

73
00:06:57.492 --> 00:06:59.748
ブラウザー互換性を確認します。

74
00:06:59.748 --> 00:07:04.561
記事が参照するエムディーエヌの記録では、メイン要素はクロームが二十六以降、

75
00:07:04.561 --> 00:07:09.374
エッジが十二以降、ファイアフォックスが二十一以降、サファリが七以降で対応し、

76
00:07:09.374 --> 00:07:14.187
現在の主要ブラウザーでは安心して使えます。

77
00:07:14.187 --> 00:07:18.398
ただし対応していることと、正しく使えていることは別です。

78
00:07:18.398 --> 00:07:24.565
公開前には、タブキーで本文へ移動リンクからメインへ進めるか、三百二十ピクセル程度の細い画面でも内容が欠けないか、

79
00:07:24.565 --> 00:07:30.731
文字を拡大しても読めるかをあわせて確認してください。

80
00:07:30.731 --> 00:07:39.304
古いブラウザー向けの特別な対策は現在はほぼ不要ですが、社内システムなどでは対象環境を事前に確認しておくと安心です。

81
00:07:39.304 --> 00:07:40.531
最後にまとめです。

82
00:07:40.531 --> 00:07:44.485
メインタグは、そのページの中心となる内容を示す要素でした。

83
00:07:44.485 --> 00:07:45.848
ポイントは三つです。

84
00:07:45.848 --> 00:07:51.983
一つ目、ページごとに変わる主役の内容をメインで包み、共通メニューやフッターは外に置くこと。

85
00:07:51.983 --> 00:07:54.982
二つ目、表示中のメインは一つだけにすること。

86
00:07:54.982 --> 00:08:03.026
三つ目、アイディーを付けて本文へ移動するリンクと組み合わせると、キーボード利用者が本文へ直接進めるようになることです。

87
00:08:03.026 --> 00:08:08.615
練習として、ヘッダー、メイン、フッターの三段構成のページを一枚作ってみてください。

88
00:08:08.615 --> 00:08:09.842
お疲れさまでした。

89
00:08:09.842 --> 00:08:17.204
この考え方は他のセマンティック要素にも通じるので、ヘッダーやフッターと一緒に少しずつ使い分けていきましょう。