SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのmainタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:17動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の五十四本目は、メインタグです。
  4. 0:08メインは、そのページで一番伝えたい、中心となる内容を包むためのタグです。
  5. 0:13ブログなら記事本文、申し込みページなら申し込み方法の説明がメインに入ります。
  6. 0:18ページの上部にある共通メニューや、下部にあるフッターとは役割がまったく違います。
  7. 0:24今回は、メインをどこに置くか、一つだけにするルール、本文へ直接ジャンプする活用例まで、
  8. 0:28順に学んでいきましょう。
  9. 0:31ページの主役を明確に示すことが、このタグの役割です。
  10. 0:35初めてページを作る人でも、メインの場所を意識するだけで、文書の骨組みがぐっと分かりやすくなります。
  11. 0:42まず、どんな場面で使うかを整理します。
  12. 0:45目安は、そのページごとに変わる内容かどうかです。
  13. 0:49たとえば学習サイトなら、講座の説明や参加方法など、ページ固有の情報がメインに入ります。
  14. 0:56一方で、どのページにも共通して出てくるサイト名、共通メニュー、コピーライトなどは、
  15. 1:01メインの外に置くのが基本です。
  16. 1:05ページを開いたときに、利用者が一番読むべき部分はどこかを考えると、範囲が自然に決まります。
  17. 1:13迷ったら、タイトルと本文が入る場所がメインだと覚えておきましょう。
  18. 1:18商品ページなら写真と価格と購入案内、講座ページなら日程と申し込み方法、というように主役はページごとに変わります。
  19. 1:28基本の形を確認します。
  20. 1:29画面の例のように、ボディの中にヘッダー、メイン、フッターを上から順に並べるのが典型的な配置です。
  21. 1:37メインは開始タグと終了タグをきちんと書き、その中に見出しや段落、セクションなどを入れます。
  22. 1:45見た目の色や余白はシーエスエスで調整し、メイン自体は意味を示すための入れ物だと考えてください。
  23. 1:52まずはこの三段構成の形を覚えることが大切です。
  24. 1:56この並びが身につくと、他のページを作るときも迷わず骨組みを書けるようになります。
  25. 2:03ファイル名はインデックス、ドット、エイチティーエムエルなど、既に作った練習ファイルでそのまま試すと理解が早まります。
  26. 2:12ここで一番大切なルールを押さえます。
  27. 2:16表示されているメインは、一つのページにつき一つだけにします。
  28. 2:21主役は一人だけ、と覚えてください。
  29. 2:24複数の画面を一つの文書に持つ場合でも、画面に表示されているメインは一つにそろえます。
  30. 2:31非表示にしているメインについては例外的な扱いがありますが、初心者のうちは、
  31. 2:36メインは一つだけ書くと決めておくのが安全です。
  32. 2:41もし二つ書いてしまったら、どちらが本当の中心なのかを考えて、一方をセクションやディブに置き換えましょう。
  33. 2:50検索結果や読み上げではメインが本文の入口として扱われるため、一つに絞ることが利用者への案内にもつながります。
  34. 3:00属性について確認します。
  35. 3:02メインには、必ず付けなければならない専用の属性はありません。
  36. 3:07代わりに、どの要素にも使える共通属性を必要に応じて使います。
  37. 3:11代表はアイディーで、文書の中で一つだけの名前を付け、ページ内リンクの飛び先やジャバスクリプトからの参照に使います。
  38. 3:21クラスはシーエスエスでまとめて選ぶため、ラングは内容の言語を示すため、データ属性はアプリ独自の値を保持するために使います。
  39. 3:31子要素の属性と混同しないよう、メイン自体に付ける属性は絞り込みましょう。
  40. 3:37アイディーはページ内リンクで使うため、短く分かりやすい英語で付けると、後から見返したときにも意図が伝わります。
  41. 3:46記事の活用事例を読み解きます。
  42. 3:48画面の例は、本文へ移動というリンクをページの先頭に置き、クリックするとメインへ直接ジャンプできるようにしたものです。
  43. 3:57リンク側のエイチアールイーエフにはシャープ付きでメインコンテンツと書き、
  44. 4:02メイン側のアイディーと一文字も違わず一致させます。
  45. 4:07キーボードだけで操作する人や、読み上げソフトを使う人にとって、長いメニューを毎回たどらずに本文へ進めるのは大きな助けになります。
  46. 4:17小さな工夫ですが、アクセシビリティを高める代表的な使い方です。
  47. 4:22実際に作るときは、リンクをボディの最初に置き、タブキーを押したときに最初に選ばれるようにするのがポイントです。
  48. 4:30メインの中身の作り方を見ていきます。
  49. 4:33まずエイチワンでページ全体の主題を示し、その下を話題ごとにセクションで分けていくと、
  50. 4:37読みやすい構造になります。
  51. 4:41一つひとつが独立した記事として成り立つ内容なら、アーティクルを使うことも検討できます。
  52. 4:48大切なのは、メインがページの中心であることを、中の見出し階層でも崩さないことです。
  53. 4:54見出しのレベルを飛ばさず順に使うと、読み上げでも目次が正しく伝わります。
  54. 4:59入れ物と中身の意味をそろえることが、良い構造への近道です。
  55. 5:04文章が長くなる場合は、段落を分けたりリストを使ったりして、メインの中で情報のまとまりを見失わないようにしましょう。
  56. 5:12関連する要素との分担を確認します。
  57. 5:15ヘッダーはページやセクションの導入部分で、サイト名や概要を置きます。
  58. 5:21ナブは主要なナビゲーションリンクの集まり、アサイドは本文を補う関連情報や広告などの補足、
  59. 5:28フッターは著作権や連絡先など締めくくりの情報です。
  60. 5:34これら共通要素は原則としてメインの外に置き、メインにはそのページ固有の中心内容だけを入れます。
  61. 5:42役割分担がはっきりすると、検索エンジンや支援技術にもページ構造が正確に伝わり、
  62. 5:47利用者も迷いにくくなります。
  63. 5:52たとえばお知らせ一覧へのリンク集がナブ、記事の横にある関連リンクがアサイド、
  64. 5:57というように場所と役割で区別します。
  65. 6:02つまずきやすい注意点をまとめます。
  66. 6:05一つ目は、メインの中に別のメインを入れる入れ子はできないことです。
  67. 6:12二つ目は、配置場所の制約です。
  68. 6:14メインは原則としてボディの直下など、適切な場所に置き、アーティクルやセクションなどの子孫として置く書き方は仕様で認められていないため避けます。
  69. 6:28三つ目は、余白や中央寄せといった見た目のためだけにメインを使うことです。
  70. 6:34レイアウトはシーエスエスに任せ、メインは意味で選びましょう。
  71. 6:40作ったあとは開発者ツールで入れ子が崩れていないか確認する習慣も大切です。
  72. 6:47ブラウザーが自動で直して表示している場合もあるので、ソースだけでなく実際の表示と構造の両方を確認しましょう。
  73. 6:57ブラウザー互換性を確認します。
  74. 6:59記事が参照するエムディーエヌの記録では、メイン要素はクロームが二十六以降、
  75. 7:04エッジが十二以降、ファイアフォックスが二十一以降、サファリが七以降で対応し、
  76. 7:09現在の主要ブラウザーでは安心して使えます。
  77. 7:14ただし対応していることと、正しく使えていることは別です。
  78. 7:18公開前には、タブキーで本文へ移動リンクからメインへ進めるか、三百二十ピクセル程度の細い画面でも内容が欠けないか、
  79. 7:24文字を拡大しても読めるかをあわせて確認してください。
  80. 7:30古いブラウザー向けの特別な対策は現在はほぼ不要ですが、社内システムなどでは対象環境を事前に確認しておくと安心です。
  81. 7:39最後にまとめです。
  82. 7:40メインタグは、そのページの中心となる内容を示す要素でした。
  83. 7:44ポイントは三つです。
  84. 7:45一つ目、ページごとに変わる主役の内容をメインで包み、共通メニューやフッターは外に置くこと。
  85. 7:51二つ目、表示中のメインは一つだけにすること。
  86. 7:54三つ目、アイディーを付けて本文へ移動するリンクと組み合わせると、キーボード利用者が本文へ直接進めるようになることです。
  87. 8:03練習として、ヘッダー、メイン、フッターの三段構成のページを一枚作ってみてください。
  88. 8:08お疲れさまでした。
  89. 8:09この考え方は他のセマンティック要素にも通じるので、ヘッダーやフッターと一緒に少しずつ使い分けていきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

mainタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。そのページの中心となる内容。通常は表示中の main を1つにします。

解説記事・サンプルコードを読む：HTMLのmainタグとは？属性・使い方・ブラウザー互換性と活用例 →