【HTML5入門】3-1 リスト項目(HTMLのリスト表記)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

※本記事は、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ブラウザを確認すると、下記のような表示になることが確認できると思います。

各項目の最初に番号が振られているのが確認できますね。これはWebブラウザがHTMLに記述してあるolタグを読み取った結果となります。これにより、このリストに順番が付けられていることがわかります。

項目の順番を変えてみよう

では、試しに、項目の順番を変えてみて、表示がどのようになるかを確かめてみましょう。今回は、「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ブラウザで確認してみましょう。以下のようになると思います。

HTMLファイルに記載した通りの順番になったため、olタグで付けられた順番と対応しなくなってしまいましたね。

順番のかかわらないリストにしてみよう

上記のコードで、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ブラウザで確認すると、以下のようになると思います。

リストが別の記号によって階層表示されていれば、OKです。こうした技法を用いることによってわかりやすくなるリスト表示も沢山あります。

おわりに

今回は、HTMLのリスト表記の作り方について見てきました。覚えてしまえばその構造は極めて単純ですが、似たような名前のタグのため、それぞれの名前と使い方をしっかり理解するまでは、何度か自分でリストを作成してみてください。

次の記事はこちら

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
     

コメントを残す

*