https://shiroyuki2020.hatenablog.com/entry/introduction_to_html

ul,liタグの基本的な使い方についてまとめます。ul,liタグの記述例と利用例をご紹介します。

順不同リスト

順序のないリストです。ulタグとliタグをセットで記述します。

<!-- 順不同リストの記述例 -->
<h3>カレーの材料</h3>
<ul>
<li>じゃがいも</li>
<li>人参</li>
<li>玉ねぎ</li>
<li>肉</li>
<li>カレールー</li>
<li>水</li>
<li>サラダ油</li>
</ul>

表示例

カレーの材料

じゃがいも
人参
玉ねぎ
肉
カレールー
水
サラダ油

順序リスト

順序のあるリストです。olタグとliタグをセットで記述します。

<!-- 順序リストの記述例 -->
<h3>カレーの作り方</h3>
<ol>
<li>材料を切る。</li>
<li>鍋に油をひき、具材を炒める。</li>
<li>水を入れ、煮る。</li>
<li>ルーを入れ、煮込む。</li>
</ol>

表示例

カレーの作り方

材料を切る。
鍋に油をひき、具材を炒める。
水を入れ、煮る。
ルーを入れ、煮込む。

リストの入れ子表現

リストは、入れ子にして記述することができます。

<!-- リストを入れ子にするときの記述例 -->
<h3>はてなブログ グループのカテゴリ</h3>
<ul>
<li>音楽・映画
  <ul>
  <li>音楽</li>
  <li>映画</li>
  <li>邦楽</li>
  <li>洋画</li>
  </ul>
</li>
<li>コンピュータ・IT
  <ul>
  <li>プログラミング</li>
  <li>インターネット</li>
  <li>テクノロジー</li>
  </ul>
</li>
</ul>

表示例

はてなブロググループのカテゴリ

音楽・映画
- 音楽
- 映画
- 邦楽
- 洋画
コンピュータ・IT
- プログラミング
- インターネット
- テクノロジー

定義リスト

定義する用語とその用語の説明を一対にしたリストです。dlタグ、dtタグ、ddタグをセットで記述します。dtに用語を、ddにその説明を記述します。全体をdlで囲います。

<!-- 定義リストの記述例 -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Languageの略。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheetsの略。</dd>
<dt>JavaScript</dt>
<dd>スクリプト言語。ウェブページに動きを付け加えることができる。</dd>
</dl>

表示例

HTML: HyperText Markup Languageの略。
CSS: Cascading Style Sheetsの略。
JavaScript: スクリプト言語。ウェブページに動きを付け加えることができる。

ul,liタグの使用例

リストは以下のような用途で使います。

グローバルメニュー
箇条書き
アコーディオンパネル

まとめ

リストには、順不同リスト、順序リスト、定義リストの3つのリストがあります。そして、リストは入れ子にすることができます。

ul,liタグの使用例を3つ挙げましたが、他の使い方があるかもしれません。それは、色々なサイトを見て探してみてください。

HTML入門のまとめ記事なら... » HTML入門まとめ