WEBVTT

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

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

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

4
00:00:09.446 --> 00:00:14.169
エルアイは、リストの中のひとつひとつの項目を表すタグです。

5
00:00:14.169 --> 00:00:22.150
買い物の品目、手順のひと工程、画面メニューの選択肢など、並んで表示される項目はエルアイで書きます。

6
00:00:22.150 --> 00:00:24.430
ただし大切な約束があります。

7
00:00:24.430 --> 00:00:32.410
エルアイは単独では使えず、ユーエル、オーエル、メニューのいずれかの中に入れて初めて意味を持ちます。

8
00:00:32.410 --> 00:00:40.065
今回は親要素との関係、番号を途中から変えるバリュー属性、入れ子の書き方までを順に学びましょう。

9
00:00:40.065 --> 00:00:44.706
リストはどのサイトにも登場する基本の形なので、エルアイを正しく使えることは、

10
00:00:44.706 --> 00:00:49.348
読みやすいページ作りの土台になります。

11
00:00:49.348 --> 00:00:53.307
どんな場面で使うか、身近な例で考えてみましょう。

12
00:00:53.307 --> 00:00:58.092
順番に意味がない並び、たとえば持ち物リストやサイトの案内リンク集では、親にユーエルを使い、

13
00:00:58.092 --> 00:01:02.876
各項目をエルアイにします。

14
00:01:02.876 --> 00:01:10.465
逆に、料理の手順や大会の順位のように順番そのものに意味がある場合は、親にオーエルを使います。

15
00:01:10.465 --> 00:01:17.393
さらに、編集や共有といった操作ボタンを並べる場面では、親にメニューが候補になります。

16
00:01:17.393 --> 00:01:21.848
つまりエルアイ自体は項目という共通の役割を持ち、番号が付くかどうかや操作用かどうかは、

17
00:01:21.848 --> 00:01:26.302
親要素が決めるのです。

18
00:01:26.302 --> 00:01:29.601
内容の性質から親を選ぶことが第一歩です。

19
00:01:29.601 --> 00:01:34.221
迷ったときは、項目を並び替えても意味が通じるかどうかを自分に問いかけてみると、

20
00:01:34.221 --> 00:01:38.840
親の選び方が自然と決まってきます。

21
00:01:38.840 --> 00:01:40.784
基本の書き方を確認します。

22
00:01:40.784 --> 00:01:44.972
画面の例では、ユーエルの中にエルアイを三つ並べています。

23
00:01:44.972 --> 00:01:51.254
各項目は開始タグと終了タグで挟み、この教材では終了タグを省略せず、きちんと書きます。

24
00:01:51.254 --> 00:01:53.348
最も大事な注意点は配置です。

25
00:01:53.348 --> 00:01:56.937
エルアイだけをボディの直下へ置いてはいけません。

26
00:01:56.937 --> 00:02:02.770
必ずユーエル、オーエル、メニューのいずれかを親にし、その直下に置いてください。

27
00:02:02.770 --> 00:02:11.146
親がないエルアイは、リストの項目としての意味が伝わらず、ブラウザーが想定と違う形に補正してしまうこともあります。

28
00:02:11.146 --> 00:02:14.287
書く前に、親がいるかを必ず確認しましょう。

29
00:02:14.287 --> 00:02:22.812
インデントをそろえて書いておくと、親と子の関係が目で追いやすくなり、あとから項目を追加するときの間違いも減ります。

30
00:02:22.812 --> 00:02:25.101
まずユーエルとの組み合わせです。

31
00:02:25.101 --> 00:02:31.967
ユーエルは順番に意味がないリストの親で、中のエルアイには通常、丸い点の記号が付いて表示されます。

32
00:02:31.967 --> 00:02:38.117
画面の例はサイトの案内リンク集を想定した並びで、項目を入れ替えても意味は変わりません。

33
00:02:38.117 --> 00:02:44.125
こうした特徴、持ち物、リンク集など、順序より顔ぶれが大切な場面がユーエルの出番です。

34
00:02:44.125 --> 00:02:48.702
エルアイの中には文字だけでなく、リンクや画像なども入れられます。

35
00:02:48.702 --> 00:02:53.351
点の記号を消したり変えたりしたいときは、見た目の調整としてシーエスエスを使い、

36
00:02:53.351 --> 00:02:58.000
エイチティーエムエルの構造はそのままにしておきます。

37
00:02:58.000 --> 00:03:00.213
次にオーエルとの組み合わせです。

38
00:03:00.213 --> 00:03:06.437
オーエルは順番に意味があるリストの親で、中のエルアイには一、二、三と番号が自動で付きます。

39
00:03:06.437 --> 00:03:10.033
画面の例のような料理の手順は、順序を入れ替えると結果が変わってしまうため、

40
00:03:10.033 --> 00:03:13.629
オーエルがふさわしい場面です。

41
00:03:13.629 --> 00:03:19.438
番号は自分で文字として打つのではなく、ブラウザーが項目の数に合わせて振ってくれます。

42
00:03:19.438 --> 00:03:24.141
だから項目を追加したり削除したりしても、番号は自動で振り直されます。

43
00:03:24.141 --> 00:03:31.748
手順書やランキングを作るときは、番号を手書きせず、オーエルとエルアイの組み合わせに任せるのが正しい書き方です。

44
00:03:31.748 --> 00:03:35.598
応用として、メニューと入れ子を紹介します。

45
00:03:35.598 --> 00:03:41.280
メニューは編集や共有などの操作項目を並べるリストの親で、各項目はやはりエルアイで書き、

46
00:03:41.280 --> 00:03:46.963
実際の動作はボタンなどに担当させます。

47
00:03:46.963 --> 00:03:49.713
もうひとつの応用が入れ子です。

48
00:03:49.713 --> 00:03:59.246
画面の例のように、エルアイの中にさらにユーエルを入れると、大分類の中に小分類を示す階層リストが作れます。

49
00:03:59.246 --> 00:04:06.945
このとき内側のユーエルは、親ユーエルの直下ではなく、エルアイの中に置く点が重要です。

50
00:04:06.945 --> 00:04:13.911
階層が深くなりすぎると読みにくくなるため、通常は二階層程度にとどめましょう。

51
00:04:13.911 --> 00:04:24.360
入れ子にした場合は、内側の項目がどの大分類に属しているのかが、読み上げでも伝わる構造になっているか確認しましょう。

52
00:04:24.360 --> 00:04:28.049
エルアイ専用の属性、バリューを紹介します。

53
00:04:28.049 --> 00:04:33.845
バリューはオーエルの中で、その項目の番号を指定するための属性です。

54
00:04:33.845 --> 00:04:36.480
記事の活用事例が画面の例です。

55
00:04:36.480 --> 00:04:41.662
一つ目は通常どおり一番から始まりますが、二つ目にバリュー、イコール、五と書くことで、

56
00:04:41.662 --> 00:04:46.844
その項目が五番として表示されます。

57
00:04:46.844 --> 00:04:51.059
続きの項目があれば、六番、七番と続いていきます。

58
00:04:51.059 --> 00:04:57.207
途中の段階を省略した手順書や、前回の続きから再開する場面で役立ちます。

59
00:04:57.207 --> 00:05:04.936
注意点として、バリューは番号の話なので、ユーエルの項目に番号を付ける用途では使いません。

60
00:05:04.936 --> 00:05:09.151
親がオーエルのときだけ使う属性と覚えてください。

61
00:05:09.151 --> 00:05:18.988
開始番号全体を変えたい場合は親のオーエル側の設定も関係しますが、途中の項目だけを変えるならバリューが担当します。

62
00:05:18.988 --> 00:05:23.557
エルアイにも、ほかの要素と同じ共通属性が使えます。

63
00:05:23.557 --> 00:05:32.331
アイディーは文書の中でひとつだけの目印で、ページ内リンクやジャバスクリプトからの参照に使います。

64
00:05:32.331 --> 00:05:42.932
クラスは複数の項目をまとめて選ぶための名前で、画面の例のように特定の項目だけへシーエスエスを当てる場面で活躍します。

65
00:05:42.932 --> 00:05:48.415
ラングは内容の言語を示し、データ属性はアプリ独自の値をそっと保持するために使いますが、

66
00:05:48.415 --> 00:05:53.899
秘密情報を置く場所ではありません。

67
00:05:53.899 --> 00:05:59.473
同名の属性でも要素によって意味が違う場合があるため、エルアイではバリューが番号を表す、

68
00:05:59.473 --> 00:06:05.048
という点は特に区別しておきましょう。

69
00:06:05.048 --> 00:06:07.829
よくある間違いを三つ挙げます。

70
00:06:07.829 --> 00:06:13.762
一つ目は、親のないエルアイをボディへ直接置いてしまう間違いです。

71
00:06:13.762 --> 00:06:18.398
見た目がそれらしくなっても、構造としては誤りです。

72
00:06:18.398 --> 00:06:28.781
二つ目は、オーエルなのに番号まで文字で打ってしまう間違いで、これでは項目を増減したときに番号がずれてしまいます。

73
00:06:28.781 --> 00:06:35.826
三つ目は、点や番号の見た目が欲しいだけの理由でリストにしてしまう間違いです。

74
00:06:35.826 --> 00:06:44.541
リストは並んだ項目という意味で選ぶもので、字下げや余白が目的であればシーエスエスで調整します。

75
00:06:44.541 --> 00:06:51.957
意味からタグを選び、見た目はシーエスエス、という原則をいつも思い出してください。

76
00:06:51.957 --> 00:07:02.340
特にナビゲーションをリストで書く場合は、リンクの文字が操作の行き先を正しく伝えているかも合わせて見直しましょう。

77
00:07:02.340 --> 00:07:04.483
ブラウザー互換性を確認します。

78
00:07:04.483 --> 00:07:09.054
記事が参照するエムディーエヌの記録では、エルアイ要素はクロームが一以降、

79
00:07:09.054 --> 00:07:13.625
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降で対応しており、

80
00:07:13.625 --> 00:07:18.196
現在の主要ブラウザーでは安心して使えます。

81
00:07:18.196 --> 00:07:24.053
バリュー属性についても、サファリの四以前を含む古い時期から対応が記録されています。

82
00:07:24.053 --> 00:07:30.767
実装後の確認では、開発者ツールのエレメンツで親子関係が意図どおりになっているかを見てください。

83
00:07:30.767 --> 00:07:36.766
ソースと実際の構造が違う場合は、不正な入れ子をブラウザーが補正した可能性があります。

84
00:07:36.766 --> 00:07:43.480
あわせて三百二十ピクセル程度の細い画面や文字拡大でも、項目が欠けずに読めるかを確認しましょう。

85
00:07:43.480 --> 00:07:44.836
最後にまとめです。

86
00:07:44.836 --> 00:07:49.206
エルアイタグは、リストの中のひとつの項目を表す要素でした。

87
00:07:49.206 --> 00:07:50.712
ポイントは三つです。

88
00:07:50.712 --> 00:07:57.342
一つ目、エルアイは単独では使えず、ユーエル、オーエル、メニューのいずれかを親にすること。

89
00:07:57.342 --> 00:08:01.485
二つ目、順番に意味がなければユーエル、意味があればオーエルというように、

90
00:08:01.485 --> 00:08:05.629
親の選び方でリストの性質が決まること。

91
00:08:05.629 --> 00:08:13.162
三つ目、バリュー属性はオーエルの中で番号を途中から変えるためのもので、ユーエルでは使わないことです。

92
00:08:13.162 --> 00:08:20.696
練習として、持ち物リストをユーエルで、手順をオーエルで、それぞれエルアイを使って書いてみてください。

93
00:08:20.696 --> 00:08:22.052
お疲れさまでした。