WEBVTT

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

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

3
00:00:04.454 --> 00:00:08.272
HTMLタグ編の四十五本目は、オーエルタグです。

4
00:00:08.272 --> 00:00:14.476
オーエルは、順番に意味がある項目を並べるための、番号付きリストを作るタグです。

5
00:00:14.476 --> 00:00:21.634
たとえば作業の手順や、ランキングの順位のように、並び順そのものに意味がある場面で使います。

6
00:00:21.634 --> 00:00:28.157
項目を書いた順番に、ブラウザーが自動で一、二、三と番号を振ってくれるのが特徴です。

7
00:00:28.157 --> 00:00:33.724
今回は基本の書き方から、開始番号を変えるスタート、番号の種類を変えるタイプ、

8
00:00:33.724 --> 00:00:39.292
逆順にするリバースドという三つの属性まで、順に確認していきます。

9
00:00:39.292 --> 00:00:42.431
どんな場面で使うのかを整理します。

10
00:00:42.431 --> 00:00:46.679
代表例は、決まった順番で実行する作業手順です。

11
00:00:46.679 --> 00:00:51.480
料理の作り方や、申し込みの流れなどが当てはまります。

12
00:00:51.480 --> 00:00:58.683
次に、人気ランキングや順位の発表など、順番自体が情報になる場面も向いています。

13
00:00:58.683 --> 00:01:05.885
判断のコツはシンプルで、項目の順番を入れ替えたときに意味が変わるかどうかです。

14
00:01:05.885 --> 00:01:12.164
変わるならオーエル、変わらないなら点で表示されるユーエルを選びます。

15
00:01:12.164 --> 00:01:20.474
たとえば買い物リストは順番に意味がないのでユーエル、手順書は順番が大切なのでオーエルです。

16
00:01:20.474 --> 00:01:28.600
番号の見た目が欲しいからではなく、順序に意味があるからオーエルを使う、と覚えてください。

17
00:01:28.600 --> 00:01:30.572
基本の書き方を確認します。

18
00:01:30.572 --> 00:01:31.938
構造は二階層です。

19
00:01:31.938 --> 00:01:37.551
外側をオーエルで囲み、その中に、項目を表すエルアイを必要な数だけ並べます。

20
00:01:37.551 --> 00:01:42.861
この教材では、開始タグと終了タグを省略せず、はっきり書くことにします。

21
00:01:42.861 --> 00:01:48.930
大切な決まりは、オーエルの直下に置けるのは、基本的にエルアイだけということです。

22
00:01:48.930 --> 00:01:53.633
文章をそのままオーエルの中へ書くのは、正しい形ではありません。

23
00:01:53.633 --> 00:01:57.426
また、番号は自分で文字として書く必要はありません。

24
00:01:57.426 --> 00:02:02.281
エルアイの数に合わせて、ブラウザーが自動で連番を付けてくれます。

25
00:02:02.281 --> 00:02:09.260
項目を増やしたり減らしたりしても、番号は自動で振り直されるので、手直しの手間がかかりません。

26
00:02:09.260 --> 00:02:12.740
記事の活用例を、自分の言葉でたどってみましょう。

27
00:02:12.740 --> 00:02:17.090
エイチティーエムエル入門で作る、最初のページの作業手順です。

28
00:02:17.090 --> 00:02:22.456
一番目に、インデックスドットエイチティーエムエルというファイルを作ります。

29
00:02:22.456 --> 00:02:25.791
二番目に、そのファイルをブラウザーで開きます。

30
00:02:25.791 --> 00:02:29.851
三番目に、内容を変更して再読み込みし、結果を確認します。

31
00:02:29.851 --> 00:02:33.476
この三つは、順番を入れ替えると作業が成立しません。

32
00:02:33.476 --> 00:02:37.101
だからこそ、番号付きのオーエルがふさわしい例です。

33
00:02:37.101 --> 00:02:43.192
開始タグには、スタート、イコール、一とあり、一番から番号を始める指定になっています。

34
00:02:43.192 --> 00:02:49.572
ふだんは省略しても一から始まりますが、意図をはっきり示す書き方として覚えておきましょう。

35
00:02:49.572 --> 00:02:53.735
スタート属性は、番号の始まりを変えるための属性です。

36
00:02:53.735 --> 00:02:57.897
ふつうは一番から始まりますが、スタートに四と書けば、四番、五番という具合に、

37
00:02:57.897 --> 00:03:02.060
途中から番号を続けられます。

38
00:03:02.060 --> 00:03:09.585
たとえば、手順の説明が見出しごとに分かれていて、前の続きとして番号をつなげたいときに便利です。

39
00:03:09.585 --> 00:03:11.346
値は整数で指定します。

40
00:03:11.346 --> 00:03:19.031
マイナスの数を書くこともできますが、初心者のうちは、正の数で素直に使うのが分かりやすいでしょう。

41
00:03:19.031 --> 00:03:25.596
スタートを指定しなくても自動で一番から始まるので、必要なときだけ書けば大丈夫です。

42
00:03:25.596 --> 00:03:33.601
番号を文字で直接書くのと違い、項目を増やしたり減らしたりしても、続きの番号が自動で整うのが利点です。

43
00:03:33.601 --> 00:03:37.395
タイプ属性は、番号の見た目の種類を変える属性です。

44
00:03:37.395 --> 00:03:46.046
値が一ならふつうの数字、小文字のエーなら小文字のアルファベット、大文字のエーなら大文字のアルファベットになります。

45
00:03:46.046 --> 00:03:52.117
さらに、小文字のアイは小文字のローマ数字、大文字のアイは大文字のローマ数字です。

46
00:03:52.117 --> 00:03:55.912
たとえば、大きな手順は数字で、その中の小さな分類はアルファベットで示す、

47
00:03:55.912 --> 00:03:59.706
といった使い分けができます。

48
00:03:59.706 --> 00:04:05.018
ただし、番号の種類を変えても、順序があるという意味自体は変わりません。

49
00:04:05.018 --> 00:04:10.330
細かな見た目の調整は、シーエスエスのリストスタイルタイプでもできます。

50
00:04:10.330 --> 00:04:14.732
意味として種類を決めたいときはタイプ属性、装飾として変えたいときはシーエスエス、

51
00:04:14.732 --> 00:04:19.133
と使い分けると整理しやすくなります。

52
00:04:19.133 --> 00:04:23.081
リバースド属性は、番号を逆順にするための属性です。

53
00:04:23.081 --> 00:04:29.241
付けると、項目の数から数え始めて、三、二、一というように番号が減っていきます。

54
00:04:29.241 --> 00:04:36.348
ランキングを三位から一位へ順に発表する場面や、カウントダウン形式の一覧などに向いています。

55
00:04:36.348 --> 00:04:41.086
画面の例では、銅メダル、銀メダル、金メダルの順に書くことで、三、二、一の番号とともに、

56
00:04:41.086 --> 00:04:45.824
順位が上がっていく発表ができます。

57
00:04:45.824 --> 00:04:50.246
ここで大切なのが、リバースドは真偽属性だということです。

58
00:04:50.246 --> 00:04:58.459
属性が書いてあるかどうかだけで決まるので、リバースド、イコール、フォルスと書いても逆順は解除されません。

59
00:04:58.459 --> 00:05:03.513
ふつうの順序に戻したいときは、属性そのものを取り除いてください。

60
00:05:03.513 --> 00:05:05.188
応用を二つ紹介します。

61
00:05:05.188 --> 00:05:06.710
一つ目は入れ子です。

62
00:05:06.710 --> 00:05:13.410
大きな手順の中に小さな手順を作りたいときは、エルアイの中に、もう一つオーエルを入れます。

63
00:05:13.410 --> 00:05:19.195
オーエルの直下にオーエルを置くのは誤りで、必ずエルアイを挟むのが決まりです。

64
00:05:19.195 --> 00:05:22.545
二つ目は、エルアイに付けるバリュー属性です。

65
00:05:22.545 --> 00:05:27.569
画面の例では、二番目の項目にバリュー、イコール、十と書くことで、その項目だけが十番になり、

66
00:05:27.569 --> 00:05:32.594
続きの項目は十一番と自動で続いていきます。

67
00:05:32.594 --> 00:05:36.857
採番の例外を作りたいときに便利ですが、多用すると順番が分かりにくくなるので、

68
00:05:36.857 --> 00:05:41.120
本当に必要な場面だけに絞りましょう。

69
00:05:41.120 --> 00:05:45.383
入れ子も二階層ほどまでに抑えると、読みやすさを保てます。

70
00:05:45.383 --> 00:05:47.881
よくある間違いを三つ確認します。

71
00:05:47.881 --> 00:05:53.189
一つ目は、順序に意味がない内容にまでオーエルを使ってしまうことです。

72
00:05:53.189 --> 00:06:00.684
番号が付く見た目が欲しいだけなら、意味の面ではユーエルが正解で、見た目はシーエスエスで整えます。

73
00:06:00.684 --> 00:06:05.680
二つ目は、オーエルの直下に文章やピー要素をそのまま置くことです。

74
00:06:05.680 --> 00:06:08.490
項目は必ずエルアイに入れてください。

75
00:06:08.490 --> 00:06:13.642
三つ目は、項目の先頭に一、二、三と番号を手書きしてしまうことです。

76
00:06:13.642 --> 00:06:17.858
自動で付く番号と重なって、二重表示になってしまいます。

77
00:06:17.858 --> 00:06:25.508
公開前の確認として、そのリストは順番を入れ替えたら意味が変わるか、という問いを立ててみてください。

78
00:06:25.508 --> 00:06:28.943
答えがイエスなら、オーエルの使いどころです。

79
00:06:28.943 --> 00:06:31.190
ブラウザー互換性を確認します。

80
00:06:31.190 --> 00:06:37.109
記事が参照するエムディーエヌの記録では、オーエルタグはクロームが一以降、

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

82
00:06:43.027 --> 00:06:47.222
スタート属性とタイプ属性も、同じく最初期からの対応です。

83
00:06:47.222 --> 00:06:51.492
一方、リバースド属性は少し新しく、クロームとファイアフォックスでは十八以降、

84
00:06:51.492 --> 00:06:55.762
サファリでは六以降と記録されています。

85
00:06:55.762 --> 00:07:00.257
とはいえ、いずれも現在の主要ブラウザーでは問題なく使えます。

86
00:07:00.257 --> 00:07:08.798
番号の見え方は、ブラウザーの標準スタイルに任される部分もあるため、公開前に実際の画面で一度確認しておくと安心です。

87
00:07:08.798 --> 00:07:12.843
細部の表示差は、実際に開いて目で確かめるのが確実です。

88
00:07:12.843 --> 00:07:14.364
最後にまとめです。

89
00:07:14.364 --> 00:07:21.463
オーエルタグは、手順や順位など、順番に意味がある項目を並べる、番号付きリストでした。

90
00:07:21.463 --> 00:07:23.153
ポイントは三つです。

91
00:07:23.153 --> 00:07:29.407
一つ目、オーエルの中にはエルアイだけを置き、番号はブラウザーに任せること。

92
00:07:29.407 --> 00:07:36.337
二つ目、開始番号はスタート、番号の種類はタイプ、逆順はリバースドで調整できること。

93
00:07:36.337 --> 00:07:41.069
三つ目、順序に意味がない内容にはユーエルを使うことです。

94
00:07:41.069 --> 00:07:49.351
練習として、朝の支度や料理の手順など、身近な手順を三つから五つの項目でオーエルにしてみてください。

95
00:07:49.351 --> 00:07:54.253
順番どおりに読んで作業がイメージできれば、理解は十分です。

96
00:07:54.253 --> 00:07:55.774
お疲れさまでした。

97
00:07:55.774 --> 00:07:57.295
次回もお楽しみに。