※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。
もくじ
前回のおさらい
前回は、コード・改行・プリフォーマットについて学んできました。
今回は、HTMLにおけるリスト表記の作り方について学んでいきましょう。
2種類のリスト
HTMLでリスト表記をする場合には、下記の2パターンが考えられます。
- 順番のかかわるリスト
- 順番のかかわらないリスト
どちらを適用するかによって、使うタグが異なるので、順番に見ていきましょう。
olタグ
olタグは、順番のかかわるリストを表記する場合に使用するタグとなります。olの正式名称は「ordered list」となります。orderには”順番”という意味合いもありますので、和訳すると「順番付けられたリスト」となります。
ulタグ
ulタグは、順番のかかわらないリストを表記する場合に使用するタグとなります。ulの正式名称は「unordered list」となります。orderにunがついているので、olとは対照的に「順番付けられていないリスト」と解釈することができるでしょう。
liタグ
上記2つのタグでは、それぞれのタグの中身がリストであることを示すことはできますが、実際にリスト化するには、項目を示すためのタグが別に必要になります。それがliタグです。
liタグは「list」の省略で、項目自体を作る際に使用します。
HTMLに記述してみよう
では、今回学んだ3つのタグを使って、実際にHTMLファイルに記述をしてみましょう。初期状態のHTMLコードは下記の通りです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
</body>
</html>順番のかかわるリストを作成してみよう
では、まずはolタグを使用し、順番のかかわるリストを作成してみましょう。まずはolタグを用意し、その中にliタグで4つほど項目を用意していきます。この時、olタグの中にliタグがあることがすぐにわかるように、インデントを一段下げておきましょう。コードは下記のようになります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<ol>
<li>1つめ</li>
<li>2つめ</li>
<li>3つめ</li>
<li>4つめ</li>
</ol>
</body>
</html>この状態でWebブラウザを確認すると、下記のような表示になることが確認できると思います。
項目の順番を変えてみよう
では、試しに、項目の順番を変えてみて、表示がどのようになるかを確かめてみましょう。今回は、「3つめ」を項目の一番上に持っていってみます。コードは下記の通り書き換えます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<ol>
<!-- 「3つめ」を項目の1番上へ -->
<li>3つめ</li>
<li>1つめ</li>
<li>2つめ</li>
<li>4つめ</li>
</ol>
</body>
</html>では、これをWebブラウザで確認してみましょう。以下のようになると思います。
順番のかかわらないリストにしてみよう
上記のコードで、olタグを使用したままだと、ユーザーが表示を見にくくなってしまうため、olタグからulタグに書き換えてみたいと思います。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<!-- olタグからulタグに変更 -->
<ul>
<li>3つめ</li>
<li>1つめ</li>
<li>2つめ</li>
<li>4つめ</li>
</ul>
</body>
</html>実際にどんな表示になるのか、Webブラウザで確認してみましょう。
リストの階層を増やしてみよう
リストの中に更にリストを作ることも可能です。これにより、リストが階層で表示されるようになります。
最初に作ったリストをコピーして、一番上の項目の中に、更にulタグを用いてリストを作ってみましょう。コードは下記の通りです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<ul>
<li>3つめ</li>
<!-- リストの中に更にリストを追加 -->
<ul>
<li>3つめ</li>
<li>1つめ</li>
<li>2つめ</li>
<li>4つめ</li>
</ul>
<li>1つめ</li>
<li>2つめ</li>
<li>4つめ</li>
</ul>
</body>
</html>これをWebブラウザで確認すると、以下のようになると思います。
おわりに
今回は、HTMLのリスト表記の作り方について見てきました。覚えてしまえばその構造は極めて単純ですが、似たような名前のタグのため、それぞれの名前と使い方をしっかり理解するまでは、何度か自分でリストを作成してみてください。
