VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の五十六本目は、エルアイタグです。
0:09エルアイは、リストの中のひとつひとつの項目を表すタグです。
0:14買い物の品目、手順のひと工程、画面メニューの選択肢など、並んで表示される項目はエルアイで書きます。
0:22ただし大切な約束があります。
0:24エルアイは単独では使えず、ユーエル、オーエル、メニューのいずれかの中に入れて初めて意味を持ちます。
0:32今回は親要素との関係、番号を途中から変えるバリュー属性、入れ子の書き方までを順に学びましょう。
0:40リストはどのサイトにも登場する基本の形なので、エルアイを正しく使えることは、
0:44読みやすいページ作りの土台になります。
0:49どんな場面で使うか、身近な例で考えてみましょう。
0:53順番に意味がない並び、たとえば持ち物リストやサイトの案内リンク集では、親にユーエルを使い、
0:58各項目をエルアイにします。
1:02逆に、料理の手順や大会の順位のように順番そのものに意味がある場合は、親にオーエルを使います。
1:10さらに、編集や共有といった操作ボタンを並べる場面では、親にメニューが候補になります。
1:17つまりエルアイ自体は項目という共通の役割を持ち、番号が付くかどうかや操作用かどうかは、
1:21親要素が決めるのです。
1:26内容の性質から親を選ぶことが第一歩です。
1:29迷ったときは、項目を並び替えても意味が通じるかどうかを自分に問いかけてみると、
1:34親の選び方が自然と決まってきます。
1:38基本の書き方を確認します。
1:40画面の例では、ユーエルの中にエルアイを三つ並べています。
1:44各項目は開始タグと終了タグで挟み、この教材では終了タグを省略せず、きちんと書きます。
1:51最も大事な注意点は配置です。
1:53エルアイだけをボディの直下へ置いてはいけません。
1:56必ずユーエル、オーエル、メニューのいずれかを親にし、その直下に置いてください。
2:02親がないエルアイは、リストの項目としての意味が伝わらず、ブラウザーが想定と違う形に補正してしまうこともあります。
2:11書く前に、親がいるかを必ず確認しましょう。
2:14インデントをそろえて書いておくと、親と子の関係が目で追いやすくなり、あとから項目を追加するときの間違いも減ります。
2:22まずユーエルとの組み合わせです。
2:25ユーエルは順番に意味がないリストの親で、中のエルアイには通常、丸い点の記号が付いて表示されます。
2:31画面の例はサイトの案内リンク集を想定した並びで、項目を入れ替えても意味は変わりません。
2:38こうした特徴、持ち物、リンク集など、順序より顔ぶれが大切な場面がユーエルの出番です。
2:44エルアイの中には文字だけでなく、リンクや画像なども入れられます。
2:48点の記号を消したり変えたりしたいときは、見た目の調整としてシーエスエスを使い、
2:53エイチティーエムエルの構造はそのままにしておきます。
2:58次にオーエルとの組み合わせです。
3:00オーエルは順番に意味があるリストの親で、中のエルアイには一、二、三と番号が自動で付きます。
3:06画面の例のような料理の手順は、順序を入れ替えると結果が変わってしまうため、
3:10オーエルがふさわしい場面です。
3:13番号は自分で文字として打つのではなく、ブラウザーが項目の数に合わせて振ってくれます。
3:19だから項目を追加したり削除したりしても、番号は自動で振り直されます。
3:24手順書やランキングを作るときは、番号を手書きせず、オーエルとエルアイの組み合わせに任せるのが正しい書き方です。
3:31応用として、メニューと入れ子を紹介します。
3:35メニューは編集や共有などの操作項目を並べるリストの親で、各項目はやはりエルアイで書き、
3:41実際の動作はボタンなどに担当させます。
3:46もうひとつの応用が入れ子です。
3:49画面の例のように、エルアイの中にさらにユーエルを入れると、大分類の中に小分類を示す階層リストが作れます。
3:59このとき内側のユーエルは、親ユーエルの直下ではなく、エルアイの中に置く点が重要です。
4:06階層が深くなりすぎると読みにくくなるため、通常は二階層程度にとどめましょう。
4:13入れ子にした場合は、内側の項目がどの大分類に属しているのかが、読み上げでも伝わる構造になっているか確認しましょう。
4:24エルアイ専用の属性、バリューを紹介します。
4:28バリューはオーエルの中で、その項目の番号を指定するための属性です。
4:33記事の活用事例が画面の例です。
4:36一つ目は通常どおり一番から始まりますが、二つ目にバリュー、イコール、五と書くことで、
4:41その項目が五番として表示されます。
4:46続きの項目があれば、六番、七番と続いていきます。
4:51途中の段階を省略した手順書や、前回の続きから再開する場面で役立ちます。
4:57注意点として、バリューは番号の話なので、ユーエルの項目に番号を付ける用途では使いません。
5:04親がオーエルのときだけ使う属性と覚えてください。
5:09開始番号全体を変えたい場合は親のオーエル側の設定も関係しますが、途中の項目だけを変えるならバリューが担当します。
5:18エルアイにも、ほかの要素と同じ共通属性が使えます。
5:23アイディーは文書の中でひとつだけの目印で、ページ内リンクやジャバスクリプトからの参照に使います。
5:32クラスは複数の項目をまとめて選ぶための名前で、画面の例のように特定の項目だけへシーエスエスを当てる場面で活躍します。
5:42ラングは内容の言語を示し、データ属性はアプリ独自の値をそっと保持するために使いますが、
5:48秘密情報を置く場所ではありません。
5:53同名の属性でも要素によって意味が違う場合があるため、エルアイではバリューが番号を表す、
5:59という点は特に区別しておきましょう。
6:05よくある間違いを三つ挙げます。
6:07一つ目は、親のないエルアイをボディへ直接置いてしまう間違いです。
6:13見た目がそれらしくなっても、構造としては誤りです。
6:18二つ目は、オーエルなのに番号まで文字で打ってしまう間違いで、これでは項目を増減したときに番号がずれてしまいます。
6:28三つ目は、点や番号の見た目が欲しいだけの理由でリストにしてしまう間違いです。
6:35リストは並んだ項目という意味で選ぶもので、字下げや余白が目的であればシーエスエスで調整します。
6:44意味からタグを選び、見た目はシーエスエス、という原則をいつも思い出してください。
6:51特にナビゲーションをリストで書く場合は、リンクの文字が操作の行き先を正しく伝えているかも合わせて見直しましょう。
7:02ブラウザー互換性を確認します。
7:04記事が参照するエムディーエヌの記録では、エルアイ要素はクロームが一以降、
7:09エッジが十二以降、ファイアフォックスが一以降、サファリが三以降で対応しており、
7:13現在の主要ブラウザーでは安心して使えます。
7:18バリュー属性についても、サファリの四以前を含む古い時期から対応が記録されています。
7:24実装後の確認では、開発者ツールのエレメンツで親子関係が意図どおりになっているかを見てください。
7:30ソースと実際の構造が違う場合は、不正な入れ子をブラウザーが補正した可能性があります。
7:36あわせて三百二十ピクセル程度の細い画面や文字拡大でも、項目が欠けずに読めるかを確認しましょう。
7:43最後にまとめです。
7:44エルアイタグは、リストの中のひとつの項目を表す要素でした。
7:49ポイントは三つです。
7:50一つ目、エルアイは単独では使えず、ユーエル、オーエル、メニューのいずれかを親にすること。
7:57二つ目、順番に意味がなければユーエル、意味があればオーエルというように、
8:01親の選び方でリストの性質が決まること。
8:05三つ目、バリュー属性はオーエルの中で番号を途中から変えるためのもので、ユーエルでは使わないことです。
8:13練習として、持ち物リストをユーエルで、手順をオーエルで、それぞれエルアイを使って書いてみてください。
8:20お疲れさまでした。

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

この動画で学べること

liタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ul・ol・menu の中の1項目です。

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