【🔰初心者向け・HTMLで箇条書き】ul・ol・liタグの使い方まとめ

HTMLで箇条書きを作成する際には、<ul>、<ol>、<li>タグを使用します。この記事では、初心者向けにこれらのタグの基本的な使い方を解説します。

1. <ul>タグとは？

<ul>タグは、順序のないリスト（箇条書き）を作成するために使用されます。このリストは通常、各項目の前に点（●）が表示されます。

使用例

<ul>
    <li>りんご</li>
    <li>みかん</li>
    <li>バナナ</li>
</ul>

この例では、果物のリストが箇条書きで表示されます。

2. <ol>タグとは？

<ol>タグは、順序のあるリスト（番号付きリスト）を作成するために使用されます。このリストは通常、各項目の前に番号が表示されます。

使用例

<ol>
    <li>1番目の項目</li>
    <li>2番目の項目</li>
    <li>3番目の項目</li>
</ol>

この例では、番号付きリストが表示され、各項目に番号が自動的に割り振られます。

3. <li>タグとは？

<li>タグは、リストの各項目を定義するために使用されます。<ul>タグや<ol>タグの内側で使われ、リストの要素を表します。

使用例

<ul>
    <li>リストの項目1</li>
    <li>リストの項目2</li>
</ul>

この例では、順序のないリストの中に2つの項目が定義されています。

4. 入れ子のリスト

リストの中にさらにリストを作成することも可能です。これを「入れ子のリスト」と言います。

使用例

<ul>
    <li>果物
        <ul>
            <li>りんご</li>
            <li>みかん</li>
        </ul>
    </li>
    <li>野菜
        <ul>
            <li>にんじん</li>
            <li>キャベツ</li>
        </ul>
    </li>
</ul>

この例では、「果物」と「野菜」のそれぞれの項目の下に、さらに詳細なリストが作成されています。

5. リストのカスタマイズ

CSSを使ってリストのスタイルをカスタマイズすることができます。例えば、箇条書きのマーカーを別のシンボルに変更したり、番号のスタイルを変えたりできます。

箇条書きのマーカーを変更する

ul {
    list-style-type: square; /* 四角いマーカーに変更 */
}

この例では、順序のないリストのマーカーが四角に変更されます。

番号付きリストの番号スタイルを変更する

ol {
    list-style-type: upper-roman; /* ローマ数字に変更 */
}

この例では、番号付きリストの番号がローマ数字に変更されます。

6. まとめ

<ul>、<ol>、<li>タグを使うことで、ウェブページに簡単にリストを作成できます。これらのタグを活用して、コンテンツをわかりやすく整理しましょう。入れ子のリストやCSSを使ったカスタマイズにも挑戦して、デザイン性の高いリストを作成してみてください。