こんにちは、Mochiです。
HTMLでリストってどんなふうに作るんだろう？🤔番号付きリストってどうやって作るんだっけ？そんな方に向けて、この記事では箇条書きリストと番号付きリストの作り方を学びます。
では、早速学んでいきましょう！
🤔リストとは？
箇条書きリストとは、以下のように点で情報を区切った表記です。
- Mochi Blog
- モチブログ
- もちぶろぐ
皆さんもよく見るかと思います。
また、番号付きリストは以下のように、先頭に数字がついているリストです。
- Mochi Blog
- モチブログ
- もちぶろぐ
リストを使う良い点は
- 情報をわかりやすくまとめることができる
- 番号付きリスト手順などの順序をわかりやすく示すことができる
といったことが挙げられます（早速使いました✌️）。どちらもわかりやすい文章を書くのに重要な要素です。
では、箇条書きリストと番号付きリストの作り方を学んでいきましょう！
✍️箇条書きリストを作成する
箇条書きリストには**<ul>タグと<li>タグ**を次のように、挟んで使います。<ul>タグの”ul”は英語の番号なしリストを意味する”Unorderd list”からきています。<li>の”li”は英語の”list”からきています。
<ul>
<li>Mochi Blog</li>
<li>モチブログ</li>
<li>
もちぶろぐ
</li>
</ul>
ここで<ul>タグと<li>タグは親と子の関係のように、<ul>タグの中に<li>タグが入っています。そのため<ul>タグは親要素、<li>タグは子要素と呼びます。タグの中にタグが入る構造はたくさん出てくるので頭の片隅に置いておきましょう。
また、<li>タグの前にインデント（空白）が入っています。以下のようにインデントなしで書いても問題はないですが、見やすさからインデントを入れるのがおすすめです。そして、3番目の<li>タグの例のように、インデントを入れて<li>タグで文字を囲んでも大丈夫です。
<ul>
<li>Mochi Blog</li>
<li>モチブログ</li>
<li>
もちぶろぐ
</li>
</ul>
また<li>タグは何個でも入れて大丈夫です。好きなだけ（必要なだけ）入れちゃいましょう。
✍️番号付きリストを作成する
番号付きリストは**<ol>タグと<li>タグ**を使って作ります。<ol>タグの”ol”は英語で番号付きリストを意味する”Ordered list”からきています。
<ol>
<li>Mochi Blog</li>
<li>モチブログ</li>
<li>
もちぶろぐ
</li>
</ol>
基本的に書き方は箇条書きリストと同じです。違いは、黒い点の代わりに番号が付いていることです。この番号は自動的につけてくれます。
🎉まとめ
箇条書きリストと番号付きリストの作り方を学びました。<ul>と<li>を使うことで箇条書きリストを作れます。<ol>と<li>を使うことで番号付きリストを作れます。
皆さんは2種類のリストを作れるようになりました👏どちらもページが見やすくなる、重要な要素です。このページを見返すなどして、しっかりと記憶に残していきましょう！
参考になれば幸いです。
読んでいただきありがとうございました！
