6日でできる 新HTML&CSS入門｜リストの種類と使い方
情報を見やすく並べるだけで、ページはぐっと伝わりやすくなる。リストタグを使いこなして、整理されたHTMLを書けるようになろう。
Webページでは、複数の情報を順番に並べたり、似た内容をひとまとまりにして見せたりする場面がよくあります。たとえば、持ち物一覧、作業手順、メニュー、予定表、目次などは、文章としてだらだら書くよりも、リストとして整理したほうがずっと読みやすくなります。
そこで活躍するのが、ul、ol、li というリスト用のタグです。ul は順序のない項目を並べるときに使い、ol は順番が大切な項目を並べるときに使います。そして、実際のひとつひとつの項目は li で表します。
リストタグは、単に箇条書きを作るためだけのものではありません。情報の関係を分かりやすくしたり、見た目を整理したり、内容の優先順位を伝えたりするうえでも大切な役割を持っています。さらに、入れ子のリストを使えば、親子関係のある情報を階層的に表現することもできます。
この記事では、番号なしリストと番号付きリストの基本から始めて、入れ子構造、type 属性や start 属性による表示の変化、hr による区切り、コメントの使い方まで、リストに関係する基本をひとつずつ丁寧に見ていきます。HTMLの書き方にまだ慣れていない方でも流れがつかみやすいように、サンプルHTMLと図を交えながらやさしく解説していきます。
リストタグは情報整理のために使う
リストタグの基本は、とてもシンプルです。まず、リスト全体を囲むタグがあり、その中に複数の項目を並べます。
| タグ | 役割 | 使う場面 |
|---|---|---|
| ul | 順序なしリストを作る | 順番が重要ではない一覧 |
| ol | 順序付きリストを作る | 手順や流れなど順番が重要な一覧 |
| li | リスト項目を表す | ul や ol の中の各項目 |
たとえば、好きな食べ物や持ち物のように、並ぶ順番にあまり意味がない場合は ul を使います。一方で、作業の手順や一日の流れのように、1番目、2番目、3番目という順序が大切な場合は ol を使います。
li は、ul や ol の中に書く個々の項目です。li は単独で使うのではなく、必ずリスト全体を表す ul または ol の中で使う、という点を押さえておくと混乱しにくくなります。
図1：番号なしリストと番号付きリストの違い
この図から分かること
この図から分かるのは、リストには大きく分けて二つの使い方があるということです。順番を意識しなくてよい一覧には ul、順番が大切な一覧には ol を使います。そして、どちらの場合も実際の項目は li で書きます。
HTMLでは、見た目だけでなく、内容の意味に合ったタグを選ぶことが大切です。番号が付いているから ol を使う、箇条書きだから ul を使う、という感覚を身につけると、ページ全体が整理されて読みやすくなります。
番号なしリスト ul と li の使い方
番号なしリストは、順番に強い意味を持たせずに項目を並べたいときに使います。たとえば、持ち物、好きな食べ物、サービスの特徴、必要な道具などをまとめるときに向いています。
番号なしリストでは、リスト全体を ul で囲み、その中に li を並べていきます。ブラウザでは、一般的に黒丸などのマーカー付きで表示されます。
ファイル名： lesson12_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>勉強道具の一覧</title>
</head>
<body>
<h1>今日の勉強道具</h1>
<ul>
<li>ノート</li>
<li>シャープペンシル</li>
<li>参考書</li>
</ul>
</body>
</html>ブラウザの表示例
このHTMLをブラウザで表示すると、「今日の勉強道具」という見出しの下に、3つの項目が箇条書きで並びます。項目に順番の意味はなく、ひとまとまりの情報として見せたい内容に向いています。
| 表示される内容 | 例 |
|---|---|
| 見出し | 今日の勉強道具 |
| 1つ目の項目 | ノート |
| 2つ目の項目 | シャープペンシル |
| 3つ目の項目 | 参考書 |
このように、関連するものを並べて見せたいときは、番号なしリストがとても便利です。文章で「ノート、シャープペンシル、参考書です」と書くよりも、ひと目で内容が分かりやすくなります。
番号付きリスト ol と li の使い方
番号付きリストは、順番が重要な情報を並べるときに使います。たとえば、作業手順、料理の流れ、申込方法、学習の進め方などに向いています。
番号付きリストでは、リスト全体を ol で囲み、その中に li を並べます。ブラウザでは、一般的に 1、2、3 という番号付きで表示されます。
ファイル名： lesson12_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>朝の準備手順</title>
</head>
<body>
<h1>出発前の流れ</h1>
<ol>
<li>目覚ましを止める</li>
<li>顔を洗う</li>
<li>持ち物を確認する</li>
</ol>
</body>
</html>ブラウザの表示例
このHTMLをブラウザで表示すると、「出発前の流れ」という見出しの下に、1、2、3 の番号付きで項目が表示されます。
| 表示される内容 | 例 |
|---|---|
| 見出し | 出発前の流れ |
| 1番目 | 目覚ましを止める |
| 2番目 | 顔を洗う |
| 3番目 | 持ち物を確認する |
この例では、順番が入れ替わると意味が変わりやすいため、ol を使うのが自然です。順序のある情報を整理して見せたいときは、ol を選ぶようにすると分かりやすいHTMLになります。
入れ子のリストで階層構造を表す
リストは、一段だけでなく、項目の中にさらに別のリストを入れることができます。これを入れ子、またはネストといいます。
入れ子のリストを使うと、大きな分類の中に小さな分類を入れるような階層構造を表現できます。たとえば、料理の種類ごとにメニューを分けたり、学習分野ごとに内容を整理したりするときに便利です。
<ul>
<li>スポーツ
<ul>
<li>サッカー</li>
<li>バスケットボール</li>
</ul>
</li>
<li>音楽
<ul>
<li>ピアノ</li>
<li>ギター</li>
</ul>
</li>
</ul>このように書くと、「スポーツ」と「音楽」が大きな項目になり、その中にさらに具体的な項目が並びます。親になる li の中に、子となる ul を入れている点がポイントです。
入れ子のリストは便利ですが、階層が深くなりすぎると見にくくなることもあります。最初は1段階か2段階程度を意識して、分かりやすい構造を保つとよいでしょう。
図2：入れ子リストと属性による表示の変化
この図から分かること
この図では、リストが単に項目を並べるだけでなく、階層構造を持たせたり、表示方法を変えたりできることが分かります。入れ子のリストを使うと、大きな分類とその中身を整理して表現できます。
また、type 属性や start 属性を使うと、番号やマーカーの見え方を調整できます。内容に合った表示を選ぶことで、読み手にとって分かりやすいページにしやすくなります。
type 属性でリストの見え方を変える
リストは、内容を整理するためのタグですが、属性を使うことで表示の種類を変えることもできます。ここでよく使うのが type 属性です。
ul では、マーカーの種類を変えられます。たとえば、黒丸だけでなく、白丸や四角のマーカーにすることができます。
<h2>楽器一覧</h2>
<ul type="circle">
<li>ピアノ</li>
<li>ギター</li>
<li>フルート</li>
</ul>この例では、通常の黒丸ではなく、白丸のマーカーで項目が表示されます。
一方、ol では、数字以外の形式に変更できます。たとえば、大文字アルファベット、小文字アルファベット、ローマ数字などにすることができます。
<h2>発表の流れ</h2>
<ol type="I">
<li>導入</li>
<li>説明</li>
<li>質疑応答</li>
</ol>この場合は、1、2、3 ではなく、I、II、III のような形で表示されます。
| リストの種類 | 主な属性 | 例 |
|---|---|---|
| ul | type | disc、circle、square など |
| ol | type | 1、A、a、I、i など |
| ol | start | 開始番号を変更する |
| ol | reversed | 逆順で表示する |
ただし、見た目を細かく整える役割は本来CSSが中心です。ここではHTMLの基本として、type 属性や start 属性で簡単に表示を変えられることを知っておくとよいでしょう。
start 属性で開始番号を変える
番号付きリストでは、通常は 1 から始まりますが、start 属性を使うと開始位置を変えられます。これは、途中から続く手順や、前の番号から続けたい場面で便利です。
<ol start="4">
<li>資料を配布する</li>
<li>説明を始める</li>
</ol>このように書くと、表示は 4、5 から始まります。
また、type 属性と組み合わせることもできます。たとえば、type="A" と start="3" を組み合わせると、A、B、C のうち C から始まる形になります。番号の続きや章の表記など、少し工夫したいときに役立ちます。
hr で内容を区切る
複数のリストや内容のまとまりを見やすく分けたいときには、hr を使うことができます。hr は水平線を表示するタグで、ページ内の区切りを視覚的に示すのに向いています。
<h2>午前の予定</h2>
<ul>
<li>メール確認</li>
</ul>
<hr>
<h2>午後の予定</h2>
<ul>
<li>ミーティング</li>
</ul>このようにすると、「午前の予定」と「午後の予定」の間に線が入り、内容が切り替わることが分かりやすくなります。
hr はリスト専用のタグではありませんが、リストと組み合わせると情報のまとまりを見せやすくなります。内容が長くなってきたときに、視線を整理する助けになります。
コメントはコードのメモとして使う
HTMLでは、画面には表示されないメモを書き残すことができます。それがコメントです。コメントは、作業の意図を残したり、どこからどこまでが何の処理かを分かりやすくしたりするときに便利です。
<!-- 午前の予定一覧 -->このように書いたコメントは、ブラウザの画面には表示されません。あくまで、HTMLを書いている人や、あとから見直す人のための目印です。
リストが多くなると、どの部分が何の一覧なのか分かりにくくなることがあります。そんなときにコメントを入れておくと、ソースコードが読みやすくなります。特に、複数人で制作するときや、後日自分で見返すときに役立ちます。
リストの応用をまとめて確認する
ここまで見てきた内容をひとつのHTMLファイルの中でまとめて使うと、リストの便利さがより実感しやすくなります。ここでは、番号なしリスト、番号付きリスト、type 属性、start 属性、hr、コメントを組み合わせた例を見てみましょう。
ファイル名： lesson12_3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>週末の予定</title>
</head>
<body>
<h1>理想の週末スケジュール</h1>
<!-- 午前の予定 -->
<h2>午前にやりたいこと</h2>
<ul type="square">
<li>近所を散歩する</li>
<li>カフェで朝食をとる</li>
<li>本を読む</li>
</ul>
<hr>
<!-- 午後の予定 -->
<h2>午後の行動予定</h2>
<ol type="A" start="3">
<li>映画を見る</li>
<li>買い物をする</li>
<li>夕食を楽しむ</li>
</ol>
</body>
</html>ブラウザの表示例
このHTMLをブラウザで表示すると、最初に「理想の週末スケジュール」という見出しが表示され、その下に午前と午後の予定が分かれて表示されます。午前の予定は四角いマーカー付きの箇条書きになり、午後の予定は A、B、C ではなく、start 属性によって C から始まるアルファベット付きのリストとして表示されます。
| 表示される部分 | 内容 |
|---|---|
| 大見出し | 理想の週末スケジュール |
| 午前の予定 | 四角マーカーの箇条書き |
| 区切り | hr による水平線 |
| 午後の予定 | C から始まるアルファベット付きリスト |
この例を見ると、リストタグは単に項目を並べるだけでなく、見出しや区切り線、コメントと組み合わせることで、より整理されたページを作れることが分かります。
図3：リスト・区切り線・コメントを組み合わせた実践例
この図から分かること
この図からは、リスト関連のタグや属性を組み合わせることで、ページの情報整理がしやすくなることが分かります。番号なしリストと番号付きリストを場面によって使い分けることで、内容の性質が伝わりやすくなります。
さらに、hr によって内容の切れ目がはっきりし、コメントによってソースコードの意図も分かりやすくなります。画面に見える部分と、ソースコードの読みやすさの両方を意識することが、丁寧なHTMLを書くうえで大切です。
使用するタグを整理しておこう
ここまで登場したタグや属性を、役割ごとに整理しておきます。
| タグ | 用途 | 主な属性 | 閉じタグ |
|---|---|---|---|
| DOCTYPE html | 文書型宣言 | なし | 不要 |
| html | HTML文書全体を包む | lang | 必要 |
| head | ページの設定情報 | なし | 必要 |
| meta | 文字コードやページ情報の指定 | charset、name、content | 不要 |
| title | ページの題名 | なし | 必要 |
| body | 画面に表示する内容 | なし | 必要 |
| h1 から h6 | 見出し | なし | 必要 |
| ul | 番号なしリスト | type | 必要 |
| ol | 番号付きリスト | type、start、reversed | 必要 |
| li | リスト項目 | なし | 必要 |
| hr | 水平線による区切り | なし | 不要 |
| コメント | なし | 不要 |
最初は、ul、ol、li の使い分けだけでも十分です。そこに慣れてきたら、入れ子のリスト、type 属性、start 属性、hr、コメントへと少しずつ広げていくと、無理なく理解しやすくなります。
リストを書くときに意識したいこと
リストタグを使うときは、まず「この情報は順番が大事かどうか」を考えると選びやすくなります。順番が大事でなければ ul、順番が大事なら ol です。そのうえで、ひとつひとつの項目を li で書きます。
また、情報が多くなってきたら、入れ子のリストで階層を作ったり、hr でまとまりを分けたり、コメントでコードにメモを残したりすると、HTMLがぐっと扱いやすくなります。
リストタグは、メニュー、目次、手順説明、予定表、商品一覧など、Webページのさまざまな場面で使われます。基本の使い方をしっかり身につけておくと、情報を整理して見せる力がぐっと高まります。HTMLの中でも特に出番の多いタグなので、サンプルを書きながら少しずつ慣れていくとよいでしょう。