WEBVTT

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

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

3
00:00:04.097 --> 00:00:08.925
エイチティーエムエルタグ編の六十六本目は、エイチアール、タグです。

4
00:00:08.925 --> 00:00:13.608
このタグは、文章の話題が切り替わることを表す、区切りの要素です。

5
00:00:13.608 --> 00:00:18.582
ブラウザーでは横線として表示されるので、見た目はただの線に見えますが、大切なのは線そのものではなく、

6
00:00:18.582 --> 00:00:23.557
ここで話が変わるという意味の方です。

7
00:00:23.557 --> 00:00:28.386
物語で場面が変わるときや、説明のテーマが切り替わるときに使います。

8
00:00:28.386 --> 00:00:35.701
今回は、意味に合った使い方と、見た目だけの線との違いを、初心者の方にも分かるように順番に解説します。

9
00:00:35.701 --> 00:00:39.652
線の向こう側で話が変わる感覚を、まずは掴んでください。

10
00:00:39.652 --> 00:00:41.479
基本の書き方を確認します。

11
00:00:41.479 --> 00:00:46.118
エイチアールは、書き方がとてもシンプルで、開始タグだけを書きます。

12
00:00:46.118 --> 00:00:49.633
終了タグはなく、中に文章を入れることもありません。

13
00:00:49.633 --> 00:00:53.147
このように、中身を持たない要素を空要素と呼びます。

14
00:00:53.147 --> 00:00:57.224
段落と段落の間に一行置くだけで、話題の区切りが完成します。

15
00:00:57.224 --> 00:01:01.441
スラッシュを付けた書き方を見かけることもありますが、現在のエイチティーエムエルでは、

16
00:01:01.441 --> 00:01:05.658
エイチアールとだけ書くのが標準です。

17
00:01:05.658 --> 00:01:07.626
まずはこの形を覚えましょう。

18
00:01:07.626 --> 00:01:12.546
閉じタグを探して悩む必要がないのも、初心者にとって嬉しいポイントです。

19
00:01:12.546 --> 00:01:16.904
この一行だけで区切りが伝わる点が、このタグの分かりやすさです。

20
00:01:16.904 --> 00:01:21.307
エイチアールの意味を、もう少し詳しく見てみましょう。

21
00:01:21.307 --> 00:01:26.050
仕様では、段落レベルでの話題の転換を表すとされています。

22
00:01:26.050 --> 00:01:33.840
たとえば、物語の中で場面が切り替わったり、説明のテーマが前半と後半で変わったりする場面です。

23
00:01:33.840 --> 00:01:39.090
画面の例では、一日目の話から二日目の話へ移る間に置いています。

24
00:01:39.090 --> 00:01:46.204
一方で、章全体を大きく分ける場合は、セクションや見出しで構造を作る方が適しています。

25
00:01:46.204 --> 00:01:54.502
エイチアールは、その中でも比較的小さな、文章の流れの中の区切りに使うものだとイメージしてください。

26
00:01:54.502 --> 00:01:58.398
意味を意識すると、置く場所に迷わなくなります。

27
00:01:58.398 --> 00:02:05.172
小説やブログの場面転換を思い浮かべると、使い方のイメージがつかみやすくなります。

28
00:02:05.172 --> 00:02:08.267
使う場面と、使わない場面を整理します。

29
00:02:08.267 --> 00:02:13.317
使ってよいのは、話題や場面、テーマが本当に切り替わるときです。

30
00:02:13.317 --> 00:02:19.262
反対に、カードの枠線を引きたい、デザインとして線が欲しい、余白の代わりに線を入れたい、

31
00:02:19.262 --> 00:02:25.208
といった見た目だけが目的の場合は、エイチアールは適しません。

32
00:02:25.208 --> 00:02:30.583
そうした装飾の線は、シーエスエスのボーダーで表現するのが正解です。

33
00:02:30.583 --> 00:02:36.284
迷ったときは、線を消しても意味の区切りが必要かどうかを考えてください。

34
00:02:36.284 --> 00:02:43.614
意味が必要ならエイチアール、見た目だけならシーエスエス、という分け方が判断の軸になります。

35
00:02:43.614 --> 00:02:48.664
この判断が身に付くと、文書の意味が格段に伝わりやすくなります。

36
00:02:48.664 --> 00:02:50.313
属性について確認します。

37
00:02:50.313 --> 00:02:54.025
エイチアールには、この要素専用の必須属性はありません。

38
00:02:54.025 --> 00:02:58.423
必要に応じて、どの要素にも使える共通のグローバル属性を使います。

39
00:02:58.423 --> 00:03:06.258
たとえば、クラスはシーエスエスで見た目を整えるときの目印に、アイディーは文書の中で一つだけの識別子として使えます。

40
00:03:06.258 --> 00:03:10.588
昔のエイチティーエムエルでは、アラインやサイズといった見た目用の属性もありましたが、

41
00:03:10.588 --> 00:03:14.918
現在は廃止されており、使ってはいけません。

42
00:03:14.918 --> 00:03:20.828
線の太さや色を変えたいときは、属性ではなくシーエスエスで指定するのが現代のルールです。

43
00:03:20.828 --> 00:03:25.364
クラス名は内容が分かる名前にすると、あとからの修正も楽になります。

44
00:03:25.364 --> 00:03:27.135
記事の活用事例を読み解きます。

45
00:03:27.135 --> 00:03:30.914
例では、まず段落で、前半はエイチティーエムエルを学ぶと書きます。

46
00:03:30.914 --> 00:03:36.109
次にエイチアールを一行置いて、続く段落で、ここから後半のシーエスエスの話題だと続けます。

47
00:03:36.109 --> 00:03:41.186
たったこれだけですが、読み手にも、プログラムにも、ここで話題が変わることが伝わります。

48
00:03:41.186 --> 00:03:48.271
実際に試すときは、練習用のファイルにこのコードを貼り、ブラウザーで再読み込みして横線が表示されることを確認してください。

49
00:03:48.271 --> 00:03:51.695
さらに開発者ツールのエレメンツで、段落と段落の間にエイチアールが正しく入っているかを見ると、

50
00:03:51.695 --> 00:03:55.119
構造の理解が深まります。

51
00:03:55.119 --> 00:03:59.016
短い例ですが、区切りの意味がはっきり伝わる良い見本になっています。

52
00:03:59.016 --> 00:04:04.669
表示される横線の見た目は、シーエスエスで自由に整えられます。

53
00:04:04.669 --> 00:04:11.263
画面の例では、クラスを指定したエイチアールに対して、標準の枠線を一度消し、

54
00:04:11.263 --> 00:04:17.858
上側だけに青い二ピクセルの線を引き直し、前後に余白を付けています。

55
00:04:17.858 --> 00:04:26.337
点線にしたり、幅を短くして中央に寄せたりといったアレンジも、すべてシーエスエスで行います。

56
00:04:26.337 --> 00:04:29.163
ここで大切なのは役割分担です。

57
00:04:29.163 --> 00:04:37.265
話題の転換という意味はエイチアールが持ち、色や太さといった見た目はシーエスエスが持つ。

58
00:04:37.265 --> 00:04:43.860
この分担を守ると、あとからデザインだけを変更することも簡単になります。

59
00:04:43.860 --> 00:04:49.324
線を目立たせすぎず、文章の流れを邪魔しない調整がコツです。

60
00:04:49.324 --> 00:04:52.230
よくある間違いを三つ紹介します。

61
00:04:52.230 --> 00:04:57.134
一つ目は、見た目だけの罫線として使ってしまうことです。

62
00:04:57.134 --> 00:05:01.493
カードの区切り線などはボーダーで表現しましょう。

63
00:05:01.493 --> 00:05:05.308
二つ目は、終了タグを書いてしまうことです。

64
00:05:05.308 --> 00:05:09.667
エイチアールは空要素なので、閉じタグは不要です。

65
00:05:09.667 --> 00:05:14.389
三つ目は、余白や装飾の代わりに何本も並べることです。

66
00:05:14.389 --> 00:05:20.383
話題が何度も切り替わっているという、誤った意味になってしまいます。

67
00:05:20.383 --> 00:05:29.101
いずれもブラウザーでは線が表示されてしまうため、見た目では間違いに気付きにくい点が落とし穴です。

68
00:05:29.101 --> 00:05:34.913
置く前に、意味の区切りかどうかを一度立ち止まって確認しましょう。

69
00:05:34.913 --> 00:05:40.544
チェックリストとして覚えておくと、公開前の見直しに役立ちます。

70
00:05:40.544 --> 00:05:43.699
アクセシビリティの視点も押さえておきましょう。

71
00:05:43.699 --> 00:05:50.010
エイチアールは、画面読み上げなどの支援技術では、セパレーター、つまり区切りとして扱われます。

72
00:05:50.010 --> 00:05:53.508
そのため、本当に話題が切り替わる場所に使えば、目で見ていない利用者にも、

73
00:05:53.508 --> 00:05:57.006
話の区切りが正しく伝わります。

74
00:05:57.006 --> 00:06:03.728
逆に、装飾目的でたくさん置くと、読み上げのたびに不要な区切りが挟まり、内容が分かりにくくなります。

75
00:06:03.728 --> 00:06:07.844
装飾の線をシーエスエスで表現すれば、読み上げには現れません。

76
00:06:07.844 --> 00:06:12.782
誰にとっても伝わるページにするためにも、意味で使い分けることが大切です。

77
00:06:12.782 --> 00:06:17.172
見た目の線一本にも、意味があるかどうかで大きな違いが生まれます。

78
00:06:17.172 --> 00:06:19.289
ブラウザー互換性を確認します。

79
00:06:19.289 --> 00:06:25.994
記事が参照するエムディーエヌのデータでは、エイチアール要素は、クロームが一以降、

80
00:06:25.994 --> 00:06:32.699
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーのごく初期から対応しています。

81
00:06:32.699 --> 00:06:37.216
そのため、表示できないブラウザーを心配する必要はまずありません。

82
00:06:37.216 --> 00:06:42.792
仕上げには、話題の転換という目的に合っているかを意味から見直し、三百二十ピクセル程度の狭い画面や文字拡大でも、

83
00:06:42.792 --> 00:06:48.367
線や前後の文章が欠けていないかを確認しましょう。

84
00:06:48.367 --> 00:06:51.755
モバイルの実機でも一度表示を確かめると安心です。

85
00:06:51.755 --> 00:06:56.272
対応状況に不安がない分、意味の正しさに集中できるタグと言えます。

86
00:06:56.272 --> 00:06:57.405
最後にまとめです。

87
00:06:57.405 --> 00:06:59.671
エイチアールのポイントは三つでした。

88
00:06:59.671 --> 00:07:05.839
一つ目、エイチアールは話題の転換を表す空要素で、終了タグはなく、段落と段落の間に一行だけ置くこと。

89
00:07:05.839 --> 00:07:11.630
二つ目、見た目だけの罫線や装飾には使わず、そうした線はシーエスエスのボーダーで表現すること。

90
00:07:11.630 --> 00:07:15.092
三つ目、線の色や太さや余白を変えたいときも属性ではなくシーエスエスで指定し、

91
00:07:15.092 --> 00:07:18.553
意味と見た目を分担させることです。

92
00:07:18.553 --> 00:07:22.141
練習として、長い文章のファイルを開き、本当に話題が切り替わる場所を一つ見つけて、

93
00:07:22.141 --> 00:07:25.729
エイチアールを置いてみてください。

94
00:07:25.729 --> 00:07:26.862
お疲れさまでした。

95
00:07:26.862 --> 00:07:30.764
意味のある区切りを一つ置けるようになれば、このタグは卒業です。