トップ > HTML > HTMLリストタグの活用術：<ul>と<ol>でブログ記事を魅力的にカスタマイズ
最終更新日

HTMLリストタグの活用術：<ul>と<ol>でブログ記事を魅力的にカスタマイズ

HTML ブログカスタマイズ ウェブ開発 デザイン

HTML

巣で餌を待つ雛たち nest 入れ子


すぐに役立つブログ知識：リストタグ<UL> <OL> 便利な使い方

この記事では、HTMLの<ul>（順序のないリスト）と<ol>（順序のあるリスト）タグを使ったブログ記事のカスタマイズ方法を詳しく解説します。

アイコンの変更やマークの非表示、入れ子リストの作成から、<ol>タグでの番号スタイルの変更や目次への適用例まで、幅広い使い方を紹介します。

FontAwesomeなどのアイコンを使ったリストや、目次への応用例を通して、読者にわかりやすく魅力的なコンテンツを提供する方法を一緒に学びましょう。

本を読む眼鏡を掛けた猫ちゃん
©nyanco
リストの使い方って、ややこしいですよね…。よかったら、一緒に勉強しましょう~ ฅ^•ω•^ฅ



<ul>とは

unordered list（アンオーダードリスト）の略で、その名前の通り順序のないリストのことです。

HTML では、ul タグを使用して順序のない箇条書きリストを作成します。目次などもこのulタグで作成されます。 ul タグはまた、li 要素のコンテナ（箱）として機能します。

type 属性（「・」）を変える

リストの各項目は <li>（liタグ）で記述し、type属性をつけることで、テキストの前に

  • 塗りつぶし円（デフォルト） type="disc" ※指定なしでも同様
  • ライン円 type="circle"
  • 塗りつぶし四角 type="square"

を指定することが可能です。color でテキスト同様、色も付けられます。

<ul type="square" style="color: olivedrab;">
  <li>リスト１</li>
  <!-- 以下リスト -->
</ul>


ul タグと ol タグの違いは、ul タグは番号がないリスト（順不同リスト）になるが、ol タグは番号つきのリスト（順序付きリスト）になる点です。

ul タグの読み方は「ユーエルタグ」です。

<ol>とは

逆にol タグは ordered list（オーダードリスト）の略で、順序があるリストのことです。主に番号付けの箇条書きを書きたいときに、使います。

ol タグは「オーエルタグ」と読みます。

ol タグで作成したリストは、通常は番号付きのリストとして表示されます。リスト項目の先頭には、数字やアルファベットが付きます。リスト項目はulタグと同様、<li>（liタグ）で追加します。

type、start、reversed属性を使用したバリエーション

無指定（デフォルト）

  1. リスト１
  2. リスト２
  3. リスト３

<ol>
  <li>リスト１</li>
  <!-- 以下リスト -->
</ol>

「i」をtype属性に指定

  1. リスト１
  2. リスト２
  3. リスト３

<ol type="i">
  <li>リスト１</li>
  <!-- 以下リスト -->
</ol>

「a」をtype属性に指定

  1. リスト１
  2. リスト２
  3. リスト３

<ol type="a">
  <li>リスト１</li>
  <!-- 以下リスト -->
</ol>

startを属性に指定

（番号途中から開始できる）

  1. リスト１
  2. リスト２
  3. リスト３

<ol start="101">
  <li>リスト１</li>
  <!-- 以下リスト -->
</ol>

reversedを属性に指定

（降順に番号付け）

  1. リスト１
  2. リスト２
  3. リスト３
  4. リスト４

<ol reversed>
  <li>リスト１</li>
  <!-- 以下リスト -->
</ol>

type「a」、start、reversedを複合指定

（ちょっと実験）

  1. リスト１
  2. リスト２
  3. リスト３
  4. リスト４

<ol type="a" start="2" reversed>
  <li>リスト１</li>
  <!-- 以下リスト -->
</ol>

逆順で「a」が終わると0,-1,-2,…、と続く。

マークを消す

目次など、リストの前のマーク（・など）を消したいとき

list-style: none;を指定

  • リスト１
  • リスト２
  1. リスト３
  2. リスト４
  3. リスト５

<ul style="list-style: none; ">
  <li>リスト１</li>
  <li>リスト２</li>
</ul>
<ol>
  <li>リスト３</li>
  <li style="list-style: none;">リスト４</li>
  <li>リスト５</li>
</ol>
</ul>

「list-style」はul、olの点のデザインを指定するCSSです。liに指定しても点を消すことができます。


さらにアイコンに変える

マークを消して、FontAwesomeなどのアイコンを適用

before要素をliタグに指定

  • リスト１
  • リスト２
  • リスト３

ul.iconed-lists li::before {
    font-family: "Font Awesome 6 Free";
    content: '\f044';
    font-weight: 600;
}

<ul class="iconed-lists" style="list-style: none;">
  <li>リスト１</li>
  <!-- 以下リスト -->
</ul>

入れ子

  1. リスト１
  2. リスト２
    • 入れ子リスト１
    • 入れ子リスト２
    • 入れ子リスト３
  3. リスト２

<ol>
  <li>リスト１</li>
  <li>リスト２  <!-- 終了タグ </li> はココに置かない -->
    <ul>
      <li>入れ子リスト１</li>
      <li>入れ子リスト２</li>
      <li>入れ子リスト３</li>
    </ul>
  </li>  <!-- リスト２の終了タグ </li> はココ -->
  <li>リスト２</li>
</ol>

入れ子の入れ子

  1. リスト１
    • 入れ子リスト１
    • 入れ子リスト２
      1. 入れ子の入れ子リスト１
      2. 入れ子の入れ子リスト２
    • 入れ子リスト３
  2. リスト２
  3. リスト３

<ol>
  <li>リスト１</li>
  <li>リスト２  <!-- 終了タグ </li> はココに置かない -->
    <ul>
      <li>入れ子リスト１</li>
      <li>入れ子リスト２  <!-- 終了タグ </li> はココに置かない -->
        <ol>
          <li>入れ子の入れ子リスト１</li>
          <li>入れ子の入れ子リスト２</li>
        </ol>
      </li>  <!-- 入れ子リスト２の終了タグ </li> はココ -->
      <li>入れ子リスト３</li>
    </ul>
  </li>  <!-- リスト２の終了タグ </li> はココ -->
  <li>リスト２</li>
</ol>


目次への適用例

H2、H3、H4を使用して10項目を超えてくると、構造も複雑になってきます。

<ul class="table-of-contents">
  <li><a href="#H2-1">H2-1</a>
    <ul>
      <li><a href="#H3-1">H3-1</a>
        <ul>
          <li><a href="#H4-1">H4-1</a></li>
          <li><a href="#H4-2">H4-2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#H2-2">H2-2</a>
    <ul>
      <li><a href="#H3-2">H3-2</a></li>
    </ul>
  </li>
  <li><a href="#H2-3">H2-3</a>
    <ul>
      <li><a href="#H3-3">H3-3</a></li>
      <li><a href="#H3-4">H3-4</a>
        <ul>
          <li><a href="#H4-3">H4-3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#H2-4">H2-4</a></li>
</ul>



おわりに

リストタグ、<ul>と<ol>の不思議を解き明かす旅が終わりました笑。今回の記事では、<ul>と<ol>を使ったブログ記事のカスタマイズ方法について探求しました。

Happyな白文鳥のよっぴ
©yoppi
これであなたも、見出しやリストを魅力的に装飾し、読者に視覚的な楽しさを提供することができます。🚀

HTMLの力を活かし、ブログ記事をより魅力的に、読みやすく仕上げることができるはずです。新しいアイデアやデザインの実験をたくさんして、自分だけのブログスタイルを見つけてみてください。

次回の記事でも、より一層魅力的なブログコンテンツを作り上げるためのヒントやテクニックをお届けします。お楽しみに！✨


一生懸命勉強する猫
©nyanco
最後までお読みいただきありがとうございました。 みなさまの、ご参考になれば幸いです。それでは ฅ^•ω•^ฅ