みかおば
📘 HTML初心者のみかおばです！
今回も「ノート代わりに」記録しながら、ゆっくり覚えていきましょう〜😊
第6回は、ブログやWebページに**箇条書きを表示する方法（ulタグ・olタグ）**を解説します📝
💡 箇条書きってどういうもの？
箇条書きは、複数の項目を整理して見やすく表示するための方法です。
HTMLでは、以下のようなタグを使ってリストを作ります👇
🧩 <ul>タグと<ol>タグとは？
<ul>は unordered list（順不同リスト） の略<ol>は ordered list（番号付きリスト） の略- リストの中身は
<li>（list item）タグで囲んで作ります
📝 実際の書き方（コード例）
● 順不同リスト（ul）
html<ul>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>
→ 「・」のようにマークだけで表示されます。
● 番号付きリスト（ol）
html<ol>
<li>手を洗う</li>
<li>手を拭く</li>
<li>作業を始める</li>
</ol>
→ 「1. 2. 3.」のように順番がつきます。
🔍 よくあるミスと注意点
<li>を書き忘れるとリストにならない<ul>や<ol>を閉じないと、レイアウトが崩れる- 説明文と混在させると、逆に読みにくくなることも
🪄 応用：入れ子リストもできる！
リストの中にさらにリストを入れて、階層構造を作ることもできます👇
html<ul>
<li>フルーツ
<ul>
<li>りんご</li>
<li>バナナ</li>
</ul>
</li>
<li>野菜</li>
</ul>
→ 項目の中にサブ項目を表示できます。
✅ 覚えておきたいポイントまとめ
<ul>：順不同（・）のリスト<ol>：番号付きリスト<li>で各項目を囲む- ネスト（入れ子）もOK！でも使いすぎは注意⚠️
📌 次回のテーマ
👉【第7回】HTMLでSEO対策！メタタグの基本を学ぼう🔍
検索で見つけてもらいやすくするために、<meta>タグの使い方や、<title>・<description>の基本をやさしく解説します！
🔖 この回で出てきたタグ
コメント