0Pricing
HTML for Kids · レッスン

リスト：番号付きリストと箇条書きリスト

番号付きリストと箇条書きリストを作成します

「リスト：番号付きリストと箇条書きリスト」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。

リスト：順序付きと順序なし

次のレッスンへようこそ！今日は、HTMLでリストを作成する方法を学びます。リストを使うと情報を整理し、読みやすくできます。

リスト：番号付きリストと箇条書きリスト — イラスト1

リストとは？

リストは、関連する項目をまとめるのに便利です。HTMLには主に2種類のリストがあります。

  • 順序付きリスト：項目に番号が付きます（1、2、3…）。
  • 順序なしリスト：項目が箇条書きで表示されます。

両方の作成方法を学びましょう。

順序付きリストを作成する

順序付きリストは<ol>タグを使って作成します。リスト内の各項目は、<li>（list item）タグを使って追加します。

例：

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to school</li>
</ol>

順序なしリストを作成する

順序なしリストは<ul>タグを使って作成します。各項目は、順序付きリストと同じように<li>タグを使って追加します。

例：

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

入れ子になったリスト

リストの中に別のリストを作成できます。これを入れ子になったリストと呼びます。順序付きリストと順序なしリストは、互いの中に入れ子にできます。

例：

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

説明付きリスト

HTMLでは、<dl>、<dt>、<dd>タグを使って説明リストも作成できます。

  • <dl>：リストを定義します。
  • <dt>：用語（タイトル）を定義します。
  • <dd>：説明を定義します。

例：

<dl>
  <dt>HTML</dt>
  <dd>The language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>The language used to style web pages.</dd>
</dl>

リストにスタイルを追加する

CSSを使ってリストの見た目を変更できます。たとえば、箇条書き記号や番号の種類を変更できます。

例：

<style>
  ul {
    list-style-type: square; /* Changes bullets to squares */
  }
  ol {
    list-style-type: upper-roman; /* Changes numbers to Roman numerals */
  }
</style>

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

自分で試してみましょう

順序付きリストと順序なしリストを使った簡単なWebページを作成しましょう。次の例をご覧ください。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>My To-Do List</h1>
    <h2>Morning Routine</h2>
    <ol>
      <li>Wake up</li>
      <li>Brush my teeth</li>
      <li>Have breakfast</li>
    </ol>
    <h2>Shopping List</h2>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
    </ul>
  </body>
</html>

よくできました！

おめでとうございます！順序付きリスト、順序なしリスト、入れ子になったリスト、説明リストの作成方法を学びました。これらは、Webページ上の情報を整理するための便利なツールです。次のレッスンでは、リンクを追加して異なるページやWebサイトをつなぐ方法を学びます。さらに楽しく学んでいきましょう！

リスト：番号付きリストと箇条書きリスト — イラスト10

よくある質問

「リスト：番号付きリストと箇条書きリスト」レッスンは無料ですか？

はい。「リスト：番号付きリストと箇条書きリスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。

「リスト：番号付きリストと箇条書きリスト」で何を学びますか？

番号付きリストと箇条書きリストを作成します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML for Kidsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「リスト：番号付きリストと箇条書きリスト」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML for Kidsレッスンでコードを書いて実行できますか？

はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 見出しと段落
  2. リスト：番号付きリストと箇条書きリスト
  3. リンク：Webをつなぐ
  4. 画像：ページに画像を追加する
← HTML for Kidsに戻る