WEBVTT

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

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

3
00:00:04.246 --> 00:00:08.795
HTMLタグ編の四本目は、ユーエルと書く、ユーエルタグです。

4
00:00:08.795 --> 00:00:12.737
これは、順番に意味がないリストを作るためのタグです。

5
00:00:12.737 --> 00:00:21.077
たとえば、買い物リストや持ち物リストのように、項目を並べ替えても意味が変わらないものをまとめるときに使います。

6
00:00:21.077 --> 00:00:25.171
各項目は、エルアイタグで囲んでユーエルの中に入れます。

7
00:00:25.171 --> 00:00:30.326
今回は、基本の書き方から、順番に意味があるリストとの使い分け、入れ子の作り方、

8
00:00:30.326 --> 00:00:35.482
ナビゲーションへの活用まで、初心者向けに順番に解説します。

9
00:00:35.482 --> 00:00:41.092
Webページで最もよく使うリストの基本を、ここでしっかり身につけましょう。

10
00:00:41.092 --> 00:00:47.102
ユーエルタグが活躍するのは、並べ替えても意味が変わらない項目を並べる場面です。

11
00:00:47.102 --> 00:00:54.653
たとえば、旅行の持ち物、買い物のメモ、商品の特徴の箇条書き、サイトのメニューなどが当てはまります。

12
00:00:54.653 --> 00:01:01.588
読み手にとって大切なのは、一つひとつの項目の内容であって、その順番そのものではありません。

13
00:01:01.588 --> 00:01:08.061
逆に、手順や順位のように順番に意味がある場合は、後で紹介するオーエルタグを使います。

14
00:01:08.061 --> 00:01:13.917
迷ったら、項目の順番を入れ替えても意味が通じるかどうかを考えてみてください。

15
00:01:13.917 --> 00:01:19.156
通じるならユーエル、通じなくなるならオーエル、という判断が基本です。

16
00:01:19.156 --> 00:01:24.704
意味に合ったリストを選ぶことが、正しいエイチティーエムエルの第一歩です。

17
00:01:24.704 --> 00:01:26.124
基本の書き方です。

18
00:01:26.124 --> 00:01:34.016
ユーエルタグは、開始タグと終了タグを向かい合わせに書き、その間にエルアイタグで囲んだ項目を並べます。

19
00:01:34.016 --> 00:01:39.540
大切なルールは、ユーエルの直接の子要素にはエルアイだけを置くことです。

20
00:01:39.540 --> 00:01:44.274
ユーエルの中に、文章や見出しをそのまま書くことはできません。

21
00:01:44.274 --> 00:01:51.061
項目以外の説明を付けたい場合は、リストの外に段落として書くか、エルアイの中に含めます。

22
00:01:51.061 --> 00:01:57.847
多くのブラウザーでは、項目の先頭に黒丸の印が自動で付き、少し字下げされて表示されます。

23
00:01:57.847 --> 00:02:04.476
これは見た目の既定であり、意味はあくまで順不同のリストであることだと覚えてください。

24
00:02:04.476 --> 00:02:06.810
記事の活用事例を見てみましょう。

25
00:02:06.810 --> 00:02:11.333
この例では、持ち物としてノートパソコンと充電器が並んでいます。

26
00:02:11.333 --> 00:02:17.605
どちらを先に書いても意味は変わらないため、順不同のリストであるユーエルがぴったりです。

27
00:02:17.605 --> 00:02:21.982
項目を増やしたいときは、エルアイタグを一行追加するだけです。

28
00:02:21.982 --> 00:02:27.671
試すときは、エイチティーエムエルファイルを保存して再読み込みし、開発者ツールのエレメンツで、

29
00:02:27.671 --> 00:02:33.361
ユーエルの中にエルアイだけが並んでいるかを確認してみてください。

30
00:02:33.361 --> 00:02:37.664
もし文章がユーエルの直下に紛れていたら、ブラウザーが自動で構造を補正してしまう場合があるため、

31
00:02:37.664 --> 00:02:41.968
書き方を見直しましょう。

32
00:02:41.968 --> 00:02:45.551
順番に意味があるリストとの違いを整理します。

33
00:02:45.551 --> 00:02:50.437
オーエルタグは、番号付きのリストを作るタグで、操作の手順やランキングの順位など、

34
00:02:50.437 --> 00:02:55.322
順番そのものに意味がある場合に使います。

35
00:02:55.322 --> 00:03:01.185
一方、ユーエルは順不同のリストで、番号は付かず、黒丸などの印が付きます。

36
00:03:01.185 --> 00:03:09.003
ここで大切なのは、番号を表示したいかどうかではなく、意味として順番が重要かどうかで選ぶことです。

37
00:03:09.003 --> 00:03:12.911
番号が不要だからユーエルにするのではなく、順番に意味がないからユーエルにする、

38
00:03:12.911 --> 00:03:16.820
という考え方です。

39
00:03:16.820 --> 00:03:23.660
見た目は後からシーエスエスで変えられるため、まずは意味で判断する習慣を付けましょう。

40
00:03:23.660 --> 00:03:27.251
リストの中にリストを入れる、入れ子の書き方です。

41
00:03:27.251 --> 00:03:32.189
ルールは一つで、新しいユーエルは、必ずエルアイタグの中に置きます。

42
00:03:32.189 --> 00:03:36.528
ユーエルの直下に、別のユーエルを直接置くことはできません。

43
00:03:36.528 --> 00:03:42.065
この例では、飲み物という項目の中に、水とお茶の小さなリストが入っています。

44
00:03:42.065 --> 00:03:45.356
グループ分けをしたいときに便利な書き方です。

45
00:03:45.356 --> 00:03:51.641
ただし、入れ子を深くしすぎると、読み手が階層を追いにくくなり、画面の幅も圧迫します。

46
00:03:51.641 --> 00:03:57.776
実務では、二階層程度までにとどめ、それ以上は見出しで区切ることも検討してください。

47
00:03:57.776 --> 00:04:03.312
構造が正しいかどうかは、タグの対応関係を一段ずつ確認すると確かめられます。

48
00:04:03.312 --> 00:04:07.210
活用の広げ方として、サイトのナビゲーションを紹介します。

49
00:04:07.210 --> 00:04:13.892
ヘッダーのメニューは、言い換えればリンクの集まりであり、順不同のリストとして表すことができます。

50
00:04:13.892 --> 00:04:21.549
そのため、ナブタグの中にユーエルとエルアイを置き、各項目の中にエータグのリンクを入れる書き方がよく使われます。

51
00:04:21.549 --> 00:04:27.536
この構造にすると、読み上げソフトでも、メニューが何項目あるのかが伝わりやすくなります。

52
00:04:27.536 --> 00:04:32.826
横並びにしたり、印を消したりといった見た目の調整は、シーエスエスで行います。

53
00:04:32.826 --> 00:04:38.812
まずは意味のある構造を作り、そのあとでデザインを整える、という順番を意識してください。

54
00:04:38.812 --> 00:04:40.665
属性について確認します。

55
00:04:40.665 --> 00:04:44.834
ユーエルタグには、このタグ専用の必須属性はありません。

56
00:04:44.834 --> 00:04:49.621
必要に応じて、すべての要素で使えるグローバル属性を利用します。

57
00:04:49.621 --> 00:04:55.489
代表的なものとして、文書の中で一意な名前を付けるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

58
00:04:55.489 --> 00:05:01.357
内容の言語を示すラングがあります。

59
00:05:01.357 --> 00:05:09.695
ほかにも、アプリ独自の値を保持するデータ属性が使えますが、秘密情報を置く場所ではない点には注意してください。

60
00:05:09.695 --> 00:05:16.180
古い書き方で使われていた、見た目を指定する属性は、現在は使わないものとされています。

61
00:05:16.180 --> 00:05:20.504
見た目の指定はシーエスエスへ、という分担を守りましょう。

62
00:05:20.504 --> 00:05:22.891
見た目についても触れておきます。

63
00:05:22.891 --> 00:05:29.308
多くのブラウザーでは、ユーエルの項目には黒丸の印が付き、左側に余白が付くのが既定です。

64
00:05:29.308 --> 00:05:35.724
この印は、シーエスエスのリストスタイルという指定で、四角に変えたり、消したりできます。

65
00:05:35.724 --> 00:05:43.334
メニューのように横並びにしたい場合は、印を消し、余白をなくしたうえで、フレックスなどを使って並べます。

66
00:05:43.334 --> 00:05:48.854
ここでも原則は同じで、タグは意味で選び、見た目はシーエスエスで調整します。

67
00:05:48.854 --> 00:05:52.734
ユーエルタグ自体に、見た目を決める役割はありません。

68
00:05:52.734 --> 00:05:58.404
装飾を消しても、リストであるという意味はそのまま残る点も覚えておきましょう。

69
00:05:58.404 --> 00:06:00.484
ブラウザー互換性を確認します。

70
00:06:00.484 --> 00:06:05.822
記事が参照するエムディーエヌの記録では、ユーエルタグはクロームが一以降、

71
00:06:05.822 --> 00:06:11.160
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。

72
00:06:11.160 --> 00:06:16.567
つまり、現在の主要なブラウザーでは、長く安定して使える基本的なタグの一つです。

73
00:06:16.567 --> 00:06:24.748
ただし、この表が示すのは要素本体の対応であり、新しい属性や別の仕組みまで含めた完全な動作を保証するものではありません。

74
00:06:24.748 --> 00:06:28.422
スマートフォンのブラウザーでは条件が異なる場合もあるため、対象とする実機で表示を確認すると、

75
00:06:28.422 --> 00:06:32.096
より安心です。

76
00:06:32.096 --> 00:06:36.256
古くからあるタグほど、環境差を気にせず使える利点があります。

77
00:06:36.256 --> 00:06:38.229
最後に練習とまとめです。

78
00:06:38.229 --> 00:06:42.834
ユーエルタグは、順番に意味がないリストを作るタグでした。

79
00:06:42.834 --> 00:06:44.972
大切なポイントは三つです。

80
00:06:44.972 --> 00:06:49.577
一つ目は、ユーエルの直接の子にはエルアイだけを置くこと。

81
00:06:49.577 --> 00:06:54.181
二つ目は、順番に意味がある場合はオーエルタグを使うこと。

82
00:06:54.181 --> 00:07:00.595
三つ目は、入れ子はエルアイの中に書き、見た目はシーエスエスで調整することです。

83
00:07:00.595 --> 00:07:05.364
練習として、手元のエイチティーエムエルに持ち物リストを書き、項目を三つ以上並べて、

84
00:07:05.364 --> 00:07:10.133
表示と構造を確かめてみてください。

85
00:07:10.133 --> 00:07:16.711
実装後は、幅三百二十ピクセル程度の狭い画面でも項目が欠けないかも確認しましょう。

86
00:07:16.711 --> 00:07:18.191
お疲れさまでした。

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