WEBVTT

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

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

3
00:00:03.943 --> 00:00:06.478
今回からHTMLタグ編が始まります。

4
00:00:06.478 --> 00:00:09.435
最初のテーマは、ダブリュービーアールです。

5
00:00:09.435 --> 00:00:15.773
これは、長い文字列の中で、必要ならここで折り返してもよい、という位置を示す小さなタグです。

6
00:00:15.773 --> 00:00:21.124
画面に十分な幅があれば何も起きず、一行のまま表示されますが、スマートフォンのような狭い画面では、

7
00:00:21.124 --> 00:00:26.475
はみ出す代わりに、示した位置で自然に折り返してくれます。

8
00:00:26.475 --> 00:00:31.686
今回は、この控えめですが便利なタグを、初心者向けに分かりやすく解説します。

9
00:00:31.686 --> 00:00:36.615
小さな工夫ですが、スマートフォンでの読みやすさを大きく助けてくれます。

10
00:00:36.615 --> 00:00:41.719
まず、よく似た名前のビーアールタグとの違いを押さえましょう。

11
00:00:41.719 --> 00:00:45.293
ビーアールは、置いた場所で必ず改行します。

12
00:00:45.293 --> 00:00:50.567
住所や詩のように、改行そのものに意味があるときに使うものです。

13
00:00:50.567 --> 00:00:55.672
一方、ダブリュービーアールは必ず改行するわけではありません。

14
00:00:55.672 --> 00:00:59.415
あくまで、折り返してよい候補を示すだけです。

15
00:00:59.415 --> 00:01:06.391
画面幅に余裕があれば改行せず、幅が足りなくなったときだけ、その位置で折り返します。

16
00:01:06.391 --> 00:01:10.645
この、強制ではなく候補、という点が最大の違いです。

17
00:01:10.645 --> 00:01:16.600
迷ったら、狭い画面で困るときだけ折れてほしいのかを考えてみてください。

18
00:01:16.600 --> 00:01:22.555
この違いを理解すると、二つのタグを迷わず使い分けられるようになります。

19
00:01:22.555 --> 00:01:23.853
基本の書き方です。

20
00:01:23.853 --> 00:01:27.746
ダブリュービーアールは、終了タグを持たない空要素です。

21
00:01:27.746 --> 00:01:32.216
書き方は、山かっこにダブリュービーアールと書く、これだけです。

22
00:01:32.216 --> 00:01:36.398
閉じタグは書きませんし、中に文字を入れることもありません。

23
00:01:36.398 --> 00:01:41.589
文章や単語の途中、折り返してほしい位置に、そっと差し込むように使います。

24
00:01:41.589 --> 00:01:45.626
スライドの例では、英単語のハイフンの後ろに置いています。

25
00:01:45.626 --> 00:01:49.735
置いただけでは見た目は変わらないので、最初は本当に効いているのか不安になるかもしれませんが、

26
00:01:49.735 --> 00:01:53.845
それが正常な動きです。

27
00:01:53.845 --> 00:01:57.306
次のセクションで、実際の効き方を確認しましょう。

28
00:01:57.306 --> 00:02:01.343
短いタグなので、覚えること自体はとても少なくて済みます。

29
00:02:01.343 --> 00:02:03.604
記事の実例を見てみましょう。

30
00:02:03.604 --> 00:02:09.336
ピータグの中に、ベリー、ロング、識別名、例、という意味の長い英単語のつながりを書き、

31
00:02:09.336 --> 00:02:15.068
ハイフンの後ろにダブリュービーアールを二か所入れています。

32
00:02:15.068 --> 00:02:20.559
パソコンのような広い画面で見ると、これは一行でそのまま表示されます。

33
00:02:20.559 --> 00:02:26.614
ところが、ブラウザーの幅をぐっと狭くしていくと、単語の途中で無理に切れたり、

34
00:02:26.614 --> 00:02:32.669
画面からはみ出したりせず、ダブリュービーアールを置いた位置で折り返します。

35
00:02:32.669 --> 00:02:38.482
試すときは、保存して再読み込みし、幅を変えながら表示を確認してください。

36
00:02:38.482 --> 00:02:42.196
この幅を変えて確かめる、という手順が大切です。

37
00:02:42.196 --> 00:02:48.171
ハイフンの位置が、そのまま自然な区切りになっている点にも注目してください。

38
00:02:48.171 --> 00:02:50.559
どんな場面で役立つのでしょうか。

39
00:02:50.559 --> 00:02:54.141
代表例は、長いユーアールエルやファイルパスです。

40
00:02:54.141 --> 00:02:59.813
これらは空白がなく、ブラウザーが自然な折り返し位置を見つけにくい文字列です。

41
00:02:59.813 --> 00:03:05.037
また、区切りのない長い英単語や、プログラムで使う長い識別名も同じです。

42
00:03:05.037 --> 00:03:09.739
スラッシュやハイフン、ドットといった区切り記号の後ろにダブリュービーアールを置いておくと、

43
00:03:09.739 --> 00:03:14.441
狭い画面でも読みやすく折り返せます。

44
00:03:14.441 --> 00:03:20.859
逆に、普通の日本語の文章は、文字の間で自然に折り返せるので、基本的には必要ありません。

45
00:03:20.859 --> 00:03:23.545
困る文字列に絞って使うのがコツです。

46
00:03:23.545 --> 00:03:28.471
特にスマートフォンでは、はみ出しを防ぐ効果が分かりやすく現れます。

47
00:03:28.471 --> 00:03:32.298
シーエスエスとの使い分けも知っておきましょう。

48
00:03:32.298 --> 00:03:39.619
長い文字列全体の折り返し対策なら、シーエスエスのオーバーフローラップなどが向いています。

49
00:03:39.619 --> 00:03:45.776
こちらは要素全体に効くので、文章がたくさんある場合でも一括で対応できます。

50
00:03:45.776 --> 00:03:53.596
一方、ダブリュービーアールは、ここでだけ折れてほしい、という場所をピンポイントで指定できます。

51
00:03:53.596 --> 00:04:00.751
たとえば、意味の区切りを保ちたいときや、特定の単語だけを丁寧に扱いたいときに便利です。

52
00:04:00.751 --> 00:04:05.660
どちらか一方ではなく、全体はシーエスエス、細かい調整はダブリュービーアール、

53
00:04:05.660 --> 00:04:10.569
と組み合わせる考え方も覚えておきましょう。

54
00:04:10.569 --> 00:04:17.058
迷ったときは、まずシーエスエスで全体を整え、必要な場所だけタグで補いましょう。

55
00:04:17.058 --> 00:04:18.779
属性について確認します。

56
00:04:18.779 --> 00:04:22.939
ダブリュービーアールには、このタグ専用の属性はありません。

57
00:04:22.939 --> 00:04:26.668
そのため、ふだんは属性を付けずに、そのまま使います。

58
00:04:26.668 --> 00:04:31.258
もちろん、ほかの要素と同じく、アイディーやクラス、言語を示すラングといった、

59
00:04:31.258 --> 00:04:35.848
すべての要素で使える共通属性を付けることはできます。

60
00:04:35.848 --> 00:04:41.442
ただし、見た目を変えるためのクラスを付けるような使い方は一般的ではありません。

61
00:04:41.442 --> 00:04:45.745
このタグの役割は、あくまで折り返し候補の位置を示すことです。

62
00:04:45.745 --> 00:04:50.191
属性を覚える負担がない分、とても気軽に使えるタグだと言えます。

63
00:04:50.191 --> 00:04:53.920
子要素に付ける属性と混同しないように注意しましょう。

64
00:04:53.920 --> 00:04:58.510
書くことが少ない分、置く位置に集中できるのがこのタグの良さです。

65
00:04:58.510 --> 00:04:59.991
表示の確認方法です。

66
00:04:59.991 --> 00:05:03.103
このタグは、広い画面では効果が見えません。

67
00:05:03.103 --> 00:05:11.991
確認するときは、ブラウザーのウィンドウ幅を少しずつ狭くしていくか、開発者ツールでスマートフォン表示に切り替えてください。

68
00:05:11.991 --> 00:05:18.510
三百二十ピクセル程度の狭い幅でも、内容が欠けたり、横にはみ出したりしていないかを見ます。

69
00:05:18.510 --> 00:05:22.510
また、文字を拡大した状態でも同じように確認しましょう。

70
00:05:22.510 --> 00:05:28.880
折り返し位置が不自然でないか、読みにくくなっていないかも合わせてチェックしてください。

71
00:05:28.880 --> 00:05:34.510
幅を変える前と後で比べると、ダブリュービーアールの働きがはっきり分かります。

72
00:05:34.510 --> 00:05:38.954
確認を習慣にすると、ほかのレイアウト崩れにも早く気付けます。

73
00:05:38.954 --> 00:05:40.889
よくある間違いと注意点です。

74
00:05:40.889 --> 00:05:43.791
まず、すべての位置に入れすぎないことです。

75
00:05:43.791 --> 00:05:48.905
候補が多すぎると、意図しない場所で折り返して読みにくくなることがあります。

76
00:05:48.905 --> 00:05:51.531
意味の区切りになる場所に絞りましょう。

77
00:05:51.531 --> 00:05:56.921
次に、ダブリュービーアールで折り返しても、行末にハイフンは自動では付きません。

78
00:05:56.921 --> 00:06:00.100
ハイフンがほしい場合は、別の方法を検討します。

79
00:06:00.100 --> 00:06:07.702
また、もともと空白で区切られる文章では効果が分かりにくいので、長い単独の文字列かどうかを先に確認してください。

80
00:06:07.702 --> 00:06:11.572
そして、閉じタグを書いてしまう間違いにも注意しましょう。

81
00:06:11.572 --> 00:06:13.783
このタグに閉じタグはありません。

82
00:06:13.783 --> 00:06:18.206
置く位置は、読み手が意味を取りやすい区切りを選ぶことが大切です。

83
00:06:18.206 --> 00:06:20.294
ブラウザー互換性を確認します。

84
00:06:20.294 --> 00:06:25.444
記事が参照するエムディーエヌの記録では、要素本体はクロームが一以降、エッジが十二以降、

85
00:06:25.444 --> 00:06:30.595
ファイアフォックスが一以降、サファリが四以降で対応しています。

86
00:06:30.595 --> 00:06:37.972
どれもかなり古いバージョンから使えるため、現在の主要ブラウザーでは安心して使える基本的な要素だと言えます。

87
00:06:37.972 --> 00:06:40.338
ただし、これは要素本体の対応です。

88
00:06:40.338 --> 00:06:44.862
スマートフォンでの見え方は画面幅やフォントでも変わるので、対象にしている実機や、

89
00:06:44.862 --> 00:06:49.386
近い幅の表示でも実際に試しておくと、より確実です。

90
00:06:49.386 --> 00:06:53.701
対応表だけで終わらせず、自分の目で確かめる習慣を持ちましょう。

91
00:06:53.701 --> 00:06:57.738
歴史の長い要素なので、学習用のページでも安心して試せます。

92
00:06:57.738 --> 00:06:59.716
最後に練習とまとめです。

93
00:06:59.716 --> 00:07:00.705
まとめます。

94
00:07:00.705 --> 00:07:07.957
ダブリュービーアールは、長い文字列の中で、必要なら折り返してよい位置を示す空要素でした。

95
00:07:07.957 --> 00:07:14.879
ビーアールのように必ず改行するのではなく、幅が足りないときだけ折り返すのが特徴です。

96
00:07:14.879 --> 00:07:20.977
専用の属性はなく、長いユーアールエルや識別名の区切りに置くのが基本でした。

97
00:07:20.977 --> 00:07:27.570
練習として、手元のエイチティーエムエルに長い英単語を用意し、区切りの位置にダブリュービーアールを入れて、

98
00:07:27.570 --> 00:07:34.163
ブラウザーの幅を狭くしながら変化を観察してみてください。

99
00:07:34.163 --> 00:07:35.646
お疲れさまでした。

100
00:07:35.646 --> 00:07:40.261
次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。

101
00:07:40.261 --> 00:07:46.030
まずは一か所だけ入れて、効果を自分の目で確かめることから始めましょう。