WEBVTT

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

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

3
00:00:04.001 --> 00:00:08.298
エイチティーエムエルタグ編の百本目は、ビーアールタグです。

4
00:00:08.298 --> 00:00:12.744
ビーアールは、文章の途中で行を変える、改行のための要素です。

5
00:00:12.744 --> 00:00:16.152
ただし、どんな改行にも使うわけではありません。

6
00:00:16.152 --> 00:00:22.524
詩の行や住所の行のように、改行そのものが内容の一部になっている場面で使うのが基本です。

7
00:00:22.524 --> 00:00:28.600
今回は、ビーアールの意味、空要素としての書き方、使うべき場面と使わない場面、

8
00:00:28.600 --> 00:00:34.675
段落分けとの違い、コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。

9
00:00:34.675 --> 00:00:41.788
小さな要素ですが、使い方を間違えやすい代表格でもあるので、判断の基準をしっかり身に付けましょう。

10
00:00:41.788 --> 00:00:44.735
まず、ビーアールの役割を整理します。

11
00:00:44.735 --> 00:00:50.302
ビーアールは、今の行をそこで終わらせて、次の行から続きを表示します。

12
00:00:50.302 --> 00:00:54.068
ポイントは、段落そのものは変わらないことです。

13
00:00:54.068 --> 00:01:02.910
話題が変わるわけでも、新しいまとまりが始まるわけでもなく、あくまで一つの段落やまとまりの中で行が替わります。

14
00:01:02.910 --> 00:01:10.441
たとえば住所では、都道府県と市区町村、建物名と部屋番号といった行分け自体が読み方を決めます。

15
00:01:10.441 --> 00:01:13.880
詩や歌詞でも、行の区切りは作品の一部です。

16
00:01:13.880 --> 00:01:19.283
こうした、行を変えることに意味がある場所で使うのがビーアールです。

17
00:01:19.283 --> 00:01:23.950
逆に言えば、改行を消しても内容の意味が変わらないなら、それはビーアールの出番ではない可能性が高い、

18
00:01:23.950 --> 00:01:28.616
ということです。

19
00:01:28.616 --> 00:01:30.590
基本の書き方を見ていきます。

20
00:01:30.590 --> 00:01:35.524
ビーアールは空要素なので、開始タグだけで完結し、終了タグは書きません。

21
00:01:35.524 --> 00:01:38.344
タグの間に文字を入れることもありません。

22
00:01:38.344 --> 00:01:42.714
改行したい文字と文字の間に、そのままビーアールを置くだけです。

23
00:01:42.714 --> 00:01:51.455
昔の書き方でスラッシュを付けた形を見かけることもありますが、現在のエイチティーエムエルではビーアールとだけ書くのが標準です。

24
00:01:51.455 --> 00:01:56.813
配置する場所は、本文を表示するボディの中の、段落や住所などの要素の内側です。

25
00:01:56.813 --> 00:02:01.042
行を変えたい位置が、そのままビーアールを置く位置になります。

26
00:02:01.042 --> 00:02:05.483
なお、エックスエイチティーエムエル時代の書き方が混ざっていても表示はされますが、

27
00:02:05.483 --> 00:02:09.924
新しく書くコードでは統一しておくのが安心です。

28
00:02:09.924 --> 00:02:11.136
属性を確認します。

29
00:02:11.136 --> 00:02:15.042
ビーアールには、記事で必須とされる専用の属性はありません。

30
00:02:15.042 --> 00:02:17.600
通常は属性なしで使うのがほとんどです。

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

32
00:02:24.738 --> 00:02:28.845
たとえばクラスを付けておくと、画面幅によって改行を表示したり隠したりする、

33
00:02:28.845 --> 00:02:32.953
といったシーエスエスでの調整がしやすくなります。

34
00:02:32.953 --> 00:02:37.397
なお、昔使われていたクリアという属性は、現在の標準では使いません。

35
00:02:37.397 --> 00:02:41.976
回り込みの解除は、シーエスエスのクリアプロパティで指定してください。

36
00:02:41.976 --> 00:02:50.056
クラス名は、スマートフォンだけ、といった用途が分かる名前にしておくと、あとから見返したときに意図が伝わりやすくなります。

37
00:02:50.056 --> 00:02:54.297
記事の活用事例をもとに、コード例を確認します。

38
00:02:54.297 --> 00:02:56.510
最初の例は会場案内です。

39
00:02:56.510 --> 00:03:01.397
ピータグの中に、東京都の会場、ビーアール、二階受付カウンターと書くことで、

40
00:03:01.397 --> 00:03:06.283
同じ案内文の中で行が替わります。

41
00:03:06.283 --> 00:03:12.184
住所でも考え方は同じで、行ごとに区切ることで読みやすくなります。

42
00:03:12.184 --> 00:03:13.659
次の例は詩です。

43
00:03:13.659 --> 00:03:20.297
行の区切りが作品のリズムそのものなので、一行ごとにビーアールを入れます。

44
00:03:20.297 --> 00:03:30.070
書き終えたら保存して再読み込みし、意図した位置で改行されているか、開発者ツールでも構造を確認してください。

45
00:03:30.070 --> 00:03:40.028
住所の例では、読み手が宛先を書き写す場面を想像すると、行の区切りがあるほうが迷いにくいことがよく分かります。

46
00:03:40.028 --> 00:03:43.435
よく混同される、ピータグとの違いを整理します。

47
00:03:43.435 --> 00:03:48.324
ピーは段落を表す要素で、話題や意味のまとまりごとに文章を分けます。

48
00:03:48.324 --> 00:03:54.842
ピーを分けると、新しい段落が始まるため、ブラウザーの表示でも段落の間に余白が生まれます。

49
00:03:54.842 --> 00:04:01.361
一方、ビーアールは段落の中での改行で、余白を空けて新しい話題を始めるものではありません。

50
00:04:01.361 --> 00:04:05.212
判断の目安は、その区切りが意味の区切りかどうかです。

51
00:04:05.212 --> 00:04:08.768
意味が変わるならピーで段落を分け、意味は続いたまま行だけ変えるならビーアール、

52
00:04:08.768 --> 00:04:12.323
と覚えてください。

53
00:04:12.323 --> 00:04:16.842
読み上げソフトでも、段落の区切りと行の区切りは扱いが異なる場合があるため、

54
00:04:16.842 --> 00:04:21.360
この使い分けはそのまま伝わりやすさに影響します。

55
00:04:21.360 --> 00:04:24.448
ビーアールを使うべき場面をまとめます。

56
00:04:24.448 --> 00:04:25.910
代表例は三つです。

57
00:04:25.910 --> 00:04:27.373
一つ目は住所です。

58
00:04:27.373 --> 00:04:33.548
郵便番号、都道府県、番地、建物名といった行分けは、宛先の読み方そのものです。

59
00:04:33.548 --> 00:04:36.311
二つ目は、詩や歌詞、俳句などです。

60
00:04:36.311 --> 00:04:40.049
どこで行が替わるかが、作品の区切りになります。

61
00:04:40.049 --> 00:04:47.361
三つ目は、会場案内のような短い文で、行を分けたほうが場所や順番が伝わりやすくなる場合です。

62
00:04:47.361 --> 00:04:54.349
いずれも共通しているのは、画面の幅が変わっても、その位置で改行する意味が残ることです。

63
00:04:54.349 --> 00:04:59.225
この条件に当てはまるかが、使うかどうかの判断基準になります。

64
00:04:59.225 --> 00:05:06.700
行を区切ることで、順番や対応関係がはっきりする場合も、ビーアールが向いている場面と言えます。

65
00:05:06.700 --> 00:05:10.118
逆に、使わない場面もはっきりさせておきます。

66
00:05:10.118 --> 00:05:16.487
段落と段落の間に余白を作りたいときに、ビーアールを何個も並べるのは避けてください。

67
00:05:16.487 --> 00:05:23.478
文字の大きさを変えると余白の感じが崩れやすく、読み上げでも余分な区切りになってしまいます。

68
00:05:23.478 --> 00:05:28.294
段落間の間隔は、シーエスエスのマージンで指定するのが正解です。

69
00:05:28.294 --> 00:05:32.333
行と行の間隔を広げたいなら、ラインハイトを使います。

70
00:05:32.333 --> 00:05:39.635
つまり、意味はエイチティーエムエル、見た目の間隔はシーエスエス、と役割を分けることが大切です。

71
00:05:39.635 --> 00:05:42.897
ビーアールは余白作りの道具ではありません。

72
00:05:42.897 --> 00:05:51.752
見た目を整えるためにタグを増やすのではなく、まず段落や見出しといった意味の構造から考える順番を大切にしてください。

73
00:05:51.752 --> 00:05:56.504
スマートフォンのような狭い画面と、読み上げへの配慮も確認します。

74
00:05:56.504 --> 00:06:01.108
狭い画面では、文章がもともと自動で折り返されるため、ビーアールの改行と重なって、

75
00:06:01.108 --> 00:06:05.712
一行がとても短くなってしまうことがあります。

76
00:06:05.712 --> 00:06:13.732
パソコン向けの改行が邪魔になる場合は、クラスを付けて、画面幅によってビーアールを非表示にする方法もあります。

77
00:06:13.732 --> 00:06:17.148
ただし、隠しても意味が崩れない内容に限ります。

78
00:06:17.148 --> 00:06:22.049
また、読み上げソフトでは、改行の位置で一拍置かれることがあります。

79
00:06:22.049 --> 00:06:28.435
不自然な区切りになっていないか、三百二十ピクセル程度の幅や文字拡大でも試してください。

80
00:06:28.435 --> 00:06:36.900
デザインの都合で入れた改行ほど、画面幅が変わったときに崩れやすい、という点も覚えておくと判断がぶれにくくなります。

81
00:06:36.900 --> 00:06:39.108
ブラウザー互換性を確認します。

82
00:06:39.108 --> 00:06:45.070
記事が紹介するエムディーエヌのデータでは、ビーアール要素本体は、クロームが一以降、

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

84
00:06:51.032 --> 00:06:55.448
エイチティーエムエルの中でも最も古くからある要素の一つで、基本の改行については、

85
00:06:55.448 --> 00:06:59.864
現在の主要ブラウザーで問題なく使えます。

86
00:06:59.864 --> 00:07:02.809
スマートフォンのブラウザーでも同様です。

87
00:07:02.809 --> 00:07:07.593
心配なのは互換性よりも使い方のほうで、余白作りに使っていないか、段落分けと混同していないかを、

88
00:07:07.593 --> 00:07:12.377
実装のたびに確認する習慣が大切です。

89
00:07:12.377 --> 00:07:20.032
対応が広いからこそ、古いページでも新しいページでも同じ書き方で使える、初心者にとって扱いやすい要素です。

90
00:07:20.032 --> 00:07:24.130
まとめとして、よくある間違いを三つ挙げます。

91
00:07:24.130 --> 00:07:29.904
一つ目は、ビーアールを何個も並べて余白を作ってしまうことです。

92
00:07:29.904 --> 00:07:33.442
余白はシーエスエスで指定してください。

93
00:07:33.442 --> 00:07:38.471
二つ目は、段落分けの代わりにビーアールを使うことです。

94
00:07:38.471 --> 00:07:42.569
話題が変わるならピーで段落を分けてください。

95
00:07:42.569 --> 00:07:46.480
三つ目は、終了タグを書いてしまうことです。

96
00:07:46.480 --> 00:07:50.764
ビーアールは空要素なので、終了タグは不要です。

97
00:07:50.764 --> 00:07:56.911
ビーアールは、詩や住所など、内容として必要な改行に入れる要素です。

98
00:07:56.911 --> 00:08:00.636
これでビーアールタグの解説を終わります。

99
00:08:00.636 --> 00:08:06.410
まずは住所の行分けから、意味のある改行で練習してみてください。

100
00:08:06.410 --> 00:08:15.164
迷ったときは、その改行が内容の一部かどうかを問い直すことが、正しい使い分けへの一番の近道です。