WEBVTT

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

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

3
00:00:04.066 --> 00:00:08.283
エイチティーエムエルタグ編の百一本目は、ボディタグです。

4
00:00:08.283 --> 00:00:15.662
ボディは、見出し、文章、画像、フォームなど、利用者が実際に目で見て読むページ本体を入れる要素です。

5
00:00:15.662 --> 00:00:20.330
画面に表示される内容は、原則としてすべてボディの中にあります。

6
00:00:20.330 --> 00:00:25.149
今回は、ボディの意味、ヘッドとの関係、基本の書き方、属性、コード例、ブラウザー互換性、

7
00:00:25.149 --> 00:00:29.968
そしてよくある間違いまで順番に確認します。

8
00:00:29.968 --> 00:00:35.992
すべてのページの土台になる要素なので、文書全体の構造からしっかり理解しましょう。

9
00:00:35.992 --> 00:00:40.660
どんなに短いページでも、ボディなしに表示内容は成り立ちません。

10
00:00:40.660 --> 00:00:42.892
まず、ボディの役割を整理します。

11
00:00:42.892 --> 00:00:46.798
ボディは、その文書で利用者に届ける表示内容の入れ物です。

12
00:00:46.798 --> 00:00:53.495
ページをヘッダーやメイン、フッターといった部品に分けて作っても、ボディ自体は文書に一つだけです。

13
00:00:53.495 --> 00:00:59.354
たとえばリアクトのような部品単位の開発でも、部品ごとにボディを出力してはいけません。

14
00:00:59.354 --> 00:01:06.330
ボディが複数あると、ブラウザーが構造を補正してしまい、意図しない表示や読み上げになることがあります。

15
00:01:06.330 --> 00:01:12.468
表示部分を分けたいときは、ボディの中をセクションやメインなどで分けるのが正しい方法です。

16
00:01:12.468 --> 00:01:17.072
言い換えると、ボディの範囲が、そのまま利用者に届く範囲になります。

17
00:01:17.072 --> 00:01:19.822
次に、ヘッドとの関係を確認します。

18
00:01:19.822 --> 00:01:23.948
エイチティーエムエル文書は、ルートであるエイチティーエムエル要素の中に、

19
00:01:23.948 --> 00:01:28.073
ヘッドとボディが並ぶ構造です。

20
00:01:28.073 --> 00:01:35.677
ヘッドには、タイトルや文字コード、シーエスエスの読み込みなど、表示を支える設定情報を入れます。

21
00:01:35.677 --> 00:01:40.692
一方、ボディには、利用者が読む見出しや文章そのものを入れます。

22
00:01:40.692 --> 00:01:48.458
タブに表示されるタイトルはヘッド、ページ本文の見出しはボディ、と置き場所を分けて覚えてください。

23
00:01:48.458 --> 00:01:52.502
この二つの役割分担が、文書構造の出発点になります。

24
00:01:52.502 --> 00:01:58.812
逆に、画面に文章を表示したいのにヘッドへ書いても、本文としては表示されません。

25
00:01:58.812 --> 00:02:01.060
基本の書き方を見ていきます。

26
00:02:01.060 --> 00:02:05.235
この教材では、開始タグと終了タグを明示して書きます。

27
00:02:05.235 --> 00:02:10.374
配置は、ヘッドの直後で、エイチティーエムエル要素の直接の子です。

28
00:02:10.374 --> 00:02:17.440
ボディの中には、表示したい見出しや段落、画像などを、読み手に伝わる順番で書いていきます。

29
00:02:17.440 --> 00:02:23.221
仕様上はタグを省略できる場合もありますが、学習段階では省略せずに書くほうが、

30
00:02:23.221 --> 00:02:29.002
構造の区切りが一目で分かり、入れ子の間違いにも気付きやすくなります。

31
00:02:29.002 --> 00:02:33.017
まずはこの形を手で書けるようになることが目標です。

32
00:02:33.017 --> 00:02:39.280
書き出しに迷ったら、まずヘッドを閉じてからボディを開く順番を意識してください。

33
00:02:39.280 --> 00:02:40.582
属性を確認します。

34
00:02:40.582 --> 00:02:44.487
ボディには、記事で必須とされる専用の属性はありません。

35
00:02:44.487 --> 00:02:47.379
通常は属性なしで使うことがほとんどです。

36
00:02:47.379 --> 00:02:55.044
必要に応じて、アイディーやクラス、ラングといった、多くの要素で共通して使えるグローバル属性を指定できます。

37
00:02:55.044 --> 00:03:04.879
たとえば、トップページと下層ページでクラスを分けておくと、ページ全体に関わるシーエスエスやジャバスクリプトの切り替えがしやすくなります。

38
00:03:04.879 --> 00:03:09.363
ただし、子要素に付けるべき属性と混同しないようにしてください。

39
00:03:09.363 --> 00:03:13.557
見た目の細かな指定は、原則としてシーエスエス側で行います。

40
00:03:13.557 --> 00:03:18.908
クラス名は、ページの種類が後から見ても分かる名前を付けるのがおすすめです。

41
00:03:18.908 --> 00:03:22.177
イベント属性と、昔の属性についても触れておきます。

42
00:03:22.177 --> 00:03:26.559
ボディはウィンドウと関わりが深いため、ページの読み込みが終わったときなどに処理を行う、

43
00:03:26.559 --> 00:03:30.940
イベントハンドラー属性が関係する場合があります。

44
00:03:30.940 --> 00:03:38.917
ただし、現在の制作では、処理はジャバスクリプトのファイル側にまとめ、エイチティーエムエルには最小限だけ書くのが一般的です。

45
00:03:38.917 --> 00:03:43.233
また、昔使われていた背景色などの属性は、現在の標準では使いません。

46
00:03:43.233 --> 00:03:48.987
背景色や文字色、行間といった見た目は、シーエスエスのボディセレクターで指定してください。

47
00:03:48.987 --> 00:03:54.480
属性で見た目を変える古い書き方を見たら、シーエスエスへの置き換えを検討してください。

48
00:03:54.480 --> 00:03:57.884
記事の活用事例をもとに、コード例を確認します。

49
00:03:57.884 --> 00:04:02.472
ボディの中に、ヘッダー、メイン、フッターを順番に並べています。

50
00:04:02.472 --> 00:04:10.316
ヘッダーにはサイト名、メインにはページの見出しと案内文、フッターには著作権などの小さな情報を置く構成です。

51
00:04:10.316 --> 00:04:14.978
書き終えたら保存して再読み込みし、表示内容の土台として目的に合う構造になったかを、

52
00:04:14.978 --> 00:04:19.640
開発者ツールのエレメンツで確認してください。

53
00:04:19.640 --> 00:04:27.188
ソースと実際の構造が違う場合は、不正な入れ子によってブラウザーが補正していないか調べることが大切です。

54
00:04:27.188 --> 00:04:32.812
この三つの並びは、多くの案内ページや紹介ページでもそのまま使える基本形です。

55
00:04:32.812 --> 00:04:36.331
ボディの中の組み立て方も押さえておきましょう。

56
00:04:36.331 --> 00:04:43.215
ボディは入れ物なので、その中身を意味のある要素で組み立てることが読みやすさにつながります。

57
00:04:43.215 --> 00:04:51.935
ページの中心となる内容はメイン、案内や移動のまとまりはナブやヘッダー、締めくくりの情報はフッターといった具合です。

58
00:04:51.935 --> 00:04:56.524
書いた順番は、そのまま読み上げソフトが読む順番にもなります。

59
00:04:56.524 --> 00:05:03.255
見た目の並びだけを先に決めるのではなく、内容の順番として自然かどうかを確認してください。

60
00:05:03.255 --> 00:05:07.539
土台が正しいと、シーエスエスでの配置も素直に決まります。

61
00:05:07.539 --> 00:05:13.352
特にメインはページの中心なので、最初に読んでほしい内容から順に置きましょう。

62
00:05:13.352 --> 00:05:15.364
ブラウザー互換性を確認します。

63
00:05:15.364 --> 00:05:20.662
記事が紹介するエムディーエヌのデータでは、ボディ要素本体は、クロームが一以降、

64
00:05:20.662 --> 00:05:25.959
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

65
00:05:25.959 --> 00:05:32.263
エイチティーエムエルの中でも最も基本的な要素の一つで、現在の主要ブラウザーで問題なく使えます。

66
00:05:32.263 --> 00:05:34.946
スマートフォンのブラウザーでも同様です。

67
00:05:34.946 --> 00:05:40.176
心配なのは互換性そのものよりも、ボディを複数置くような構造の間違いのほうです。

68
00:05:40.176 --> 00:05:45.407
新しい属性やエーピーアイを使う場合は、本体とは別に対応状況を確認してください。

69
00:05:45.407 --> 00:05:50.772
対応が広いからこそ、書き方を統一しておくと、どの環境でも同じ構造で運用できます。

70
00:05:50.772 --> 00:05:53.243
実装前後のチェック項目を確認します。

71
00:05:53.243 --> 00:06:00.519
まず、ボディの目的が表示内容の土台を作ることに合っているか、タグ名ではなく内容の意味から判断してください。

72
00:06:00.519 --> 00:06:07.383
次に、リンクやフォームを含む場合は、タブキーやエンターキーなど標準の操作で利用できるかを確認します。

73
00:06:07.383 --> 00:06:14.795
さらに、三百二十ピクセル程度の画面幅や、文字を拡大したときにも、内容や操作部分が欠けないかを試してください。

74
00:06:14.795 --> 00:06:21.247
タイトルやメタ情報のような設定が、誤ってボディ側に紛れ込んでいないかも合わせて見直しましょう。

75
00:06:21.247 --> 00:06:26.464
確認は、作り終えた直後だけでなく、内容を追加したときにも繰り返すと安心です。

76
00:06:26.464 --> 00:06:30.462
まとめとして、よくある間違いを三つ挙げます。

77
00:06:30.462 --> 00:06:34.460
一つ目は、ボディを複数置いてしまうことです。

78
00:06:34.460 --> 00:06:37.913
ボディは文書に一つだけにしてください。

79
00:06:37.913 --> 00:06:45.545
二つ目は、タイトルや文字コードのようなヘッドの内容を、ボディに書いてしまうことです。

80
00:06:45.545 --> 00:06:49.543
設定はヘッド、表示はボディと分けてください。

81
00:06:49.543 --> 00:06:54.087
三つ目は、背景色などを古い属性で指定することです。

82
00:06:54.087 --> 00:06:57.176
見た目はシーエスエスで指定します。

83
00:06:57.176 --> 00:07:01.901
ボディは、利用者が読む表示内容すべてを包む土台です。

84
00:07:01.901 --> 00:07:05.172
これでボディタグの解説を終わります。

85
00:07:05.172 --> 00:07:12.623
まずはヘッダー、メイン、フッターの三つをボディに並べる練習から始めてみてください。

86
00:07:12.623 --> 00:07:19.892
迷ったときは、表示するものかどうかを問い直すことが、正しい置き場所への近道です。