• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

プログラミング学習初心者のための情報メディア

You are here: Home / プログラミング入門 / 演習方式でHTMLのリスト表記方法を学習!解説で理解を深めよう

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

2020-08-31 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 はじめに
    • 1.1 動画解説
  • 2 演習:HTMLでリスト表記をしてみよう
  • 3 回答解説:HTMLのリスト表記はこうやればできる!
    • 3.1 ページタイトル
    • 3.2 見出し
    • 3.3 箇条書き(順序なしリスト)
    • 3.4 回答コード
    • 3.5 番外編:順序付きリストの場合
  • 4 まとめ
  • 5 今すぐメルマガ登録!
  • 6 動画でプログラミング入門をしよう

はじめに

演習に取り組む女性

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

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

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

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

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

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

動画解説

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

演習:HTMLのリスト表記

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

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

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

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

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

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

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

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

演習(表示結果)

  • ヒント1:見出しの「メニュー」文字はh1要素です。
  • ヒント2:順序なしリスト(箇条書き)は英語で「unordered list」です。使用する要素名はこれに由来します。
  • ヒント3:リストの項目は英語で「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週間無料体験しよう

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: HTML, li, ol, ul, リスト, 演習

Primary Sidebar

Proglus(プログラス) 採用情報 FindU

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • ChatGPTエラーの原因別対応法: トラブルシューティングのヒント
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • VSCodeの基本~プロジェクトフォルダの設定方法について解説します!
  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • Node.jsをmacOSからアンインストールする方法
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法
  • 【Arduino入門】LCD(液晶ディスプレイ)に文字を表示しよう
  • Linuxの標準エディタvi(vim)の超基本的な使い方!動画で初心者にもわかりやすく解説!
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します

最近の投稿

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • 【AdobeXD】無料体験版を入手する方法 を解説します!
  • 【SQL】エラーメッセージ”ERROR! The server quit without updating PID file”の解決方法を解説します!
  • 【vim】エラーメッセージ”E325: ATTENTION”の解決方法を解説します!
  • 【AWS】IAMユーザー作成方法のアップデート情報を解説します!

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench node.js Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code Vue.js Web開発 Windows エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習 開発環境構築

アーカイブ

  • 2023年5月
  • 2023年4月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2023 · programmingnavi.com ・About・プライバシーポリシー