VIDEO LESSON

HTMLのolタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:57動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の四十五本目は、オーエルタグです。
0:08オーエルは、順番に意味がある項目を並べるための、番号付きリストを作るタグです。
0:14たとえば作業の手順や、ランキングの順位のように、並び順そのものに意味がある場面で使います。
0:21項目を書いた順番に、ブラウザーが自動で一、二、三と番号を振ってくれるのが特徴です。
0:28今回は基本の書き方から、開始番号を変えるスタート、番号の種類を変えるタイプ、
0:33逆順にするリバースドという三つの属性まで、順に確認していきます。
0:39どんな場面で使うのかを整理します。
0:42代表例は、決まった順番で実行する作業手順です。
0:46料理の作り方や、申し込みの流れなどが当てはまります。
0:51次に、人気ランキングや順位の発表など、順番自体が情報になる場面も向いています。
0:58判断のコツはシンプルで、項目の順番を入れ替えたときに意味が変わるかどうかです。
1:05変わるならオーエル、変わらないなら点で表示されるユーエルを選びます。
1:12たとえば買い物リストは順番に意味がないのでユーエル、手順書は順番が大切なのでオーエルです。
1:20番号の見た目が欲しいからではなく、順序に意味があるからオーエルを使う、と覚えてください。
1:28基本の書き方を確認します。
1:30構造は二階層です。
1:31外側をオーエルで囲み、その中に、項目を表すエルアイを必要な数だけ並べます。
1:37この教材では、開始タグと終了タグを省略せず、はっきり書くことにします。
1:42大切な決まりは、オーエルの直下に置けるのは、基本的にエルアイだけということです。
1:48文章をそのままオーエルの中へ書くのは、正しい形ではありません。
1:53また、番号は自分で文字として書く必要はありません。
1:57エルアイの数に合わせて、ブラウザーが自動で連番を付けてくれます。
2:02項目を増やしたり減らしたりしても、番号は自動で振り直されるので、手直しの手間がかかりません。
2:09記事の活用例を、自分の言葉でたどってみましょう。
2:12エイチティーエムエル入門で作る、最初のページの作業手順です。
2:17一番目に、インデックスドットエイチティーエムエルというファイルを作ります。
2:22二番目に、そのファイルをブラウザーで開きます。
2:25三番目に、内容を変更して再読み込みし、結果を確認します。
2:29この三つは、順番を入れ替えると作業が成立しません。
2:33だからこそ、番号付きのオーエルがふさわしい例です。
2:37開始タグには、スタート、イコール、一とあり、一番から番号を始める指定になっています。
2:43ふだんは省略しても一から始まりますが、意図をはっきり示す書き方として覚えておきましょう。
2:49スタート属性は、番号の始まりを変えるための属性です。
2:53ふつうは一番から始まりますが、スタートに四と書けば、四番、五番という具合に、
2:57途中から番号を続けられます。
3:02たとえば、手順の説明が見出しごとに分かれていて、前の続きとして番号をつなげたいときに便利です。
3:09値は整数で指定します。
3:11マイナスの数を書くこともできますが、初心者のうちは、正の数で素直に使うのが分かりやすいでしょう。
3:19スタートを指定しなくても自動で一番から始まるので、必要なときだけ書けば大丈夫です。
3:25番号を文字で直接書くのと違い、項目を増やしたり減らしたりしても、続きの番号が自動で整うのが利点です。
3:33タイプ属性は、番号の見た目の種類を変える属性です。
3:37値が一ならふつうの数字、小文字のエーなら小文字のアルファベット、大文字のエーなら大文字のアルファベットになります。
3:46さらに、小文字のアイは小文字のローマ数字、大文字のアイは大文字のローマ数字です。
3:52たとえば、大きな手順は数字で、その中の小さな分類はアルファベットで示す、
3:55といった使い分けができます。
3:59ただし、番号の種類を変えても、順序があるという意味自体は変わりません。
4:05細かな見た目の調整は、シーエスエスのリストスタイルタイプでもできます。
4:10意味として種類を決めたいときはタイプ属性、装飾として変えたいときはシーエスエス、
4:14と使い分けると整理しやすくなります。
4:19リバースド属性は、番号を逆順にするための属性です。
4:23付けると、項目の数から数え始めて、三、二、一というように番号が減っていきます。
4:29ランキングを三位から一位へ順に発表する場面や、カウントダウン形式の一覧などに向いています。
4:36画面の例では、銅メダル、銀メダル、金メダルの順に書くことで、三、二、一の番号とともに、
4:41順位が上がっていく発表ができます。
4:45ここで大切なのが、リバースドは真偽属性だということです。
4:50属性が書いてあるかどうかだけで決まるので、リバースド、イコール、フォルスと書いても逆順は解除されません。
4:58ふつうの順序に戻したいときは、属性そのものを取り除いてください。
5:03応用を二つ紹介します。
5:05一つ目は入れ子です。
5:06大きな手順の中に小さな手順を作りたいときは、エルアイの中に、もう一つオーエルを入れます。
5:13オーエルの直下にオーエルを置くのは誤りで、必ずエルアイを挟むのが決まりです。
5:19二つ目は、エルアイに付けるバリュー属性です。
5:22画面の例では、二番目の項目にバリュー、イコール、十と書くことで、その項目だけが十番になり、
5:27続きの項目は十一番と自動で続いていきます。
5:32採番の例外を作りたいときに便利ですが、多用すると順番が分かりにくくなるので、
5:36本当に必要な場面だけに絞りましょう。
5:41入れ子も二階層ほどまでに抑えると、読みやすさを保てます。
5:45よくある間違いを三つ確認します。
5:47一つ目は、順序に意味がない内容にまでオーエルを使ってしまうことです。
5:53番号が付く見た目が欲しいだけなら、意味の面ではユーエルが正解で、見た目はシーエスエスで整えます。
6:00二つ目は、オーエルの直下に文章やピー要素をそのまま置くことです。
6:05項目は必ずエルアイに入れてください。
6:08三つ目は、項目の先頭に一、二、三と番号を手書きしてしまうことです。
6:13自動で付く番号と重なって、二重表示になってしまいます。
6:17公開前の確認として、そのリストは順番を入れ替えたら意味が変わるか、という問いを立ててみてください。
6:25答えがイエスなら、オーエルの使いどころです。
6:28ブラウザー互換性を確認します。
6:31記事が参照するエムディーエヌの記録では、オーエルタグはクロームが一以降、
6:37エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。
6:43スタート属性とタイプ属性も、同じく最初期からの対応です。
6:47一方、リバースド属性は少し新しく、クロームとファイアフォックスでは十八以降、
6:51サファリでは六以降と記録されています。
6:55とはいえ、いずれも現在の主要ブラウザーでは問題なく使えます。
7:00番号の見え方は、ブラウザーの標準スタイルに任される部分もあるため、公開前に実際の画面で一度確認しておくと安心です。
7:08細部の表示差は、実際に開いて目で確かめるのが確実です。
7:12最後にまとめです。
7:14オーエルタグは、手順や順位など、順番に意味がある項目を並べる、番号付きリストでした。
7:21ポイントは三つです。
7:23一つ目、オーエルの中にはエルアイだけを置き、番号はブラウザーに任せること。
7:29二つ目、開始番号はスタート、番号の種類はタイプ、逆順はリバースドで調整できること。
7:36三つ目、順序に意味がない内容にはユーエルを使うことです。
7:41練習として、朝の支度や料理の手順など、身近な手順を三つから五つの項目でオーエルにしてみてください。
7:49順番どおりに読んで作業がイメージできれば、理解は十分です。
7:54お疲れさまでした。
7:55次回もお楽しみに。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

olタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。手順や順位など、順番に意味があるリスト。start で開始番号も変えられます。

解説記事・サンプルコードを読む：HTMLのolタグとは？属性・使い方・ブラウザー互換性と活用例 →