VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の四本目は、ユーエルと書く、ユーエルタグです。
0:08これは、順番に意味がないリストを作るためのタグです。
0:12たとえば、買い物リストや持ち物リストのように、項目を並べ替えても意味が変わらないものをまとめるときに使います。
0:21各項目は、エルアイタグで囲んでユーエルの中に入れます。
0:25今回は、基本の書き方から、順番に意味があるリストとの使い分け、入れ子の作り方、
0:30ナビゲーションへの活用まで、初心者向けに順番に解説します。
0:35Webページで最もよく使うリストの基本を、ここでしっかり身につけましょう。
0:41ユーエルタグが活躍するのは、並べ替えても意味が変わらない項目を並べる場面です。
0:47たとえば、旅行の持ち物、買い物のメモ、商品の特徴の箇条書き、サイトのメニューなどが当てはまります。
0:54読み手にとって大切なのは、一つひとつの項目の内容であって、その順番そのものではありません。
1:01逆に、手順や順位のように順番に意味がある場合は、後で紹介するオーエルタグを使います。
1:08迷ったら、項目の順番を入れ替えても意味が通じるかどうかを考えてみてください。
1:13通じるならユーエル、通じなくなるならオーエル、という判断が基本です。
1:19意味に合ったリストを選ぶことが、正しいエイチティーエムエルの第一歩です。
1:24基本の書き方です。
1:26ユーエルタグは、開始タグと終了タグを向かい合わせに書き、その間にエルアイタグで囲んだ項目を並べます。
1:34大切なルールは、ユーエルの直接の子要素にはエルアイだけを置くことです。
1:39ユーエルの中に、文章や見出しをそのまま書くことはできません。
1:44項目以外の説明を付けたい場合は、リストの外に段落として書くか、エルアイの中に含めます。
1:51多くのブラウザーでは、項目の先頭に黒丸の印が自動で付き、少し字下げされて表示されます。
1:57これは見た目の既定であり、意味はあくまで順不同のリストであることだと覚えてください。
2:04記事の活用事例を見てみましょう。
2:06この例では、持ち物としてノートパソコンと充電器が並んでいます。
2:11どちらを先に書いても意味は変わらないため、順不同のリストであるユーエルがぴったりです。
2:17項目を増やしたいときは、エルアイタグを一行追加するだけです。
2:21試すときは、エイチティーエムエルファイルを保存して再読み込みし、開発者ツールのエレメンツで、
2:27ユーエルの中にエルアイだけが並んでいるかを確認してみてください。
2:33もし文章がユーエルの直下に紛れていたら、ブラウザーが自動で構造を補正してしまう場合があるため、
2:37書き方を見直しましょう。
2:41順番に意味があるリストとの違いを整理します。
2:45オーエルタグは、番号付きのリストを作るタグで、操作の手順やランキングの順位など、
2:50順番そのものに意味がある場合に使います。
2:55一方、ユーエルは順不同のリストで、番号は付かず、黒丸などの印が付きます。
3:01ここで大切なのは、番号を表示したいかどうかではなく、意味として順番が重要かどうかで選ぶことです。
3:09番号が不要だからユーエルにするのではなく、順番に意味がないからユーエルにする、
3:12という考え方です。
3:16見た目は後からシーエスエスで変えられるため、まずは意味で判断する習慣を付けましょう。
3:23リストの中にリストを入れる、入れ子の書き方です。
3:27ルールは一つで、新しいユーエルは、必ずエルアイタグの中に置きます。
3:32ユーエルの直下に、別のユーエルを直接置くことはできません。
3:36この例では、飲み物という項目の中に、水とお茶の小さなリストが入っています。
3:42グループ分けをしたいときに便利な書き方です。
3:45ただし、入れ子を深くしすぎると、読み手が階層を追いにくくなり、画面の幅も圧迫します。
3:51実務では、二階層程度までにとどめ、それ以上は見出しで区切ることも検討してください。
3:57構造が正しいかどうかは、タグの対応関係を一段ずつ確認すると確かめられます。
4:03活用の広げ方として、サイトのナビゲーションを紹介します。
4:07ヘッダーのメニューは、言い換えればリンクの集まりであり、順不同のリストとして表すことができます。
4:13そのため、ナブタグの中にユーエルとエルアイを置き、各項目の中にエータグのリンクを入れる書き方がよく使われます。
4:21この構造にすると、読み上げソフトでも、メニューが何項目あるのかが伝わりやすくなります。
4:27横並びにしたり、印を消したりといった見た目の調整は、シーエスエスで行います。
4:32まずは意味のある構造を作り、そのあとでデザインを整える、という順番を意識してください。
4:38属性について確認します。
4:40ユーエルタグには、このタグ専用の必須属性はありません。
4:44必要に応じて、すべての要素で使えるグローバル属性を利用します。
4:49代表的なものとして、文書の中で一意な名前を付けるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
4:55内容の言語を示すラングがあります。
5:01ほかにも、アプリ独自の値を保持するデータ属性が使えますが、秘密情報を置く場所ではない点には注意してください。
5:09古い書き方で使われていた、見た目を指定する属性は、現在は使わないものとされています。
5:16見た目の指定はシーエスエスへ、という分担を守りましょう。
5:20見た目についても触れておきます。
5:22多くのブラウザーでは、ユーエルの項目には黒丸の印が付き、左側に余白が付くのが既定です。
5:29この印は、シーエスエスのリストスタイルという指定で、四角に変えたり、消したりできます。
5:35メニューのように横並びにしたい場合は、印を消し、余白をなくしたうえで、フレックスなどを使って並べます。
5:43ここでも原則は同じで、タグは意味で選び、見た目はシーエスエスで調整します。
5:48ユーエルタグ自体に、見た目を決める役割はありません。
5:52装飾を消しても、リストであるという意味はそのまま残る点も覚えておきましょう。
5:58ブラウザー互換性を確認します。
6:00記事が参照するエムディーエヌの記録では、ユーエルタグはクロームが一以降、
6:05エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。
6:11つまり、現在の主要なブラウザーでは、長く安定して使える基本的なタグの一つです。
6:16ただし、この表が示すのは要素本体の対応であり、新しい属性や別の仕組みまで含めた完全な動作を保証するものではありません。
6:24スマートフォンのブラウザーでは条件が異なる場合もあるため、対象とする実機で表示を確認すると、
6:28より安心です。
6:32古くからあるタグほど、環境差を気にせず使える利点があります。
6:36最後に練習とまとめです。
6:38ユーエルタグは、順番に意味がないリストを作るタグでした。
6:42大切なポイントは三つです。
6:44一つ目は、ユーエルの直接の子にはエルアイだけを置くこと。
6:49二つ目は、順番に意味がある場合はオーエルタグを使うこと。
6:54三つ目は、入れ子はエルアイの中に書き、見た目はシーエスエスで調整することです。
7:00練習として、手元のエイチティーエムエルに持ち物リストを書き、項目を三つ以上並べて、
7:05表示と構造を確かめてみてください。
7:10実装後は、幅三百二十ピクセル程度の狭い画面でも項目が欠けないかも確認しましょう。
7:16お疲れさまでした。
7:18次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。

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

この動画で学べること

ulタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。順番に意味がないリスト。項目を li に入れます。

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