SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の百一本目は、ボディタグです。
  4. 0:08ボディは、見出し、文章、画像、フォームなど、利用者が実際に目で見て読むページ本体を入れる要素です。
  5. 0:15画面に表示される内容は、原則としてすべてボディの中にあります。
  6. 0:20今回は、ボディの意味、ヘッドとの関係、基本の書き方、属性、コード例、ブラウザー互換性、
  7. 0:25そしてよくある間違いまで順番に確認します。
  8. 0:29すべてのページの土台になる要素なので、文書全体の構造からしっかり理解しましょう。
  9. 0:35どんなに短いページでも、ボディなしに表示内容は成り立ちません。
  10. 0:40まず、ボディの役割を整理します。
  11. 0:42ボディは、その文書で利用者に届ける表示内容の入れ物です。
  12. 0:46ページをヘッダーやメイン、フッターといった部品に分けて作っても、ボディ自体は文書に一つだけです。
  13. 0:53たとえばリアクトのような部品単位の開発でも、部品ごとにボディを出力してはいけません。
  14. 0:59ボディが複数あると、ブラウザーが構造を補正してしまい、意図しない表示や読み上げになることがあります。
  15. 1:06表示部分を分けたいときは、ボディの中をセクションやメインなどで分けるのが正しい方法です。
  16. 1:12言い換えると、ボディの範囲が、そのまま利用者に届く範囲になります。
  17. 1:17次に、ヘッドとの関係を確認します。
  18. 1:19エイチティーエムエル文書は、ルートであるエイチティーエムエル要素の中に、
  19. 1:23ヘッドとボディが並ぶ構造です。
  20. 1:28ヘッドには、タイトルや文字コード、シーエスエスの読み込みなど、表示を支える設定情報を入れます。
  21. 1:35一方、ボディには、利用者が読む見出しや文章そのものを入れます。
  22. 1:40タブに表示されるタイトルはヘッド、ページ本文の見出しはボディ、と置き場所を分けて覚えてください。
  23. 1:48この二つの役割分担が、文書構造の出発点になります。
  24. 1:52逆に、画面に文章を表示したいのにヘッドへ書いても、本文としては表示されません。
  25. 1:58基本の書き方を見ていきます。
  26. 2:01この教材では、開始タグと終了タグを明示して書きます。
  27. 2:05配置は、ヘッドの直後で、エイチティーエムエル要素の直接の子です。
  28. 2:10ボディの中には、表示したい見出しや段落、画像などを、読み手に伝わる順番で書いていきます。
  29. 2:17仕様上はタグを省略できる場合もありますが、学習段階では省略せずに書くほうが、
  30. 2:23構造の区切りが一目で分かり、入れ子の間違いにも気付きやすくなります。
  31. 2:29まずはこの形を手で書けるようになることが目標です。
  32. 2:33書き出しに迷ったら、まずヘッドを閉じてからボディを開く順番を意識してください。
  33. 2:39属性を確認します。
  34. 2:40ボディには、記事で必須とされる専用の属性はありません。
  35. 2:44通常は属性なしで使うことがほとんどです。
  36. 2:47必要に応じて、アイディーやクラス、ラングといった、多くの要素で共通して使えるグローバル属性を指定できます。
  37. 2:55たとえば、トップページと下層ページでクラスを分けておくと、ページ全体に関わるシーエスエスやジャバスクリプトの切り替えがしやすくなります。
  38. 3:04ただし、子要素に付けるべき属性と混同しないようにしてください。
  39. 3:09見た目の細かな指定は、原則としてシーエスエス側で行います。
  40. 3:13クラス名は、ページの種類が後から見ても分かる名前を付けるのがおすすめです。
  41. 3:18イベント属性と、昔の属性についても触れておきます。
  42. 3:22ボディはウィンドウと関わりが深いため、ページの読み込みが終わったときなどに処理を行う、
  43. 3:26イベントハンドラー属性が関係する場合があります。
  44. 3:30ただし、現在の制作では、処理はジャバスクリプトのファイル側にまとめ、エイチティーエムエルには最小限だけ書くのが一般的です。
  45. 3:38また、昔使われていた背景色などの属性は、現在の標準では使いません。
  46. 3:43背景色や文字色、行間といった見た目は、シーエスエスのボディセレクターで指定してください。
  47. 3:48属性で見た目を変える古い書き方を見たら、シーエスエスへの置き換えを検討してください。
  48. 3:54記事の活用事例をもとに、コード例を確認します。
  49. 3:57ボディの中に、ヘッダー、メイン、フッターを順番に並べています。
  50. 4:02ヘッダーにはサイト名、メインにはページの見出しと案内文、フッターには著作権などの小さな情報を置く構成です。
  51. 4:10書き終えたら保存して再読み込みし、表示内容の土台として目的に合う構造になったかを、
  52. 4:14開発者ツールのエレメンツで確認してください。
  53. 4:19ソースと実際の構造が違う場合は、不正な入れ子によってブラウザーが補正していないか調べることが大切です。
  54. 4:27この三つの並びは、多くの案内ページや紹介ページでもそのまま使える基本形です。
  55. 4:32ボディの中の組み立て方も押さえておきましょう。
  56. 4:36ボディは入れ物なので、その中身を意味のある要素で組み立てることが読みやすさにつながります。
  57. 4:43ページの中心となる内容はメイン、案内や移動のまとまりはナブやヘッダー、締めくくりの情報はフッターといった具合です。
  58. 4:51書いた順番は、そのまま読み上げソフトが読む順番にもなります。
  59. 4:56見た目の並びだけを先に決めるのではなく、内容の順番として自然かどうかを確認してください。
  60. 5:03土台が正しいと、シーエスエスでの配置も素直に決まります。
  61. 5:07特にメインはページの中心なので、最初に読んでほしい内容から順に置きましょう。
  62. 5:13ブラウザー互換性を確認します。
  63. 5:15記事が紹介するエムディーエヌのデータでは、ボディ要素本体は、クロームが一以降、
  64. 5:20エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  65. 5:25エイチティーエムエルの中でも最も基本的な要素の一つで、現在の主要ブラウザーで問題なく使えます。
  66. 5:32スマートフォンのブラウザーでも同様です。
  67. 5:34心配なのは互換性そのものよりも、ボディを複数置くような構造の間違いのほうです。
  68. 5:40新しい属性やエーピーアイを使う場合は、本体とは別に対応状況を確認してください。
  69. 5:45対応が広いからこそ、書き方を統一しておくと、どの環境でも同じ構造で運用できます。
  70. 5:50実装前後のチェック項目を確認します。
  71. 5:53まず、ボディの目的が表示内容の土台を作ることに合っているか、タグ名ではなく内容の意味から判断してください。
  72. 6:00次に、リンクやフォームを含む場合は、タブキーやエンターキーなど標準の操作で利用できるかを確認します。
  73. 6:07さらに、三百二十ピクセル程度の画面幅や、文字を拡大したときにも、内容や操作部分が欠けないかを試してください。
  74. 6:14タイトルやメタ情報のような設定が、誤ってボディ側に紛れ込んでいないかも合わせて見直しましょう。
  75. 6:21確認は、作り終えた直後だけでなく、内容を追加したときにも繰り返すと安心です。
  76. 6:26まとめとして、よくある間違いを三つ挙げます。
  77. 6:30一つ目は、ボディを複数置いてしまうことです。
  78. 6:34ボディは文書に一つだけにしてください。
  79. 6:37二つ目は、タイトルや文字コードのようなヘッドの内容を、ボディに書いてしまうことです。
  80. 6:45設定はヘッド、表示はボディと分けてください。
  81. 6:49三つ目は、背景色などを古い属性で指定することです。
  82. 6:54見た目はシーエスエスで指定します。
  83. 6:57ボディは、利用者が読む表示内容すべてを包む土台です。
  84. 7:01これでボディタグの解説を終わります。
  85. 7:05まずはヘッダー、メイン、フッターの三つをボディに並べる練習から始めてみてください。
  86. 7:12迷ったときは、表示するものかどうかを問い直すことが、正しい置き場所への近道です。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

bodyタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。見出し、文章、画像、フォームなど、利用者が読むページ本体を置きます。

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