WEBVTT

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

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

3
00:00:03.764 --> 00:00:06.722
HTMLタグ編の四十一本目は、ピータグです。

4
00:00:06.722 --> 00:00:10.419
ピーは段落を意味する英単語、パラグラフの頭文字で、一つのまとまった文章の塊を示す、

5
00:00:10.419 --> 00:00:14.116
最も基本的なタグの一つです。

6
00:00:14.116 --> 00:00:20.300
ブログの本文も、商品の説明も、ニュースの文章も、土台はこのピータグの積み重ねでできています。

7
00:00:20.300 --> 00:00:29.307
今回は基本の書き方から、中に入れてよいものとダメなもの、そして初心者がつまずきやすい自動で閉じられる仕組みまでを順に確認していきます。

8
00:00:29.307 --> 00:00:33.340
地味に見えますが、文章の読みやすさを左右する大切なタグです。

9
00:00:33.340 --> 00:00:36.544
どんな場面で使うのかを考えてみましょう。

10
00:00:36.544 --> 00:00:43.752
原則はシンプルで、普通の説明文はピータグで書き、話題が変わったら新しいピータグを始めます。

11
00:00:43.752 --> 00:00:47.997
一つの段落に一つの話題を入れるようにすると、読み手は区切りごとに内容を理解でき、

12
00:00:47.997 --> 00:00:52.242
ぐっと読みやすくなります。

13
00:00:52.242 --> 00:00:59.291
逆に、何でもかんでも長い一つの段落に詰め込むと、途中で息切れする文章になってしまいます。

14
00:00:59.291 --> 00:01:07.460
見出しはエイチタグ、箇条書きはリストのタグ、というように、文章の種類ごとに担当のタグが決まっています。

15
00:01:07.460 --> 00:01:12.106
その中で、本文の中心を担うのがピータグだと覚えてください。

16
00:01:12.106 --> 00:01:13.992
基本の書き方を確認します。

17
00:01:13.992 --> 00:01:17.328
文章をピーの開始タグと終了タグで囲むだけです。

18
00:01:17.328 --> 00:01:21.607
例のように段落を二つ並べると、ブラウザーでは段落と段落の間に自動で少しの余白が付き、

19
00:01:21.607 --> 00:01:25.887
見た目にも区切りがはっきりします。

20
00:01:25.887 --> 00:01:34.010
ここで注意したいのは、エディターの中でエンターキーを押して改行しても、それだけでは段落は分かれないという点です。

21
00:01:34.010 --> 00:01:39.377
エイチティーエムエルの文章は、タグで囲んで初めて意味のある段落になります。

22
00:01:39.377 --> 00:01:44.454
段落を変えたいときは、改行ではなく、新しいピータグを書くのが正解です。

23
00:01:44.454 --> 00:01:48.329
記事の活用例を、自分の言葉でたどってみましょう。

24
00:01:48.329 --> 00:01:51.235
この例では二つの段落が並んでいます。

25
00:01:51.235 --> 00:01:58.824
一つ目はエイチティーエムエルが内容の構造を作る話、二つ目はシーエスエスが見た目を整える話です。

26
00:01:58.824 --> 00:02:03.345
話題が切り替わる場所で段落を分けているのがポイントです。

27
00:02:03.345 --> 00:02:07.785
もし二つの話を一つのピータグに続けて書いてしまうと、構造の話と見た目の話が混ざって伝わり、

28
00:02:07.785 --> 00:02:12.225
読み手が混乱します。

29
00:02:12.225 --> 00:02:18.523
段落分けは、見た目を整える作業であると同時に、考えを整理する作業でもあります。

30
00:02:18.523 --> 00:02:22.882
書く前に、話題の切れ目がどこかを意識してみてください。

31
00:02:22.882 --> 00:02:26.134
ピータグの中に入れられるものを整理します。

32
00:02:26.134 --> 00:02:32.018
入れてよいのは、文章の流れの中で使う小さな要素、いわゆる文中の要素だけです。

33
00:02:32.018 --> 00:02:36.432
たとえばリンクのエータグ、強調のストロングやイーエム、範囲を示すスパンなどは、

34
00:02:36.432 --> 00:02:40.845
段落の中に自然に溶け込ませられます。

35
00:02:40.845 --> 00:02:45.103
一方で、ディブやセクションのような大きな箱、見出し、そして別のピータグそのものは、

36
00:02:45.103 --> 00:02:49.362
中に入れることができません。

37
00:02:49.362 --> 00:02:56.950
大きなまとまりはピーの外に置き、ピーの中は文章とその装飾だけにする、という線引きを守ってください。

38
00:02:56.950 --> 00:02:59.737
ここが今回いちばん大切なルールです。

39
00:02:59.737 --> 00:03:02.590
少し踏み込んで、終了タグの話をします。

40
00:03:02.590 --> 00:03:09.047
実はピータグは、条件によっては終了タグを省略してもよいと決められている珍しいタグです。

41
00:03:09.047 --> 00:03:14.903
しかし教材では、開始タグと終了タグを必ずセットで明示することをおすすめします。

42
00:03:14.903 --> 00:03:20.008
理由は、省略するとブラウザーが段落の終わりを自動で判断するためです。

43
00:03:20.008 --> 00:03:25.189
たとえばピーの中にディブを入れると、ブラウザーはその手前でピーを勝手に閉じてしまい、

44
00:03:25.189 --> 00:03:30.369
自分が書いたソースと実際の構造が食い違ってしまいます。

45
00:03:30.369 --> 00:03:37.877
表示がおかしいときは、開発者ツールの要素パネルで、段落が意図せず閉じられていないか確かめてください。

46
00:03:37.877 --> 00:03:39.496
属性の整理をします。

47
00:03:39.496 --> 00:03:43.221
ピータグには、この要素専用の属性はありません。

48
00:03:43.221 --> 00:03:46.784
使えるのは、どの要素でも使える共通属性です。

49
00:03:46.784 --> 00:03:48.565
代表例は三つあります。

50
00:03:48.565 --> 00:03:56.663
一つ目はアイディーで、文書の中で一つの要素を特定し、ページ内リンクやプログラムからの参照に使います。

51
00:03:56.663 --> 00:04:03.464
二つ目はクラスで、シーエスエスやプログラムで複数の段落をまとめて扱うときに使います。

52
00:04:03.464 --> 00:04:07.027
三つ目はラングで、その段落の言語を示します。

53
00:04:07.027 --> 00:04:10.266
日本語の文章ならジェイエーを指定します。

54
00:04:10.266 --> 00:04:14.315
そのほか、独自の値を保持するデータ属性も使えます。

55
00:04:14.315 --> 00:04:19.497
属性は段落自体の意味を変えるものではない点も覚えておきましょう。

56
00:04:19.497 --> 00:04:23.149
見た目の調整でよくある誤解を解いておきます。

57
00:04:23.149 --> 00:04:30.122
段落どうしの間隔を広げたいとき、空のピータグを何個も並べる方法は使ってはいけません。

58
00:04:30.122 --> 00:04:37.095
空の段落は意味のない要素であり、読み上げソフトなどにも余計な情報を渡してしまいます。

59
00:04:37.095 --> 00:04:41.909
間隔はシーエスエスのマージンで調整するのが正しい方法です。

60
00:04:41.909 --> 00:04:47.222
また、段落の中で一行だけ改行したいときはビーアールタグの出番ですが、それは住所や詩のような、

61
00:04:47.222 --> 00:04:52.534
改行自体に意味がある場面に限ります。

62
00:04:52.534 --> 00:04:57.182
段落を分けたいならビーアールではなく新しいピータグです。

63
00:04:57.182 --> 00:05:03.325
意味はエイチティーエムエル、見た目はシーエスエス、と役割を分けてください。

64
00:05:03.325 --> 00:05:06.157
使うときの注意点を三つにまとめます。

65
00:05:06.157 --> 00:05:12.765
一つ目、段落の中にディブやセクション、別の段落といった大きな要素を入れないことです。

66
00:05:12.765 --> 00:05:17.171
ブラウザーの自動補正で構造が崩れる一番の原因になります。

67
00:05:17.171 --> 00:05:21.262
二つ目、一つの段落に話題を詰め込みすぎないことです。

68
00:05:21.262 --> 00:05:25.825
長くなったら、話題の切れ目で思い切って段落を分けましょう。

69
00:05:25.825 --> 00:05:27.556
三つ目、表示確認です。

70
00:05:27.556 --> 00:05:31.882
横幅三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも文章が欠けずに読めるか、

71
00:05:31.882 --> 00:05:36.209
実機でも確かめてください。

72
00:05:36.209 --> 00:05:43.447
あわせて、ソースと実際の構造が一致しているか、開発者ツールで見る習慣も付けておくと安心です。

73
00:05:43.447 --> 00:05:45.591
ブラウザー互換性を確認します。

74
00:05:45.591 --> 00:05:50.880
記事が参照するエムディーエヌの記録では、ピータグはクロームが一以降、エッジが十二以降、

75
00:05:50.880 --> 00:05:56.169
ファイアフォックスが一以降、サファリが一以降で対応しています。

76
00:05:56.169 --> 00:06:01.743
つまり、各ブラウザーのほぼ最初のバージョンから使えてきた、歴史の長い要素です。

77
00:06:01.743 --> 00:06:05.317
そのため、対応を心配する必要はほとんどありません。

78
00:06:05.317 --> 00:06:09.676
むしろ気をつけるのは互換性よりも書き方の方で、中に入れてよい要素のルールや、

79
00:06:09.676 --> 00:06:14.036
自動で閉じられる仕様を守れているかどうかです。

80
00:06:14.036 --> 00:06:18.467
安心して使えるからこそ、正しい意味で使うことを意識しましょう。

81
00:06:18.467 --> 00:06:20.098
最後にまとめです。

82
00:06:20.098 --> 00:06:24.811
ピータグは、一つの段落を示す、文章の最小単位でした。

83
00:06:24.811 --> 00:06:26.624
ポイントは三つです。

84
00:06:26.624 --> 00:06:33.874
一つ目、一つの段落には一つの話題を入れ、話題が変わったら新しい段落を始めること。

85
00:06:33.874 --> 00:06:42.393
二つ目、中に入れてよいのは文字と文中の小さな要素だけであり、大きな箱や別の段落は外に置くこと。

86
00:06:42.393 --> 00:06:51.999
三つ目、段落の間隔は空の段落ではなくシーエスエスのマージンで調整し、終了タグは省略せずに明示することです。

87
00:06:51.999 --> 00:06:57.618
練習として、身近な文章を三つの段落に分けて書いてみてください。

88
00:06:57.618 --> 00:07:02.512
話題の切れ目を考えるだけでも、伝わる文章に近づきます。

89
00:07:02.512 --> 00:07:04.144
お疲れさまでした。

90
00:07:04.144 --> 00:07:05.775
次回もお楽しみに。