リスト | プログラミング入門ナビ by Proglus（プログラス）

はじめに

HTMLの学習、進んでいますか？

どのような学びの場でもいえることですが、インプットばかり行うよりも、アウトプットの場があった方が学習速度が加速します。

コード例やタグの使用例を見ながらコーディングするのも良いのですが、たまに自分で考えながらコードを書くのがおすすめです。

その機会として、この記事では演習方式でHTMLでのリスト表記方法を解説します。

先に演習問題を紹介し、その後に回答を解説しますので、腕試しとしてぜひチャレンジしてみてください。

自分でコードを書くのが重要ですので、必ずエディタを開いてやってみましょう。

動画解説

本記事の内容を動画でも解説しています。

演習：HTMLのリスト表記

https://www.youtube.com/watch?v=gO9bYC_VPaE&feature=youtu.be

演習回答：HTMLのリスト表記

https://www.youtube.com/watch?v=vtMS65OmZjM&feature=youtu.be

演習：HTMLでリスト表記をしてみよう

この演習では、HTMLでのリスト表記ができるかどうかを確認します。

HTMLのリスト表記は２種類で、箇条書き（順序なしリスト）と順序付きリストがありますね。

いずれも複数の項目を列挙したり、手順を示したりするのによく使われる機能です。

ぜひ使い方を暗記しておきたい機能ですね。

この演習では、下記のようなレストランメニューのHTMLページを作ってみましょう。正しく記述できるでしょうか？

ファイル名を「exercise-list.html」として新規作成し、エディタでコーディングしてみてください。

ヒント１：見出しの「メニュー」文字はh1要素です。
ヒント２：順序なしリスト（箇条書き）は英語で「unordered list」です。使用する要素名はこれに由来します。
ヒント３：リストの項目は英語で「list item」ですね。

回答解説：HTMLのリスト表記はこうやればできる！

できましたでしょうか？ここから回答を解説していきます。

繰り返しになりますが、必ず自分で書いたコードを用意してからご覧ください。

ページタイトル

まず、演習問題の画面をみるとブラウザのタブに「メニュー」とありますね。

これはtitle要素で次のように書く必要があります。

<title>メニュー</title>

見出し

また、見出しにも「メニュー」とありますね。ヒントの通り、これはh1の大きさですので下記のように記述しましょう。

<h1>メニュー</h1>

箇条書き（順序なしリスト）

ここが今回のメインどころです。

演習問題の画面には箇条書きで「食事」「ドリンク」「デザート」と書かれていますね。

箇条書き（順序なしリスト）を書くには<ul>要素と<li>要素を使って下記のように記述しましょう。

<ul>
  <li>食事</li>
  <li>ドリンク</li>
  <li>デザート</li>
</ul>

回答コード

ここまでのポイントをまとめ、回答としては下記のような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>

ブラウザで表示すると、当初の目標としていた画面の通りに表示されます。

番外編：順序付きリストの場合

なお、今回は箇条書きの例でしたが、順序付きリストの書き方も覚えておきましょう。

順序付きリストは<ul>でなく<ol>を使います。「ordered list」の略と覚えると覚えやすいですね。

コード例は下記のようになります。

<!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でのリスト表記方法を演習方式で解説しました。

自分で考えて書くと、理解がより深まったのではないでしょうか？

ぜひたまに自分でコーディングする癖をつけて学習を加速していきましょう。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

はじめに

項目を列挙する時に便利な「リスト表記」。プレゼン資料やメモ書きなどにも多く登場しますよね。

もちろんWebページでも目にする機会は多いはずです。

HTML文書ではどのように書くのでしょうか？

この記事ではHTMLでのリストの書き方を詳しく解説します。

動画解説

本記事の内容を動画でも解説しています。

HTMLでリストを書く方法

https://www.youtube.com/watch?v=Z9t4USL4DHk&feature=youtu.be

入れ子になったリストを書く方法

https://www.youtube.com/watch?v=T9LpjMqHWL8&feature=youtu.be

箇条書きと順序付きリスト

HTMLで表示できるリスト書きには二種類あります。

箇条書き

項目を単に列挙する際によく使われる表記方法です。お買い物リストなどでよく見ますね。

例として下記のようなものです。

りんご
みかん
ぶどう

これを箇条書き、または順序なしリストと呼びます。

順序付きリスト

項目に順序を持たせて列挙する際に使われる表記方法です。手順の紹介などに使われます。

例として下記のようなものです。

金賞
銀賞
銅賞

これを順序付きリストと呼びます。

箇条書きを書く方法

ではまず、HTMLで箇条書きを書く方法を見ていきましょう。箇条書きには<ul>タグと<li>タグを使用します。

<ul>は「unordered list」の略で、順序のないリスト、つまり箇条書きのことです。

<li>は「list item」の略で、リストの項目を指します。

具体的にはこれらのタグを用いて下記のように記述します。

<ul>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
  ・・・略・・・
</ul>

実際に記述してみましょう。エディタを開いて下記のように記述してください。

ファイル名は「list.html」などにしてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リストの練習</title>
  </head>
  <body>
    <ul>
      <li>りんご</li>
      <li>みかん</li>
      <li>ぶどう</li>
    </ul>
  </body>
</html>

ファイルを保存してブラウザで開くと、正しく書けていれば下記のようになります。

箇条書きで表示されました。

順序付きリストを書く方法

次に、順序付きリストを書く方法を説明します。順序付きリストは<ol>タグと<li>タグで記述できます。

<ol>は「ordered list」の略で、順序付きリストの意味です。

<li>は箇条書きの時と同様、「list item」の略でリストの項目を指します。

具体的にはこれらのタグを用いて下記のように記述します。

<ol>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
  ・・・略・・・
</ol>

実際にHTMLを書いてみましょう。先ほどのファイル「list.html」で書いた箇条書きの後に、下記の通り追記してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リストの練習</title>
  </head>
  <body>
    <ul>
      <li>りんご</li>
      <li>みかん</li>
      <li>ぶどう</li>
    </ul>
    <ol>
      <li>金賞</li>
      <li>銀賞</li>
      <li>銅賞</li>
    </ol>
  </body>
</html>

ファイルを保存してブラウザで確認し、下記のようになっていればOKです。

先ほど書いた箇条書きの下に、順序付きリストが表示されました。

箇条書きと違い、数字が表示されていることに注目してください。

コードの中で数字を書いたわけではないですが、順序付きリストにすると自動で上から順に数字が割り振られます。

自分で数字をつける必要はないので注意しましょう。

リストの入れ子

リストを入れ子にすることもできます。リストの中にさらにリストを入れるということです。

入れ子になったリストとは？記述方法は？

ちょっとピンと来ないかもしれません。実際に見てみた方がわかりやすいですね。

下記のように「ご飯」の項目にさらに箇条書きがつくようなイメージです。

パン
ご飯
- 白米
- 赤飯

例えば箇条書きのリストを入れ子にするには、下記のように記述します。

<ul>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３
    <ul>
      <li>入れ子項目１</li>
      <li>入れ子項目２</li>
      <li>入れ子項目３</li>
    </ul>
  </li>
</ul>

「項目３」のところですぐに</li>（項目の終了タグ）を書かずに次の<ul>タグが始まる点に注目してください。

この部分が入れ子になっているリストです。

入れ子のリストが</ul>で終わると、その後にやっと「項目３」の終了タグである</li>が来ます。

実際にHTMLを書いてみましょう。エディタで「nested_list.html 」というファイルを新規作成し、下記のコードを記述してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>入れ子になったリストの練習</title>
  </head>
  <body>
    <ul>
      <li>パン</li>
      <li>ご飯
        <ul>
          <li>白米</li>
          <li>赤飯</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

ファイルを保存してブラウザで開くと下記のようになります。

「ご飯」の下にさらにリストが入れ子になっていますね。

このように、<li>〜</li>の間でさらにリストを記述するとリストを入れ子にすることができます。

</li>の位置について

ここで、下記のように</li>を入れ子の<ul>の前に書いてもいいのではないか？と思われるかもしれません。

実際、ブラウザによってはこのように記述しても想定通りに表示されることがあります。

（誤りのコード）

<ul>
  <li>パン</li>
  <li>ご飯</li>
    <ul>
      <li>白米</li>
      <li>赤飯</li>
    </ul>
</ul>

しかし、この書き方は誤りであるとMDNで明示されています。

知らず知らずのうちに間違った書き方をしてしまわないよう、注意しましょう。

<ul>: 順序なしリスト要素 – MDN Web Docs – Mozilla

Tips：VSCodeの便利機能

最後に、VSCode（Visual Studio Code：エディタの一種）でコーディングしている方向けに便利な入力補完機能をお伝えします。

お気づきの通り、リストではたくさんのタグを書かなければなりません。項目が増えれば尚更です。

VSCodeでは「Emmet（エメット）」という標準機能を使ってこの入力を簡単化することができます。

例えば数字付きリストで項目を３つ書きたい場合「ol>li*3」+Tabキーで必要なタグが自動的に入力されます。

下記のように入力してタブキーを押すと…

このように必要なタグが自動入力されます。便利ですね！

まとめ

HTMLでのリスト（箇条書き・数字付きリスト）の書き方と、入れ子にする方法について解説しました。

よく使う機能ですので、ぜひ覚えてくださいね。

また、本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

演習方式でHTMLのリスト表記方法を学習！解説で理解を深めよう

はじめに

動画解説

演習：HTMLでリスト表記をしてみよう

回答解説：HTMLのリスト表記はこうやればできる！

ページタイトル

見出し

箇条書き（順序なしリスト）

回答コード

番外編：順序付きリストの場合

まとめ

動画でプログラミング入門をしよう

HTMLでリストを書く方法！箇条書きと順序付きリストの違いは？入れ子にする方法も確認しよう

はじめに

動画解説

箇条書きと順序付きリスト

箇条書き

順序付きリスト

箇条書きを書く方法

順序付きリストを書く方法

リストの入れ子

入れ子になったリストとは？記述方法は？

</li>の位置について

Tips：VSCodeの便利機能

まとめ

動画でプログラミング入門をしよう