ulタグとolタグの違い・デザインカスタマイズ方法

Webページで箇条書きを作るときによく使うのが、ulタグ（順序なしリスト）とolタグ（順序付きリスト）です。この記事では、その違いとCSSでデザインをカスタマイズする方法を紹介します。

1 ulタグとは？

ul は「unordered list（順序なしリスト）」の略で、先頭に「・（黒丸）」などのマークが付くリストです。

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

上記のコードを表示すると、次のようになります。

• りんご
• みかん
• バナナ

2 olタグとは？

ol は「ordered list（順序付きリスト）」の略で、数字付きのリストになります。

<ol>
  <li>HTMLを学ぶ</li>
  <li>CSSを学ぶ</li>
  <li>PHPを学ぶ</li>
</ol>

表示結果は次の通りです。

1. HTMLを学ぶ
2. CSSを学ぶ
3. PHPを学ぶ

3 CSSで「・」や「■」に変更する

CSSの list-style-type を使うと、リストマークを簡単に変えられます。

ul.square-list {
  list-style-type: square; /* ■ に変更 */
}

ul.circle-list {
  list-style-type: circle; /* ○ に変更 */
}

実際の例：

<ul class="square-list">
  <li>四角のマーク</li>
</ul>

• 四角のマーク

<ul class="circle-list">
  <li>円のマーク</li>
</ul>

• 円のマーク

4 アイコンや画像を使ったカスタムリスト

もっと自由にしたい場合は、::before 擬似要素を使ってアイコンや画像を追加します。

/* -----------------------------
 * アイコンや画像を使ったカスタムリスト
----------------------------- */

ul.icon-list {
  list-style: none none !important;  /** 通常の箇条書きマーク（黒丸・数字など）を完全に無効化する */
  padding-left: 0 !important;   /** 左側の余白をなくして、アイコン位置を調整しやすくする */
}

ul.icon-list li {
  position: relative;                /** 擬似要素（::before）の位置指定をこの要素を基準に行うために relative を設定 */
  padding-left: 28px;                /** アイコン分のスペースを確保するために左側に余白を取る */
}

ul.icon-list li::before {
  content: "\1F4A1";                 /** 💡電球の絵文字（U+1F4A1）をアイコンとして表示する */
  position: absolute;                /** li要素の左上を基準に固定位置でアイコンを配置する */
  left: 0;                           /** 左端に配置（padding-left で確保した余白部分に表示される） */
  top: 0;                            /** 上端に揃える（テキストの行頭にアイコンが来るようにする） */
　font-size: 1.2em;                  /* アイコンサイズ調整 */
}

表示例：

<ul class="icon-list">
  <li>アイデアをまとめる</li>
  <li>見やすいデザインにする</li>
  <li>CSSで自由に装飾</li>
</ul>

• アイデアをまとめる
• 見やすいデザインにする
• CSSで自由に装飾

5 まとめ

• ul：順序なしリスト（点や四角）
• ol：順序付きリスト（数字付き）
• ::before と Unicode を使うと確実にアイコン表示可能