演習方式でHTMLのリスト表記方法を学習！解説で理解を深めよう | プログラミング入門ナビ by Proglus（プログラス）

Pocket

1 はじめに
- 1.1 動画解説
2 演習：HTMLでリスト表記をしてみよう
3 回答解説：HTMLのリスト表記はこうやればできる！
4 まとめ
5 今すぐメルマガ登録！
6 動画でプログラミング入門をしよう

はじめに

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

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

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

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

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

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

動画解説

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

演習：HTMLのリスト表記

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

演習：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>

ブラウザでの表示結果は下記のようになります。数字がつきましたね。